Step-by-step guide to connecting Claude Code with Shopify CLI. Edit your theme locally, preview changes live, and push to production safely — without breaking anything
If you own a Shopify store, you've probably felt the frustration. You have a clear vision of how you want your store to look. You know exactly what you want to change. But every time you try to edit your theme, you're either paying a developer hundreds of dollars, or you're clicking around in the theme editor hoping nothing breaks.
Enjoying this? There's more where this came from.
Practical guides, new tools, and AI & digital tips — straight to your inbox, once a week. Never miss a thing.
What if you could describe what you want in plain language — and watch it happen live on your screen before it ever goes live to customers?
That's exactly what connecting Claude Code to your Shopify store lets you do. And most people have no idea this is even possible.
Claude Code is an AI coding assistant made by Anthropic (the same company behind Claude AI). Unlike regular AI chatbots where you describe a problem and get text back, Claude Code actually works — it reads your files, makes changes, and shows you results in real time.
When connected to your Shopify theme, Claude Code becomes something powerful: a full-time developer that works at your speed, in your language, at any hour.
Instead of opening a support ticket or hiring a freelancer, you open Claude Code and say:
And it happens. Live. On your screen. Before anything touches your real store.
To make this work, you need one tool: Shopify CLI (Command Line Interface).
Shopify CLI is the official command-line tool built and maintained by Shopify themselves. This isn't a hack, a workaround, or a third-party plugin — it's how Shopify's own developers build and test themes.
Here's what it gives you:
A local development environment. You pull your entire theme down to your computer. Every file — sections, templates, assets, snippets — lives locally on your machine.
Live preview. When you run shopify theme dev, a local server starts at http://127.0.0.1:9292. You can open your store in the browser and see every change the moment it's saved — no refresh needed.
Shareable preview links. Before anything goes live, you can share a preview URL with a colleague, client, or teammate. They see the updated version. Your real customers see nothing until you're ready.
Full backend stays intact. Payments, inventory, apps, subscriptions — all of it keeps running normally. You're working on the front-end layer (how things look) while Shopify handles everything behind the scenes.
Shopify CLI requires Node.js. Download it from nodejs.org and install the LTS version.
To verify:
node --versionOpen your terminal and run:
npm install -g @shopify/cliVerify the installation:
shopify versionYou should see something like 3.91.0 — that means it worked.
shopify auth loginThis will give you a verification code and a link. Open the link in your browser, enter the code, and you're connected to your Shopify account.
mkdir my-shopify-theme
cd my-shopify-themeshopify theme pull --store your-store.myshopify.com --theme THEME_IDTo find your theme ID, first run:
shopify theme list --store your-store.myshopify.comThis shows all your themes. The one marked [live] is your active store. Copy the ID number.
After pulling, your folder will contain:
| Folder | Contents |
|---|---|
/assets | CSS, JavaScript, images |
/sections | Modular sections of your pages |
/templates | Page templates (product, collection, cart) |
/snippets | Reusable code blocks |
/layout | Global layout files |
/config | Theme settings |
/locales | Translation files |
shopify theme dev --store your-store.myshopify.comOpen http://127.0.0.1:9292 in your browser. You're now seeing a live preview of your theme.
Now open Claude Code in the my-shopify-theme folder. Claude can read every file in the project.
You can now say things like:
sections/header.liquid and move the navigation menu below the logo"assets/base.css and change the primary button color to #2563EB"templates/product.json and add a customer review section below the product description"Every change Claude makes will instantly appear in your browser preview. Nothing goes to your live store until you decide to push it.
When you're happy with everything you see in the preview, you push the changes live:
shopify theme push --store your-store.myshopify.com --theme THEME_IDThat's it. Your changes are live.
If something looks wrong, you can always pull the latest version again and start fresh — or keep an unpublished copy of your old theme as a backup (which Shopify lets you do easily in the admin).
For those running more sophisticated operations, the real power comes when you combine Shopify CLI with AI marketing agents.
Instead of manually asking Claude to make changes, you can set up agents that:
For example, an agent connected to your Google Analytics could detect that mobile users are dropping off at the cart page, then automatically create and test an improved mobile cart layout — all without you lifting a finger.
This is the future of ecommerce development: stores that improve themselves.
Morning: You notice mobile conversions dropped last week.
You open Claude Code, point it at your Shopify theme folder, and say: "Look at the mobile version of the product page template and tell me if there are any obvious UX issues."
Claude reads the Liquid template files and identifies that the Add to Cart button is positioned below the fold on common mobile screen sizes, and that the product images take too long to load because they're not lazy-loaded.
You say: "Fix both of those issues."
Claude makes the changes. You open 127.0.0.1:9292 on your phone and see the updated page instantly. The button is now visible above the fold. The images load faster.
You send the preview link to your business partner, get a thumbs up.
shopify theme push --store your-store.myshopify.com --theme THEME_IDDone. Total time: 20 minutes. No developer. No waiting.
For store owners thinking about the bigger picture, this setup is one piece of a larger AI-powered ecommerce operation:
Layer 1 — Theme Development: Claude Code + Shopify CLI for front-end changes. This is where you start.
Layer 2 — Content Generation: AI writing product descriptions, collection page copy, blog posts, and email sequences. Connected directly to your Shopify admin via the API.
Layer 3 — Performance Analysis: AI agents monitoring Google Analytics and conversion data to automatically flag opportunities and issues.
Layer 4 — Autonomous Improvement: Agents that not only identify issues but fix them — writing code, testing in preview, and pushing improvements on a schedule.
We searched YouTube extensively when exploring this workflow. The results were surprising — almost nothing. A few scattered videos about Shopify CLI for developers, but almost nothing that connects it to AI tools like Claude Code in a way that's accessible to store owners.
This is a genuine gap. The tools exist, they work, and they're officially supported. But the knowledge of how to connect them hasn't spread yet.
Store owners who figure this out now will have a meaningful advantage.
Most of your competitors are still doing one of two things: editing themes directly in the Shopify admin — risky, no preview, easy to accidentally break things in front of customers. Or paying developers every time they want a change — slow turnarounds, high costs, constant dependency.
Store owners who learn this workflow end up in a genuinely different position. They can iterate on ideas in an afternoon. They can test a homepage layout change before spending money on ads. They can respond to conversion data within hours instead of days.
In ecommerce, speed of iteration is one of the few sustainable competitive advantages. This workflow gives you that edge.
No. You'll need to follow the setup steps in the terminal, but none of them require understanding code. Once it's running, you interact with Claude in plain English (or any language you prefer).
No. Your live store runs independently. The local environment is completely separate. Changes only reach your live store when you deliberately run the push command.
Before pulling your theme, always duplicate it in the Shopify admin (Online Store > Themes > Actions > Duplicate). That gives you a clean backup you can restore in seconds.
Yes. Shopify CLI works with all Shopify plans. You don't need Shopify Plus or any special tier.
Yes. Apps live on Shopify's backend. Your local development environment just handles the theme (how things look and feel). Apps, payment processing, inventory management — all untouched.
Push smaller, focused changes rather than accumulating weeks of edits. This makes it easier to identify issues and roll back if needed. Small and frequent beats large and rare every time.
You don't need to be a developer. You need to be willing to spend an afternoon setting this up — and then you'll have capabilities that most store owners would pay thousands to access.
At JOYO Digital we help store owners and businesses implement AI tools practically. If you want to implement this workflow on your store — or explore what AI can do for your ecommerce operation — talk to us.
Every week we send practical AI tips, new tools, and strategies that work — straight to your inbox, no spam.
At JOYO Digital we help businesses grow with AI and digital: