How to Edit Your Shopify Theme with Claude Code

Claude Code can now edit your entire Shopify theme from a chat window. You describe the change, it writes the Liquid, CSS and JavaScript, and a couple of minutes later the change shows up in your theme editor as a normal, editable section. No developer, no apps, no coding knowledge. In 15 years of scaling ecommerce stores I have not seen anything hand this much control to non-technical founders.

This guide walks through the exact setup, from installing the tools to pushing a finished theme live. It is the written version of the video above, so you can follow along step by step.

What you need before you start

• A Claude Pro plan. Claude Code is only included on paid plans, and it is the feature that does the editing.
• Visual Studio Code (free). This is the editor Claude Code runs inside, and where your theme files live while you work on them.
• Shopify admin access to the store you want to edit.
• About 30 minutes for the first setup. After that, individual edits take one to three minutes each.

Step 1: Set up Claude Code in VS Code

1. Install Visual Studio Code and open it.
2. Go to File, New, Open Folder and create an empty folder called something like "Shopify editor". This folder is where your theme copy will live.
3. Click the Extensions icon, search for Claude, and install the extension published by Anthropic.
4. Click the Claude button in the top right. A chat panel opens. This is Claude Code, running inside your editor.

Step 2: Connect Claude to your Shopify store

Claude talks to Shopify through the Shopify CLI (command line interface). You do not need to understand it; you just need Claude to install it.

1. In the Claude chat, type: "Install the Shopify CLI so you can talk to my Shopify store." Approve the commands it proposes. If it asks how to install, choose the npm version. The Homebrew version has failed for me.
2. Next, type: "Connect to my Shopify store and list the themes." Paste your store's .myshopify.com address when asked.
3. Claude cannot log in on your behalf, so it will give you a login command. Open Terminal, New Terminal, paste the command, press Enter, and complete the login in the browser window that opens.
4. Back in the chat, type "authenticated". Claude will list every theme on your store.

Step 3: Duplicate your live theme (never edit live)

Ask Claude: "Duplicate the live theme and work only on the copy." It creates the duplicate on Shopify and pulls the files into your folder. Check Online Store, Themes and you will see the copy sitting there.

This matters. If an edit goes wrong on your live theme, your whole store breaks. Working on a copy means the worst case is a theme you delete and start again.

Step 4: Edit an existing product page

Now the fun part. Describe what you want in plain English. The prompt I used in the video was:

In the default product template, underneath the add to cart button, add three icons with text that I can edit in the theme editor: one for shipping, one for guarantees and one for returns.

Claude will ask permission to edit files. Choose "allow all edits in this session" so you are not approving every line. About two minutes later it reports what it built: a delivery truck, a shield and refresh arrows, each with editable text, inside a new block in the theme editor.

Refresh the theme editor and the block is there, movable and editable like any built-in block. That is the difference from Shopify Sidekick. Sidekick generates single sections. Claude Code builds sections, templates and whole themes.

Step 5: Build a whole product template from a framework

Instead of adding one block at a time, give Claude a framework and let it build the template. I uploaded the Academy's Perfect Product Page framework (you can download it below) and asked:

Create a brand new product template in this theme using the attached framework.

A few minutes later there was a new template with a hero, trust badges, benefits grid, feature highlight, social proof and FAQ, every one of them editable in the theme editor. Treat it as a strong starting point, then switch sections off, reorder them and change the copy to suit your product.

Want a dropdown for variants instead of pills? Ask: "Add an option to the variant section to show variants as a dropdown menu." Two and a half minutes later it is a setting in the editor.

Step 6: Copy a design element from any store

This is my favourite trick. Find a store that converts well, screenshot the element you like (I used a "Top seller" badge on a swatch from True Classic) and paste the screenshot into Claude Code with:

Using the attached reference image, add a similar badge to the swatches on my product page. I need to be able to change the icon, text and colour, but the styling should match the reference.

Claude recreates it as a theme block. In the editor, add a "swatch label" block, type the option value it should attach to, and the badge appears on that swatch.

Step 7: Make sitewide theme changes

Anything the template editor cannot reach, Claude Code can. I asked for a choice of cart icons (bag, basket, trolley), an animation when an item is added, and control over the cart-count badge colour. It added all of it under Header, Utilities in the theme settings.

One lesson from that request: the animation did not come through. Give Claude one or two instructions at a time, not five. Shorter prompts get more reliable results.

Step 8: Push it live

Your edits are saved in the theme files as you go. When the copy looks right, go to Online Store, Themes and click Publish on the edited copy. The old live theme drops into your unpublished list, so you can roll back in one click.

For the next round of edits, duplicate the new live theme again and repeat. Always edit the copy, never the live one.

Usage limits and practical tips

• Heavy editing sessions can hit Claude's usage limit. It resets after a break, so plan big builds in chunks.
• Be specific about where a change goes ("under the add to cart button in the default product template").
• Ask Claude to make every new element editable in the theme editor. That way you never have to come back to the code to change a word.
• Test on mobile before publishing. Claude builds what you ask, not necessarily what looks right on a phone.

If you would rather have this installed with you, our Elite Team sets up Claude Code and the theme workflow inside members' stores as part of EcomOS.