How to Create a Visual Editor Experiment
This guide walks you through setting up a Visual Editor experiment in Elevate — from making your changes to launching the test.
Step 1: Create an Experiment
From your Elevate dashboard, go to Experiments and click New Experiment. Select Visual Editor Experiment.
If the Elevate theme extension isn't enabled on your store, you'll be prompted to enable it first.
Step 2: General Info
Enter your experiment details:
Name — Something descriptive like "Homepage Hero CTA Test" or "PDP Description Restyle"
Description — What you're testing and why
Hypothesis — What you expect to happen
For example:
"Changing the 'Add to Cart' button color from gray to green and increasing its size will increase add-to-cart rate by making the primary action more visually prominent."
Choose your experiment goal. The best choice depends on what you're changing — Add-to-Cart Rate for button changes, Conversion Rate for content changes, Revenue Per Visitor for broader layout changes.
You can also optionally scope the experiment to specific products if the changes are on product pages and you only want to track the impact on certain products.
Step 3: Make Your Changes in the Visual Editor
This is the core step. The Visual Editor opens in a full-screen view, loading your live store page in an interactive preview.
Selecting Elements
Click on any element on the page to select it. The editor highlights the element and shows a sidebar with the properties you can modify.
The types of elements you can select include:
Text (headings, paragraphs, labels, links, buttons)
Images
Containers and sections (divs, sections, headers, footers)
Form elements (inputs, selects)
Lists and tables
Making Changes
Once an element is selected, use the right sidebar to modify its properties. The available options depend on the element type:
For text elements:
Edit the text content directly
Change font, size, weight, color, alignment
Adjust spacing, borders, and background
For images:
Replace the image source
Adjust sizing, object fit, and positioning
For layout elements (divs, sections):
Adjust visibility (show/hide)
Change background color or image
Modify spacing, borders, sizing
Change layout properties (flex, grid)
For any element:
Hide it entirely using the visibility toggle
Adjust opacity
Adding New Elements
You can also add new elements to the page:
Text — Paragraphs and headings (H1, H2, H3)
Images — New image elements
Containers — Layout containers for grouping content
New elements are inserted into the page and can be styled using the same sidebar options.
Working with Multiple Variations
Use the variation selector at the top of the editor to switch between variations. Each variation has its own independent set of changes — modifying one doesn't affect the others.
The control is always your current page with no modifications.
Saving Changes
The editor saves changes as you make them. Each modification is stored as a specific change to a specific element — so only the elements you modify are affected. Everything else on the page stays the same.
Step 4: Traffic Allocation
Set how traffic is split between your variations. The default is an even split. Adjust as needed — percentages must add up to 100%.
Step 5: Add Audience Targeting (Optional)
Narrow your audience if needed — by device, location, traffic source, visitor type, or UTM parameters.
For the full list of targeting options, see Audience Targeting.
Step 6: Review and Launch
Review your experiment — the review screen shows a summary of the changes in each variation. Verify everything looks correct, then click Create Experiment to submit.
The experiment moves into review status. Once you've completed QA, click Launch Experiment to go live.
Quality Assurance
After launching:
Visit the page being tested — Verify the variation changes are appearing correctly
Check text changes — Confirm edited text displays correctly, including any special characters or formatting
Check image swaps — Verify replacement images load correctly and are sized properly
Check hidden elements — Confirm hidden elements are not visible and the page layout adjusts correctly
Test on mobile and desktop — Visual changes can look different across screen sizes
Test page interactions — Make sure your changes don't break buttons, links, forms, or other interactive elements
Verify tracking — Check the Raw Data tab to confirm events are recording with the correct variation
Tips for Better Results
Test one change at a time — If you change the headline AND the button color AND the hero image in one variation, you won't know which change drove the result. Keep variations focused.
Make meaningful changes — Small tweaks (changing one word, adjusting a margin by 2px) are unlikely to produce measurable results. Test changes that visitors will actually notice.
Preview before launching — Use the editor preview to see exactly what visitors will experience before going live.
Consider mobile first — If most of your traffic is mobile, make sure your changes look good on small screens. A change that looks great on desktop but breaks on mobile will hurt overall performance.
After Launching
Monitor results — Check the Results tab to track performance
Wait for significance — Let the experiment run until it reaches a definitive status. See Statistical Significance.
End the experiment — When ready, see Ending an Experiment. If the variation wins, you'll need to implement the winning changes permanently in your theme.
Last updated