Blog · · 7 min
Claude Code on a Shopify store: what it can touch
Claude Code edits the theme you pull to disk (sections, snippets, JSON templates) and pushes it back with the Shopify CLI. It never touches checkout.
By uxgen
Claude Code works on a Shopify store the way it works on any repository: the theme has to be on disk. Pull it with the Shopify CLI, open the folder, and the agent can read and write every section, snippet, JSON template, asset and locale file, then push the result to a theme you preview before publishing. What it cannot reach is checkout, which Shopify renders, and what it gets wrong on its own is the set of sections that carry the sale.
The same workflow applies to Cursor, Codex CLI or any agent that edits files. The commands below are Claude Code's, because that is the query; swap the client and nothing else changes.
What a Shopify theme is, for an agent
A theme is a folder. sections/ holds the section files, each ending in a {% schema %} tag that declares its settings, its blocks and, if it has presets, its availability in the theme editor's Add section list. templates/ holds JSON files that list which sections a page renders and in what order; a JSON template can carry up to 25 sections and a section up to 50 blocks. snippets/ holds partials, assets/ the CSS and JS, config/settings_data.json the merchant's current choices.
An agent with the folder open can therefore add a section, wire it into a template, and give it settings a merchant can edit later without code. That is the entire lever, and it is a large one.
The setup, step by step
- Install the Shopify CLI and log in to the store:
shopify theme list --store your-store.myshopify.comconfirms access. - Pull the live theme into a folder:
shopify theme pull --store your-store.myshopify.com. Pick the theme you sell with, or a duplicate of it if you want a safety net. - Open Claude Code in that folder. Add the Dev MCP so the agent reads Shopify's docs instead of guessing Liquid filters:
claude mcp add --transport stdio shopify-dev-mcp -- npx -y @shopify/dev-mcp@latest. - Run a preview in a second terminal:
shopify theme dev. Every file the agent saves is visible at the preview URL within seconds. - Ask for one change at a time, named by file: add a
sections/quantity-tiers.liquidwith a preset and place it under the buy box intemplates/product.json. - Push to an unpublished theme first:
shopify theme push --unpublished. Publish from the admin once you have clicked through it on a phone.
Six steps, and the agent is doing step 5 only. The rest is the CLI, and it is worth keeping the CLI in your hands rather than letting the agent run push for you.
What Claude Code can and cannot change
| Surface | Can the agent edit it? | How |
|---|---|---|
| Sections, snippets, layout | Yes | Files in sections/, snippets/, layout/ |
| Page structure and section order | Yes | JSON files in templates/ and sections/*.json groups |
| Theme settings a merchant sees | Yes | The {% schema %} of each section, config/settings_schema.json |
| CSS and JavaScript | Yes | assets/ |
| Product data, prices, inventory | No, not from the theme | The admin, or an admin connector, see Connect Claude to Shopify |
| Checkout | No | Shopify renders it; only Plus merchants customise it, and not through the theme |
| Discounts | No, not from the theme | Created in the admin; the theme can only display them |
The row that surprises people is the last one. A quantity tier that reads 3 for $48 is two things: a section that shows the tiers, which the agent writes, and an automatic discount that makes the cart total match, which you create in the admin. An agent that writes only the first half ships a page whose cart contradicts its product page.
Where the agent goes wrong on its own
Ask Claude Code for a product page that converts with no more than that, and the output is a hero, a description and an add button. The sections that carry the basket — the bundle that points at one choice, the quantity tiers, the free-shipping line in the cart, the add-on after the add-to-cart, the guarantee, the comparison — are absent, not because the model cannot write them but because nothing in the prompt named them. The same absence, on a generic React store, is written up in Claude Code product page: prompt or components?.
Two fixes exist. Name every section yourself, with its rule (the tier shows the unit price; the bar shows the remaining amount in currency, never a percentage), and review each one. Or connect a sections MCP so the agent requests the block instead of drafting it: claude mcp add --transport http uxgen https://www.uxgen.ai/mcp, and the agent has 172 store sections and an audit that reads your current page and names the missing ones with the anchor each belongs at. On an existing store, the default is the improve path — nothing already on the page moves — described at /docs#improve.
Guardrails worth setting before the first prompt
- Work on a duplicate theme.
shopify theme push --unpublishedthen publish from the admin. An agent withpushaccess to the live theme is a single typo from a blank homepage. - One section per prompt. A request that names one file produces a diff you can read. A request for the whole product page produces a rewrite you cannot.
- Keep
presetsin every new section. Without a preset the section is invisible in the theme editor and the merchant can neither move nor remove it without code. - Ask for the arithmetic in the section. A tier without a unit price is decoration. The rule is in quantity breaks that raise average order value.
- Test at 390 px. The preview URL on a phone, not the desktop browser narrowed.
If you want to know which sections your store is missing before opening the terminal, the free audit at /audit reads the live page and returns the list with a score.
FAQ
Can Claude Code work on a Shopify store?
Yes, on the theme. Pull the theme to disk with shopify theme pull, open the folder in Claude Code, preview with shopify theme dev, and the agent can add and edit sections, snippets, JSON templates, assets and settings schemas. Push to an unpublished theme with shopify theme push --unpublished and publish from the admin.
Can Claude Code change my Shopify checkout?
No. Checkout is rendered by Shopify and is not part of the theme files an agent edits. Checkout customisation exists for Shopify Plus through checkout extensibility, and that is app code, not theme code.
Does Claude Code need the Shopify Dev MCP?
It helps. Without it the agent writes Liquid filters and GraphQL fields from memory, and some of those no longer exist. The Dev MCP runs locally, needs no login, and gives the agent Shopify's documentation search and schema introspection.
Why does the product page Claude Code writes not convert?
Because the prompt did not name the selling sections, so the agent shipped a hero, a description and a button. Bundle tiers, the free-shipping line, the add-on, the guarantee and the comparison have to be asked for by name, with their rules, or requested from a sections MCP that hands them over as HTML.