Using the Content Editor

Reference for the Elevate A/B Testing content editor: selecting elements, editing style and content, adding new elements and code, and switching pages and viewports.

---

The content editor loads your storefront and lets you change any element on it by clicking. This page covers what every control does.

Your original page is saved automatically as the control variant, so nothing you do here can lose it.

The toolbar

Control	What it does
Variation selector	Switches which variation you are editing. Each holds its own changes.
Page search	Moves the editor to another page. Search by name or paste a URL. Shortcut: Command K.
Preview mode	Toggles click to select on the preview
Desktop and mobile	Switches the preview width. Check both before you finish.
Undo and redo	Steps back and forward through your changes

The Layers panel

The left panel shows the page structure as a tree, from body down through each element.

Use it when an element is hard to click, when you need the container rather than the text inside it, or when you want to confirm exactly which element you have selected. Selecting in the tree selects it on the page, and vice versa.

Editing an element

Select an element to open Element Properties, which has two tabs.

Style

Section	Controls
Visibility	Opacity, and Hide Element to remove it from the page entirely
Content	The text itself, with a rich text editor: size, bold, italic, underline, strikethrough, color, highlight, alignment, ordered and unordered lists, indent, and links. Select Apply to commit the change.
Typography	Font, weight, size, color, alignment, style, decoration, line height
Size	Width and height
Layout	Auto layout or columns
Spacing	Margin and padding, edge by edge
Background	Background color, or an image
Border	Side, style, color, width, and corner radius

Content changes need Apply. Style changes take effect as you make them.

Settings

Attributes lets you add or remove HTML attributes on the selected element, with Add Attribute. Use this when a change depends on an attribute rather than a style, such as a link target or a data attribute another script reads.

Adding new elements

With nothing selected, the right panel offers Content Elements.

Group	Elements
Text Elements	Text, Heading 1, Heading 2, Heading 3
Core Elements	Image, Container

New elements are inserted into the page and styled with the same properties panel as anything else. Use Container when you want to group new elements and lay them out together.

Adding code

The right panel also offers Custom Code, with two types:

Type	Use it for
Custom JavaScript	Interactivity, tracking scripts, or behavior the editor cannot express
Custom CSS	Styling that is easier to write than to click, or that has to target many elements at once

Code added here applies to the variation you are editing, not to the whole experiment. Keep it light. A variation carrying heavy code against a control carrying none is not a clean comparison.

Working practices

Check mobile as you go, not at the end. Switching viewport after twenty changes means finding which one broke the layout.

Use the Layers panel for containers. Clicking on a page usually selects the text. If you want to change the box around it, select the parent in the tree.

Prefer hiding to deleting when you want to test whether a section earns its place. Hide Element is reversible and unambiguous.

Watch what your selection actually is. The editor labels the selected element with its tag and class. If that label is not what you expected, you are about to style something other than what you meant.

Next steps

• Preview and QA a Content Experiment

• Troubleshooting Content Experiments