Visual Editor Testing - Getting Started
The Visual Editor lets you make changes to any page on your store — edit text, swap images, restyle elements, hide sections, or rearrange layouts — all through a point-and-click interface. No code required.
What Is a Visual Editor Experiment?
A Visual Editor experiment lets you make on-page changes directly through Elevate's built-in editor, then test those changes against your current page. You click on any element, modify it, and Elevate runs the experiment to see if the change improves performance.
This sits between a page experiment (which swaps entire templates) and a custom code experiment (which requires writing JS/CSS). The Visual Editor gives you the flexibility to make targeted changes without needing a developer or creating alternate templates.
What Can You Change?
The Visual Editor works with any visible element on your page. Here's what you can modify:
Text & Content
Edit headings, paragraphs, labels, buttons, links, and any other text
Rich text editing for formatted content (bold, italic, etc.)
Replace text content entirely or make small tweaks
Images
Swap image sources — replace a hero image, banner, or product photo
Adjust image sizing, fit, and positioning
Visibility
Hide elements — remove sections, banners, or any element from the page
Adjust opacity — fade elements in or out
Styling
Typography — Font family, weight, size, color, alignment, line height, letter spacing
Spacing — Margins and padding on any element
Borders — Border width, style, color, and radius
Backgrounds — Background color and background images
Layout — Display, flex direction, alignment, grid columns, gap
Adding New Elements
Insert new text blocks (paragraphs, headings)
Add new images
Add containers for layout structure
Custom Code Blocks
For changes that go beyond the visual editor, you can add custom JS/CSS blocks within a variation
How It Works
You enter the Visual Editor, which loads your live store page in an interactive preview
Click on any element to select it — the editor shows what properties you can change
Make your changes visually — edit text, swap images, adjust styles
Each change is recorded as a modification to apply to that specific element
When a visitor is assigned to the variation, the Elevate theme extension applies the changes in real time on the page
The control shows the page as-is, with no modifications
Changes are applied using CSS selectors — the editor identifies each element you modify and stores the changes. The theme extension then applies those changes when the page loads for visitors in the variation.
When to Use Visual Editor vs. Other Test Types
Change specific text, images, or styles on a page
Visual Editor
Swap out the entire page template
Page Testing
Write custom JavaScript and CSS
Custom Code Testing
Change prices
Price Testing
Test a completely different URL
Split URL Testing
The Visual Editor is best for targeted, element-level changes — changing a headline, swapping a hero image, hiding a section, restyling a button. If you need to restructure the entire page or make changes that require custom logic, page testing or custom code testing may be a better fit.
What You'll Need
Before creating a Visual Editor experiment:
The Elevate theme extension enabled — Required for applying changes on the storefront. If it's not enabled, Elevate will prompt you during setup.
A clear hypothesis — What element are you changing, and what do you expect the impact to be?
Access to your store's live pages — The editor loads your actual storefront, so the pages you want to test need to be live and accessible.
Visual Editor testing works on all Shopify plans.
Next Steps
How to Create a Visual Editor Experiment — Step-by-step setup guide
Audience Targeting — Control which visitors see your experiment
Last updated