# 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](https://docs.elevateab.com/elevate-helpcenter/experiment-setup/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:

1. **Visit the page being tested** — Verify the variation changes are appearing correctly
2. **Check text changes** — Confirm edited text displays correctly, including any special characters or formatting
3. **Check image swaps** — Verify replacement images load correctly and are sized properly
4. **Check hidden elements** — Confirm hidden elements are not visible and the page layout adjusts correctly
5. **Test on mobile and desktop** — Visual changes can look different across screen sizes
6. **Test page interactions** — Make sure your changes don't break buttons, links, forms, or other interactive elements
7. **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.