# 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](/elevate-helpcenter/visual-editor-testing/how-to-create-a-visual-editor-experiment.md) — Step-by-step setup guide
* [Audience Targeting](/elevate-helpcenter/experiment-setup/audience-targeting.md) — Control which visitors see your experiment


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.elevateab.com/elevate-helpcenter/visual-editor-testing/visual-editor-testing-getting-started.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.