With the advent of Claude Code and Shopify's recent AI toolkit, non-technical business owners can now create custom, fully editable Shopify themes and pages.
What follows is a generalized process on how I go about this. This is likely to change as time goes on and new tools are introduced. But for now, I present to you my workflow.
This assumes a base level of proficiency with Claude Code and AI-powered Integrated Development Environments (IDEs) like Google Antigravity or Visual Studio Code. If any part is unclear, feel free to look up that specific step, and plenty of resources will show you how to overcome that particular hurdle.
Tip: Copy and paste this guide into Claude Code, and ask it to walk you through it step by step. If you have any questions or feel stuck, ask it what to do next, and it will tell you. Might as well, right? :)
Overview of the Process
You are responsible for:
- The product
- The brand
- The design direction
Claude Code is responsible for:
- Writing and editing the code
- Translating your descriptions into working UI
- Iterating quickly based on feedback
Shopify handles:
- Checkout
- Payments
- Cart logic
- Hosting and performance
What You're Actually Building
Starting from a Shopify theme already solves the hard parts (cart, checkout, responsiveness). You're taking that foundation and replacing the front end: layout, typography, spacing, and interaction. We'll be building on top of Shopify's Dawn theme.
Step 1: Set the Foundation
Before involving Claude Code, set up the basics:
- Create a Shopify store
- Add your product(s)
- Fill in pricing, images, and descriptions
- Configure core settings (shipping, currency, etc.)
- Set up a folder on your local machine that you will work out of
Next, install the necessary tools:
- Google Antigravity or Visual Studio Code (for running the build)
- Claude Code App inside Antigravity or Visual Studio Code
- Node.js (for running Shopify tooling)
- Shopify CLI (to interact with your theme)
- Git + GitHub (for version control)
- Claude Code (your development partner)
If you don't know how to install any of these, ask Claude how to. Once that's done, you should be inside Claude Code in your IDE. Tell it to pull a base theme (Shopify's Dawn theme) onto your local machine. This becomes your working project.
Step 2: Define the Direction
Before asking Claude Code to generate anything, define what you want.
At minimum:
- The product or store niche
- Brand tone (e.g., clinical, minimal, editorial, bold)
- Color direction (even rough is fine)
- Typography feel (not necessarily exact fonts)
- Product positioning (premium, mass, niche, etc.)
Importantly:
- Collect 2–3 reference sites you like. These are far more useful than abstract descriptions. Save screenshots of them in a folder on your computer, and point Claude Code to it.
- Write a short description of your brand.
- List the pages you need (Product page, homepage, FAQ, about, etc.)
Step 3: Create Two Documents
Tell Claude Code to create you a Brand Overview Document (BOD) based on the information you provided it. After, tell it to build you a Project Reference File. The two documents are described below.
1. The Brand Overview Document
This is the full blueprint. It should cover:
- Your store name, what you sell, to whom, etc.
- Brand voice (what it sounds like, what it avoids)
- Design system (colors, spacing, typography rules)
- Layouts for key pages
- Mobile behavior
Claude Code will do this for you — just tell it to build it with the info you've given it.
2. The Project Reference File
A shorter document that includes:
- Project summary
- File structure conventions
- Naming patterns
- Key design tokens (colors, fonts)
- Any consistent behaviors
Once again, tell Claude Code to build this for you. This gives Claude Code continuity between sessions. Save these documents within the folder you are operating out of on your local machine.
Step 4: Start Building (Conversation Loop)
Once the groundwork is in place, the workflow becomes simple:
- Describe what you want
- Claude Code proposes an approach
- You adjust or approve
- It writes the code
- You preview and give feedback
- Repeat
This loop is the entire build process.
This often looks like this for me. With my browser open to the Shopify theme editor, I say:
"I like the home page hero section on the reference website screenshot I have in the Reference>Website Images folder. Build me a home page hero like this one."
Claude will build one.
"You didn't get the text placement right. Also the corners of the hero should be rounded, like the reference image. Build it for me."
Claude will try to fix it.
"You're close. Move the text farther right. And make the section like 20% bigger in terms of height…"
Claude will try to fix it.
"Okay, you got it. The next section should be a trust bar with…"
Et cetera, et cetera.
Step 5: Build One Section at a Time
Do not try to generate the entire site in one pass. If you do, you usually get a mediocre result.
Work linearly:
- Hero
- Product details
- Supporting sections
- Reviews
- FAQ
For each section: build it, review it, adjust it, lock it in.
Step 6: Use Version Control Properly
After completing meaningful chunks of work, save them.
A simple rule:
- If something works, commit it
- If you're about to try something risky, commit first
Step 7: Keep Code and Editor in Sync
There are two places changes happen: code (handled by Claude Code) and the Shopify editor (images, content, settings). These can drift out of sync.
- When changing structure → work in code
- When changing content → use the editor
- Sync regularly so nothing gets overwritten
You don't need to overthink it. Just be aware that both exist.
Step 8: Build the Remaining Pages
Same process as above.
Step 9: Refine on Real Devices
Open the site on your phone and go through it slowly.
Look for:
- Text that's hard to read
- Buttons that are awkward to tap
- Spacing that feels tight or excessive
- Sections that stack poorly
Describe issues directly and fix them. Mobile is not a secondary view — it's often the primary one.
Step 10: UX Testing
Before publishing:
- Test add-to-cart and checkout
- Click every navigation link
- Check product images
- Verify pricing
- Add policies (refund, privacy, terms)
- Set page titles and descriptions
Step 11: Publish
Once everything is stable: push your final changes, then publish the theme in Shopify.
That's it.
You don't need to learn Shopify development in depth.
You need to:
- Know what you want
- Communicate it clearly
- Refine it through iteration
This is my current process. Likely, it will continue to become easier and easier, and the results will become better and better as the underlying tech improves.