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 small Zolvio toolbar at the top. You edit the page directly; when you’re done, your changes are sent back to the test you were setting up.

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

  1. Hover to highlight an element, then click it.
  2. Zolvio automatically works out a stable way to target that element (a “selector”)—you don’t need to know any CSS.
  3. Choose what to change and enter the new value:
    • Text — replace the wording
    • Background color / Text color
    • Image — swap the image URL
    • Hide element — remove it from the page
  4. Click Add change to apply it live in the preview.

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.

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.

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, unlock it in the new tab first—then the editor toolbar appears.

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.

Next