Visual Editor is Rebuy's no-code storefront editing tool inside A/B Testing. It loads any Shopify storefront page in the preview editor, lets you click directly on elements to edit them, and saves changes as A/B test variants. Visual Editor handles text, images, buttons, colors, alignment, layout order, and element visibility, all without writing CSS, JavaScript, or touching theme code.
Common Visual Editor experiments include:
Testing headline copy on product pages, landing pages, or homepage hero sections.
Swapping hero images or product thumbnails to find the highest-converting visuals.
Reordering page sections (for example, moving an Image Banner above a Featured Collection block) to optimize layout.
Changing CTA button text, color, or link target.
Hiding or showing elements to measure whether removing friction improves conversion.
Updating alt text or image fit to test accessibility and visual presentation.
Visual Editor is available for the General experiment type only. It does not apply to Widget, Smart Cart, Smart Flow, or Checkout Offer experiments.
Where to Find Visual Editor
Visual Editor opens from inside the experiment setup page for any General experiment, on a per-variant basis.
From the Rebuy admin, navigate to Flows & A/B Testing > A/B Testing.
Click Create New Experiment.
Choose General as the experiment type.
Under Page Targeting, select the page type you want to test from the dropdown (Home page, Collection pages, Product pages, Cart page, Order Status pages, Account pages, Search page, Pages, Blog pages, Article pages, or Custom), then enter the path or URL in the field beside it.
Scroll to Select Control and Variations. Each variant row (Control, Variant 1, and any added variants) has its own Edit in Visual Editor button.
Click Edit in Visual Editor on the variant you want to edit. Visual Editor opens with that variant loaded.
TIP: Each variant has its own Visual Editor session. The Control variant typically stays unchanged (it represents your existing storefront), while changes made to Variant 1, Variant 2, etc., are what the experiment tests against the Control.
[Screenshot example above: Experiment setup page with the Edit in Visual Editor button visible on the Control and Variant 1 rows.]
Top header bar
The top header bar runs across the entire Visual Editor and contains:
Back: returns to the experiment setup page.
Variant selector: dropdown that switches the editor between Control and any added variants (Variant 1, Variant 2, etc.).
Edits counter: shows how many edits have been made to the current variant (for example, 4 EDITS). Clicking it opens the Edit History sidebar.
Help icon: opens contextual help.
Save: saves every edit made to the current variant.
Editor toolbar
The toolbar above the Storefront Preview editor contains:
Current page: shows which page is loaded (for example, Home page).
Responsive view toggles: switch between desktop, tablet, and mobile preview layouts. These toggles change the preview view only. They do not let you save mobile-specific variant changes.
Zoom: dropdown with 50%, 75%, 100%, 125%, and 150% options.
Navigation Mode / Selection Mode: switches between two interaction modes. Selection Mode (the default for editing) makes clicks select elements for editing. Navigation Mode lets you click around your storefront like a customer would, useful for navigating to a deeper page before making edits.
[Screenshot above: Visual Editor open with the top header bar and editor toolbar both visible.]
Selecting an Element to Edit
With the editor toolbar set to Selection Mode, click directly on any element in the Storefront Preview to select it. The selected element gets a highlight border, and the right sidebar opens the Choose Action panel.
Visual Editor recognizes two element categories.
Text-type elements include paragraphs, spans, links, buttons, labels, headings (H1 through H6), list items, table cells, dropdown options, and inline emphasis tags. When you click Edit on a text-type element from the Choose Action panel, the Style Editor opens with two sections: Content (Edit Text and URL Link) and Text Styles.
Image elements have their own Content section in the Style Editor with an upload area, Image URL, Alt Text, and Fit controls.
Other non-text elements include divs, sections, and other structural elements. When you click Edit on an element that has no editable styles in Visual Editor, the Style Editor displays "No style options available for this element." You can still Insert Element, Duplicate, Move, or Hide/Remove that element from the Choose Action panel.
[Screenshot above: Selection Mode enabled with the targeted element]
The Choose Action Panel
When you select an element in Selection Mode, the right sidebar opens the Choose Action panel with five options:
Edit: opens the Style Editor sidebar with two tabs (Style Editor for text and visual style changes, Code Editor for CSS, JavaScript, or HTML changes).
Insert Element: opens the Insert Element panel to inject HTML, CSS, or JavaScript at a chosen position relative to the selected element.
Duplicate: creates a copy of the selected element.
Move: opens the Move Element panel for drag-and-drop reordering.
Hide/Remove: hides or removes the element from the current variant.
[Screenshot above: Choose Action panel open in the right sidebar for the selected element.]
Editing Text with the Style Editor
When you click Edit from the Choose Action panel on a text-type element, the Style Editor opens in the right sidebar. The sidebar has two tabs at the top:
Style Editor: the default tab. Contains the Content and Text Styles sections described below.
Code Editor: a CSS, JavaScript, and HTML editor scoped to the selected element. Use this when the Style Editor controls do not cover the change you need.
Content section
The Content section has two fields:
Edit Text: the text content of the selected element. Changes appear in the Storefront Preview in real time as you type.
URL Link: the destination URL for link-type elements (anchor and button tags). Leave empty for elements that are not links.
Text Styles section
The Text Styles section contains style controls for the selected element:
Font Size: text size as a CSS value, such as 52px or 1.5rem.
Font Weight: numeric weight from 100 to 900 in increments of 100. Common values are 400 (regular) and 700 (bold).
Text Color: pick a color from the color picker or enter a hex value directly.
Text Alignment: left, center, or right alignment.
These controls map directly to core CRO principles. Editing text content addresses Clarity by letting you test headline copy that communicates the value proposition more directly. URL Links address Friction by letting you redirect a CTA to a higher-intent destination. Text Color and Font Weight address Visibility by making the primary action more prominent.
Cancel and Done
At the bottom of the Style Editor sidebar, two buttons control whether your edits stick:
Cancel: discards the edits made to the current element.
Done: commits the edits to the current variant. Done activates once you have made a change.
Committing with Done only stores the change in the active variant session. To save every edit to the experiment itself, click Save in the top header bar.
[Screenshot above: Text element selected, Style Editor sidebar open showing the Content section, Text Styles section, and the Cancel and Done buttons at the bottom.]
Editing Images with the Style Editor
When you click Edit from the Choose Action panel on an image element, the Style Editor opens in the right sidebar with a Content section tailored to images. The Content section contains an upload area, an Image URL field, an Alt Text field, and a Fit control.
Image upload
The top of the Content section is an image upload area:
Click Upload Images to open your file picker, or drag and drop an image file onto the upload area.
Supported formats: JPG, PNG, GIF, or SVG.
Maximum file size: 5 MB.
Image URL
Use the Image URL field to paste a direct link to a hosted image instead of uploading a file. The image loads from the URL into the Storefront Preview.
Alt Text
Use the Alt Text field to add a text description of the image. Alt text is read by screen readers and accessibility tools, and is also what loads if the image fails to render. Keeping alt text accurate is good practice for both accessibility and SEO.
Fit
Use the Fit control to choose how the image scales inside its container. The four options map to the CSS object-fit property:
Cover: scales the image to fully cover the container, cropping any overflow. Best for hero banners and full-bleed images.
Contain: scales the image to fit entirely inside the container, preserving aspect ratio. May leave empty space on the sides or top and bottom. This is the default.
Scale: scales the image down if it is larger than the container, but never scales it up. Preserves the image's natural size when possible.
Stretch: stretches the image to fill the container exactly, ignoring aspect ratio. May distort the image.
Cancel and Done at the bottom of the sidebar behave the same as they do for text elements: Cancel discards changes, Done commits them to the current variant, and Save in the top header bar persists every edit to the experiment.
[Screenshot above: Image element selected, Style Editor sidebar open showing the Content section with the upload area, Image URL field, Alt Text field, and Fit control.]
Inserting New Elements with Insert Element
When you select Insert Element from the Choose Action panel, the Insert Element panel opens in the right sidebar. Insert Element lets you inject HTML, CSS, or JavaScript at a position you choose relative to the selected element.
Note: Insert Element is code-based. For text and style changes to existing elements that do not require new markup, use the Style Editor instead.
Position options
Choose one of four positions for the new element. Above is selected by default:
Above: insert immediately before the selected element, as a sibling.
Top: insert at the top of the parent block that contains the selected element, before all other siblings.
Below: insert immediately after the selected element, as a sibling.
Bottom: insert at the bottom of the parent block that contains the selected element, after all other siblings.
Code Language
Choose the type of code you want to inject:
CSS: inject a CSS rule or rule set that applies in the variant.
JS: inject JavaScript that runs when the variant loads.
HTML: inject raw HTML markup as a new element. This is the default.
Code editor
The code editor uses syntax highlighting and line numbering for the selected language. Use Expand at the top right of the editor to open a larger editing view if you need more room.
Cancel and Done
At the bottom of the Insert Element panel:
Cancel: discards the new element and closes the panel.
Done: commits the new element to the current variant. Done is disabled until you add code to the editor.
As with all Visual Editor actions, click Save in the top header bar to persist your edits to the experiment.
[Screenshot above: Insert Element panel with the four position options, Code Language tabs (CSS / JS / HTML), code editor, and Cancel and Done buttons all visible.]
Reordering Layout with the Move Element Panel
When you select Move from the Choose Action panel, the Move Element panel opens in the right sidebar. The panel shows the page structure as collapsible parent sections, with each section's child elements nested underneath. Click a parent section to expand or collapse its children.
[Screenshot above: Move Element panel open with a parent section expanded, showing child elements and visible drag indicators.]
How the Move Element panel is organized
The Move Element panel groups your page into three zones based on the theme structure, separated by dividers:
Header zone at the top: site-wide elements like the Announcement Bar and Header.
Main zone in the middle: the page-specific sections (such as Image Banner, Featured Collection, Rich Text, or unnamed sections).
Footer zone at the bottom: the Footer.
Parent sections are the major page blocks. Section names come from the theme's schema where available (for example, Image Banner, Featured Collection, or Rich Text). Sections without schema names appear as generic labels like Section 4 or Section 5. Each parent shows a drag indicator icon next to its name.
Child elements are nested under their parent section. Labels use merchant-friendly names (Heading, not <h1>; Button, not <button>; Image, not <img>). Each child shows a drag indicator when its parent section has two or more children.
Drag-and-drop rules
Parent sections can be reordered within their zone (Header, Main, or Footer) but cannot be moved to a different zone or nested inside another section.
Child elements can be reordered within their parent section only. They cannot be moved to a different parent section.
Drag indicators are hidden when there is nothing to reorder against (for example, when a parent has only one child, or when a zone has only one section).
Preview Editor behavior in Move mode
The Storefront Preview editor is selectable but view-only during Move mode. All reordering happens in the Move Element panel.
The preview editor updates on drop, not during drag. You will not see live re-rendering as you move an element.
Clicking a parent section in the panel scrolls the preview editor to that section.
Clicking an element in the preview editor expands its parent section in the panel and highlights the corresponding child row.
What's exposed vs hidden in the panel
The Move Element panel shows only elements you would reasonably want to reorder:
Exposed as moveable: headings, text and paragraphs, images, videos, buttons, links, forms, input fields, and lists.
Hidden from the panel: wrapper divs, container divs, layout grids, spacing elements, script tags, style tags, hidden elements, and SVG icons that are part of another component.
Rule of thumb: if you wouldn't point at it on your storefront and say "I want to move that," it isn't shown.
Saving and discarding Move changes
Move changes do not persist until you click Done in the Move Element panel and then Save in the top header bar. Done is disabled until you make at least one reorder.
You can drag and drop as many times as you want before committing.
Edit History (undo and redo) covers Move operations.
Clicking Cancel in the Move Element panel discards all reorders made in the current session.
Edit History
The Edit History sidebar tracks every change you make to a variant. Open it by clicking the edits counter (for example, 4 EDITS) in the top header bar.
Each entry in Edit History shows:
The name of the element that was changed (for example, Heading, Link, Password).
The action that was performed (Removed Heading, Inserted element above Password, etc.).
A timestamp (for example, 8 minutes ago).
An Edit button to open the Style Editor for that change again.
An Undo button to revert that single change.
Use Clear All at the top of the Edit History sidebar to discard every edit on the current variant. Use the per-card Undo button to revert one edit while keeping the rest.
[Screenshot above: Edit History sidebar open showing several edit cards with Edit and Undo buttons.]
Style Editor vs Code Editor: When to Use Each
After you click Edit from the Choose Action panel, the right sidebar shows two tabs: Style Editor and Code Editor. Both edit the same selected element and commit changes to the same A/B test variant.
Use the Style Editor tab when you want to:
Change text copy on a headline, button, or label.
Change font size, font weight, text color, or text alignment.
Change a CTA button's link target.
Swap an image, set alt text, or change image fit.
Use the Code Editor tab when you want to:
Apply CSS or JavaScript to the selected element that the Style Editor does not expose, such as animations, changing font family, conditional styles, or complex selectors.
Modify HTML on the selected element that goes beyond text and image swaps.
Run logic on the selected element that depends on cart state, customer state, URL parameters, or third-party app behavior.
The Code Editor tab modifies the selected element. To add brand new elements via code, use Insert Element from the Choose Action panel instead.
For the broader General experiment workflow (page targeting, control versus variants, goal selection, scheduling, starting and ending the test), see the A/B Testing General Experiments guide.
Limitations
Visual Editor has the following limitations:
General experiments only. Visual Editor does not apply to Widget, Smart Cart, Smart Flow, or Checkout Offer experiments.
No mobile-specific variants. Responsive view toggles in the editor toolbar are preview-only. Variant changes apply to all viewport sizes; mobile-specific or responsive-only modifications are not supported.
Image upload constraints. Image uploads in the Style Editor support JPG, PNG, GIF, and SVG only, with a 5 MB maximum file size. WEBP is not supported. To use larger or unsupported files, host them externally and use the Image URL field.
Move within zones and sections only. Parent sections can be reordered within their zone (Header, Main, or Footer) but cannot move between zones. Child elements can be reordered within their parent section only, not moved to a different section.
No direct drag-and-drop in the preview editor. All reordering happens through the Move Element panel. The preview editor updates on drop, not during the drag, so you will not see live re-rendering as you move an element.
Section name quality depends on the theme. Online Store 2.0 sections with schema names show friendly labels (Image Banner, Featured Collection, Rich Text). Sections without schema names fall back to generic labels like Section 4 or Section 5. Older Shopify 1.0 themes may show less descriptive labels overall.
Insert Element is code-based. There is no prebuilt element picker (text block, button, image, etc.). Merchants must write the HTML, CSS, or JavaScript directly.
CSS selector fragility. Visual Editor generates CSS selectors to identify elements at runtime. If you change your theme, those selectors may break. Visual Editor uses fallback strategies (element ID, then data attributes, then class path, then nth-child position). If all fallbacks fail for an element, the change for that element may not render and the storefront continues to load normally.
No AI-generated visual changes. Visual Editor does not generate or suggest changes automatically.