Visual Editor

Change your storefront by pointing and clicking—no code. The editor runs on your real store, so what you edit is exactly what visitors will see.

How it works

From a Visual-change test, click Open visual editor. Zolvio opens your live storefront in a new tab with a Zolvio bar along the bottom. You edit the page directly; when you’re done, your changes are sent back to the test you were setting up.

Visual editor on the storefront with a heading selected — The visual editor on your live storefront: the selected element, its toolbar, the side panel and the Zolvio bar.

Why a new tab?

Shopify storefronts can’t be embedded inside another app, so the editor runs on your own store in a new tab. Nothing you edit is published until you create and start the test—edits are saved as a draft first.

Editing an element

Hover to highlight an element, then click it.
Zolvio automatically works out a stable way to target that element (a “selector”)—you don’t need to know any CSS.
Choose what to change and enter the new value:
- Text — replace the wording
- Style — colors and other styles
- Image — swap the image
- Hide — remove it from the page
The change applies live on the page, so you see it before you send it to Zolvio.

Select a bigger area menu in the visual editor — The element's name in its toolbar opens Select a bigger area, to pick the block or section around it instead.

Multiple changes in one variant

Keep clicking and editing to stack several changes into the same variant—for example, change a headline, recolor the “Add to cart” button, and hide a banner. The toolbar shows how many changes you’ve made, and they’re previewed together.

A changed heading and the side panel's Your changes list — The heading changed on the page, and listed under Your changes in the side panel.

Editing more than one page

Switch the toolbar to Browse to move around your store like a visitor—links work, but nothing is added to the cart or submitted. Switch back to Edit on any page and keep adding changes. Every change remembers the page it was made on, so one variant can restyle the home page, a collection, and a product page together. Visitors are only enrolled in a multi-page test on the pages you actually changed, which keeps the results fair, and multi-page tests measure add-to-cart, checkout, or purchase goals.

Edit, Browse and Preview in the Zolvio bar — Edit, Browse and Preview, then desktop, tablet and phone views.

Saving your work

When the variant looks right, click Send to Zolvio. Return to the Zolvio tab to finish choosing your goal and audience, then start the test.

Undo, redo, change count, Cancel and Send to Zolvio — The change count, Cancel and Send to Zolvio at the right end of the bar.

Before you open the editor

Make sure the Zolvio A/B Testing app embed is enabled on your theme (see Setup). If your store is password-protected, open your storefront in this browser and enter the password before you click Open visual editor. Entering it inside the editor tab drops the editor session, so the toolbar never appears—close that tab and open the editor again once the store is unlocked. See Password-Protected Stores.

Prefer to type selectors?

You can still enter CSS selectors and values manually in the test form—useful for advanced cases or when you already know the exact selector. The visual editor is just the fastest way to get there.