Easily add/edit anything you want
You can use Visually.io to easily add and edit almost anything you want on your store.
First, if the page you see in the Quick Preview (on the left side of the screen) isn't the one you wish to edit, use the dropdown list above it to select the right page. Note that if you scroll all the way down in the dropdown list, you'll find a "Custom URL" option where you can manually define the desired page.
1. Edit An Existing Element
Edit an existing element by hovering it until it is colored purple, and then click it. You'll get a dropdown list with the following options:
-
Edit Visual - this will open a Visual Editor with many easy-to-use edit options.
-
Edit Code - this will open the relevant piece of code, allowing you to modify it.
-
Replace - selecting this option will simply remove this element and add instead another element in the exact same placement.
-
Copy - click Copy and then Continue to duplicate this element. The new copied element will be added next to the original one. If you wish it to be placed elsewhere, click the new element and choose the Move option.
-
Move - use it to change the location of an element. As you will see on the right side of the screen, when you define the location of an element there are 2 things to set:
-
Before/After
-
The name of an element that we're placing our element next to. You can manually update this element name or simply use the Quick Preview on the left of the screen to click the relevant element.
-
-
Remove - once you click it the element will be gone.
2. Add A New Element
-
Go to the Quick Preview on the left side of the screen
-
Hover an element that is next to where you want the new content to be at, and wait for 2 seconds until it is colored in purple and a plus sign is added above and below it
-
Click the top plus sign (+) to add new content above it or the lower plus sign to add content below it
-
A purple rectangle will be added, and now you'll choose the type of content you wish to add (from the options on the right side of the screen):
-
Content Blocks - fully customizable widgets that can be placed anywhere on your site, and their content isn't changing (text / image / video / timer...)
-
Product Recommendations
-
Product Upsells
-
Fake Click - a widget that lets you define a set of actions that will take place as if the user has taken them. For example, you can define that the product page will open with the second product image instead of the first. You'll do that by "faking" a click that switches to the second image.
-
Code Blocks - you can use this option to add a piece of code
-
Edit Your Changes
Each change you make is added on the right side of the screen as part of the Change Log section. When you click on a change it opens its Edit mode. When you click the 3 dots on the right of a specific change, it opens a dropdown list with a few options:
-
Edit
-
Duplicate
-
Replace Position - lets you move the new content to a different location on the page
-
Copy CSS Selection - lets you copy the location of the element
-
Rename - when you have many changes in the Change Log on the right, it can be very useful to name them for better orientation. It is recommended to use details names. Also note that once you rename the change, the automatic name that was given to it will be gone.
-
Delete - clicking it removes the change
Visual Editor
-
When you add a new element or edit an existing one by choosing Edit Visual, the Visual Editor opens on the right side of the screen.
-
By default, only the Quick Edit Options are available
-
Click the colorful Customize-The-Design button to open all options
When you add a new element or edit an existing one by choosing Edit Visual, the Visual Editor opens on the right side of the screen.
By default, only the Quick Edit Options are available
Click the colorful Customize-The-Design button to open all options
Important Info
-
Each new element is added before/after an existing element.
-
Each change is targeting a specific device and page type. You can change the Page Type by clicking it and choosing from the dropdown list. The device can be changed by switching the Quick Preview device on the top left side of the screen using the device icon and creating the desired change on the relevant device.
