# 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

1. You enter the Visual Editor, which loads your live store page in an interactive preview
2. Click on any element to select it — the editor shows what properties you can change
3. Make your changes visually — edit text, swap images, adjust styles
4. Each change is recorded as a modification to apply to that specific element
5. When a visitor is assigned to the variation, the Elevate theme extension applies the changes in real time on the page
6. 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

| If you want to...                                 | Use                     |
| ------------------------------------------------- | ----------------------- |
| 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:

1. **The Elevate theme extension enabled** — Required for applying changes on the storefront. If it's not enabled, Elevate will prompt you during setup.
2. **A clear hypothesis** — What element are you changing, and what do you expect the impact to be?
3. **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](https://docs.elevateab.com/elevate-helpcenter/visual-editor-testing/how-to-create-a-visual-editor-experiment) — Step-by-step setup guide
* [Audience Targeting](https://docs.elevateab.com/elevate-helpcenter/experiment-setup/audience-targeting) — Control which visitors see your experiment