> ## Documentation Index
> Fetch the complete documentation index at: https://docs.abconvert.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Store Editor

> Change what shoppers see on any page of your store, through your AI or by hand, without touching theme code.

The store editor opens a page of your store in a new tab and changes what one [test group](https://docs.abconvert.io/experiments/overview.md) sees on it: words, images, links, layout. Open it with **Edit in store**. It builds the variants of a [Visual Editor test](https://docs.abconvert.io/experiments/visual-editor-test.md), a [combined test](https://docs.abconvert.io/experiments/combined-test.md) or a [personalization](https://docs.abconvert.io/personalization/overview.md).

Works on every ABConvert plan.

![A store home page with the hero heading selected, the element card open beside it showing the Text, Style, Arrange and Applies on sections, and the editor bar along the bottom](https://mintcdn.com/abconvert/trpfykRuGglhjK82/images/visual-editor-bar.png?fit=max\&auto=format\&n=trpfykRuGglhjK82\&q=85\&s=fe25bb2f5d4baddad2d5c1ce977c1a00)

The editor on a store page.

For what to test and how to set the test up, see [Getting Started](https://docs.abconvert.io/experiments/visual-editor-test.md). This page is about making the changes.

## How it works

The editor runs on your real store page, so theme scripts, menus and fonts behave as they do for a shopper. Every change is saved to the draft. Shoppers see nothing until you launch the test.

There are two ways to make a change:

* [Edit with your AI](#edit-with-your-ai): describe the change to Claude, ChatGPT, Codex, Claude Code or Cursor, and watch it land on the page.
* [Edit by hand](#edit-by-hand): click an element on the page and change it.

You and your AI edit the same page. Change what your AI did, undo it, or let it continue what you started.

## Edit with your AI

![Claude on the left, asked to change the hero headline to 'Ride the first line.' and replying that it did, and its built-in browser on the right showing the store hero with that headline](https://mintcdn.com/abconvert/trpfykRuGglhjK82/images/visual-editor-ai-loop.png?fit=max\&auto=format\&n=trpfykRuGglhjK82\&q=85\&s=e598936f328589ac306ab349eafc3f23)

Ask in the chat, see it on your store.

Anything you can do in the editor, your AI can do: change words, images and links, move and duplicate blocks, hide elements, set where a change applies.

For a change the card cannot express, it writes the test group's [custom CSS and JavaScript](https://docs.abconvert.io/experiments/custom-code.md).

It checks the result on desktop and mobile and tells you what shoppers will see.

### Step by step

**1. Connect your AI**

Your AI needs the ABConvert MCP connection, once per store. Follow the [MCP quickstart](https://docs.abconvert.io/mcp/quickstart.md) for your client, or start from the **Edit with your AI** panel in the test wizard.

We recommend letting your AI open the store in its own browser, beside the chat, so you see each change as it lands. Your AI can also send you a link that opens the editor in your own browser.

> [accordion] Turn on the browser in your AI
>
> * [Claude](https://support.claude.com/en/articles/16607400-use-the-built-in-browser-in-claude-cowork)
> * [Claude Code desktop app](https://code.claude.com/docs/en/desktop#browse-external-sites)
> * [Claude Code in the terminal or VS Code](https://code.claude.com/docs/en/chrome), through Chrome
> * [ChatGPT and Codex](https://learn.chatgpt.com/docs/browser)

**2. Hand the prompt to your AI**

The test wizard's **Edit with your AI** panel opens the prompt in your AI, or copies it for any other client. Your AI then opens the store page for this test in its browser, beside the chat.

![The Edit with your AI panel: step 1 Connect Claude, ChatGPT, or Codex, step 2 Hand the prompt to your AI with an Open in Claude button, step 3 Launch the test when it looks right](https://mintcdn.com/abconvert/trpfykRuGglhjK82/images/visual-editor-edit-with-your-ai.png?fit=max\&auto=format\&n=trpfykRuGglhjK82\&q=85\&s=49dc354731896c2b7f016891cf663d79)

**3. Describe the change**

Say what you want in plain words. Each change lands on the page as it is made, and your AI tells you what shoppers will see.

> "On the home page, change the hero headline to 'Ride the first line.' and the call to action to 'Shop snowboards'."

> "On the product page, move the customer reviews above the size chart."

> "In the cart drawer, add an upsell block that offers snowboard wax with an Add button."

> "In the cart drawer, add a free shipping progress bar. Free shipping starts at \$200."

**4. Comment where you want something different**

In **Comment** mode, click the element and write what you want. Add as many comments as you like.

![The hero subline outlined with a numbered pin at its corner, and a comment box under it reading 'make it shorter and more punchy' with a check button](https://mintcdn.com/abconvert/trpfykRuGglhjK82/images/visual-editor-comment-add.png?fit=max\&auto=format\&n=trpfykRuGglhjK82\&q=85\&s=33cb1030405aace9a584db1e1c2649f9)

**5. Send the comments**

Send them together, with a note for the whole set if you like: "Make it creative, and eye catching".

![The comment listed under 'Your AI gets this comment', a note reading 'Make it creative, and eye catching', and a Send to AI button](https://mintcdn.com/abconvert/trpfykRuGglhjK82/images/visual-editor-comment-send.png?fit=max\&auto=format\&n=trpfykRuGglhjK82\&q=85\&s=3e4f434e23e0dcb12092dc988e757676)

**6. Hand them to your AI**

Sending does not start your AI by itself. Copy the prompt the editor offers and paste it into your AI to pick up your comments.

![The editor reading Waiting for your AI, 1 comment, with the hint Copied. Paste it into your AI, and a Copy prompt button](https://mintcdn.com/abconvert/trpfykRuGglhjK82/images/visual-editor-comment-copy.png?fit=max\&auto=format\&n=trpfykRuGglhjK82\&q=85\&s=583eaac1780fe20b841b864c81fb125b)

Your AI reads the comments and gets to work. An AI that was already watching the page picks them up without the prompt.

![Claude on the left with the comments prompt sent and a tool call running, and its browser on the right showing the pin on the hero subline and the editor saying Your AI is on it, 0 of 1](https://mintcdn.com/abconvert/trpfykRuGglhjK82/images/visual-editor-comment-working.png?fit=max\&auto=format\&n=trpfykRuGglhjK82\&q=85\&s=670ccb49bb60d33ffdf8039ceca1d9b8)

**7. Check the result**

Your AI applies each comment as written and asks only when one is ambiguous. When it is done, each comment is marked **Done**, or **Not done** with the reason.

![Claude on the left summarizing the comment it handled, and its browser on the right with the changed subline 'Fresh powder waits for no one. Gear up and go first.' outlined on the page](https://mintcdn.com/abconvert/trpfykRuGglhjK82/images/visual-editor-comment-result.png?fit=max\&auto=format\&n=trpfykRuGglhjK82\&q=85\&s=b0392ab2fb17304f30a61eeebdb64336)

**8. Preview and launch**

[Preview the test](https://docs.abconvert.io/experiments/lifecycle.md#preview-before-you-launch) on your storefront. When it looks right, launch it from the test page, or tell your AI to launch it. Launching always needs your yes.

On a test, nothing reaches shoppers until you launch. On an active [personalization](https://docs.abconvert.io/personalization/overview.md), each change reaches shoppers at once, so your AI asks before it edits.

### Bring your design and analytics tools

Your AI can hold other connections next to ABConvert. It reads a design or a heatmap from one tool and makes the change on your store page through ABConvert.

![Your AI (Claude, ChatGPT, Codex, Claude Code, Cursor) connected to three MCP servers: ABConvert, which edits your store page in the browser, Figma, which reads a design file, and Clarity or PostHog, which reads a heatmap](https://mintcdn.com/abconvert/trpfykRuGglhjK82/images/visual-editor-mcp-connections.svg?fit=max\&auto=format\&n=trpfykRuGglhjK82\&q=85\&s=b5f57002737565395d8c959d4597975f)

* [Figma](https://help.figma.com/hc/en-us/articles/35281350665623), to build a variant from a design.
* [Microsoft Clarity](https://github.com/microsoft/clarity-mcp-server) or [PostHog](https://posthog.com/docs/model-context-protocol), to read scroll depth and clicks before deciding what to move.

Each tool's own guide covers its setup. ABConvert never sees that data: your AI sends only the change.

## Edit by hand

### Open the editor

**Edit in store** on a test group opens your store in a new browser tab, with the editor on top of it.

![The store home page with the editor bar along the bottom, in Navigate mode, nothing selected](https://mintcdn.com/abconvert/kjOubvg1DSPkKitq/images/visual-editor-open.png?fit=max\&auto=format\&n=kjOubvg1DSPkKitq\&q=85\&s=1dfe440ec4ec140f216e29326b925d31)

Three modes: **Navigate** browses the store as a shopper would, **Edit** changes an element, **Comment** leaves a note on one for your AI.

![The mode switch on the editor bar, with Navigate selected, then Edit, then Comment with an AI tag](https://mintcdn.com/abconvert/kjOubvg1DSPkKitq/images/visual-editor-modes.png?fit=max\&auto=format\&n=kjOubvg1DSPkKitq\&q=85\&s=e59d51204212510392c7a6be397d5e8a)

### Change an element

Click an element in **Edit** mode to open its card. What you can change depends on the element:

| Element | What you can change |
| - | - |
| Text | The words. |
| Image | The file. Upload a new one, and it goes to your Shopify Files. |
| Link | The words and the address. |
| Any element | Its style, or its HTML. |

![The element card for the hero heading: the Text field reading Ride the first line, the Style rows, the Arrange row, the Applies on row and the Apply button](https://mintcdn.com/abconvert/trpfykRuGglhjK82/images/visual-editor-edit-text.png?fit=max\&auto=format\&n=trpfykRuGglhjK82\&q=85\&s=ae6cdb15e3e65eb713792cecf552922f)

Changing a heading's text.

**Custom code** holds the test group's CSS and JavaScript, applied on every page the test runs on. See [custom code](https://docs.abconvert.io/experiments/custom-code.md).

![The Custom code panel with the CSS tab selected, two CSS rules typed, and Preview and Apply buttons](https://mintcdn.com/abconvert/trpfykRuGglhjK82/images/visual-editor-custom-css.png?fit=max\&auto=format\&n=trpfykRuGglhjK82\&q=85\&s=0b59de9cbb4fdb61678e139a9f96ac5f)

> [!TIP]
>
> * When you swap an image, the card asks whether to replace it in its other places too, such as the thumbnail and the zoom slide.
> * Menus and some sections have a desktop copy and a phone copy, and a change to one does not change the other. Check the phone copy too.

### Change the layout

Select the right element first. Clicked the picture but want to move the whole product card? Pick the card from the list at the top.

![The element list open at the top of the card, from the section down to the picture, with the product card highlighted as 1 of 4 and the whole card outlined on the page](https://mintcdn.com/abconvert/kjOubvg1DSPkKitq/images/visual-editor-select-element.png?fit=max\&auto=format\&n=kjOubvg1DSPkKitq\&q=85\&s=7fd789da13eaae4d803450cc2747cdf4)

Picking the product card around the picture.

The **Arrange** row holds the layout actions:

![The Arrange row: Move left, Move right, Duplicate, Insert HTML, Hide, and the hint Move not working as expected? Select the block around it](https://mintcdn.com/abconvert/trpfykRuGglhjK82/images/visual-editor-arrange.png?fit=max\&auto=format\&n=trpfykRuGglhjK82\&q=85\&s=a10210848503b3802a869c7486353607)

* **Move** shifts the element among its neighbours.
* **Duplicate** adds a copy next to the element, so you can change its words and image. Use it for a new product card, gallery slide or menu link.
* **Insert HTML** adds new markup before or after the element.
* **Hide** removes the element from the page for this test group. Nothing is deleted in Shopify.

When a move does not do what you expect, you probably selected a part of a block rather than the block itself. **Select the block around it** fixes that.

An element you changed inside a duplicated or inserted block (the copy's picture, its words) is saved with that block.

### Where a change applies

Every change has a scope.

![The Applies on rows of a change: Pages set to Every page, Devices set to Desktop, Languages set to All languages, with Cancel and Apply](https://mintcdn.com/abconvert/kjOubvg1DSPkKitq/images/visual-editor-scope.png?fit=max\&auto=format\&n=kjOubvg1DSPkKitq\&q=85\&s=ac68bcf0add31908a603bf259fddf2e2)

* **Pages.** This page, every page the test runs on, or specific pages. An announcement bar change belongs on every page. A product description change belongs on that product's page.
* **Devices.** All devices, desktop only or mobile only.
* **Languages.** All languages, or only the store languages you pick.

### Undo, revert and versions

* **Undo** takes back the latest edit in the test group, whoever made it, you or your AI. **Redo** puts it back.
* **Revert** on a change in the Changes list drops that one change, whenever it was made.

![The editor bar with Undo and Redo, Custom code, Changes 2, Exit and Review and launch, and the Changes panel open above it listing two text changes, each with a Revert button](https://mintcdn.com/abconvert/trpfykRuGglhjK82/images/visual-editor-history.png?fit=max\&auto=format\&n=trpfykRuGglhjK82\&q=85\&s=e4d30c4b5ad510e5d827f711a922d01c)

The Changes panel.

**Save version** keeps the current state of the test group under a name. **Restore version** replaces the current state with a saved one, and that cannot be undone. If you may want the current state back, save it as a version first.

![The version list with Version 2 marked Current, Version 1 with its save time, and a Back button](https://mintcdn.com/abconvert/kjOubvg1DSPkKitq/images/visual-editor-versions.png?fit=max\&auto=format\&n=kjOubvg1DSPkKitq\&q=85\&s=8396b49175948af415806f72bd3b6a9c)

Saved versions.

### What can and cannot be edited

Two things cannot be edited. Use [custom code](https://docs.abconvert.io/experiments/custom-code.md) for them:

* Content inside a third-party widget (an iframe or a shadow DOM), such as a reviews app or a chat bubble.
* Text that changes on its own: a countdown, a ticker, a live price.

The cart drawer and sections that load late can be edited. A change there is put back each time the theme redraws them.

![The cart drawer open, with a free shipping progress bar at the top reading 'Just \$75.05 more and shipping is on us. Keep carving!' above the line item](https://mintcdn.com/abconvert/trpfykRuGglhjK82/images/visual-editor-cart-drawer.png?fit=max\&auto=format\&n=trpfykRuGglhjK82\&q=85\&s=047bb27bbcbe711f282758b414f1d5fa)

A free shipping bar added to the cart drawer.

## Common mistakes

* **Checking only the desktop view.** Themes often render a separate phone copy of a menu or a section, and a change to the desktop copy does not reach it. Check the phone view before you launch, and change the phone copy too.
* **Moving the wrong element.** A move acts on the selected element. Clicked the picture but want the product card to move? Pick the card from the list at the top first.
* **Restoring without saving first.** Restoring replaces the current state and cannot be undone. Saved versions stay in the list, so save the current state as a version first and you can come back to it.
* **Expecting your AI to pick up comments by itself.** Sending comments does not start your AI unless it is already watching the page. Paste the prompt the editor offers into your AI.

## FAQ

> [accordion] Can my AI and I edit at the same time?
>
> Yes. Your AI's changes are marked Agent in the Changes list. Change them, undo them, or add your own.

> [accordion] What is 'Edit in app'?
>
> The [in-app editor](https://docs.abconvert.io/experiments/in-app-editor.md), which shows your store inside the ABConvert admin instead of a new tab. Both editors write the same changes to the test, so you can switch between them.

> [accordion] Why did my change not land?
>
> The element may be inside a widget (an iframe or a shadow DOM), which cannot be edited, or in a section that loads late, where the change is applied as soon as the section appears. The editor reports which changes found no element.

> [accordion] Which AI tools work with the editor?
>
> Any MCP client. Claude (desktop and web), ChatGPT, Codex, Claude Code and Cursor have one-click setup from the wizard's "Edit with your AI" panel. See the [MCP quickstart](https://docs.abconvert.io/mcp/quickstart.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.