How to Build a Shopify Website with Claude

Most Shopify stores start the same way. You pick a theme from the theme store, change the colours, swap in your photos and hope nobody notices it's the same theme as the shop down the road. It works. It's just not yours.

That has changed. You can now design and build a complete Shopify theme with Claude — one shaped around your brand from the first line, rather than a template you bend into roughly the right shape afterwards. No monthly page-builder app, no compromise on layout because the theme won't do it.

We've just rebuilt our own site this way, which gave us a proper chance to show what we can do rather than describe it. Below is the whole process, from a homepage that accidentally looked like a bank to connecting GitHub so future changes take minutes.

Four tools, one direction of travel. Each stage hands something concrete to the next.

1. Do the thinking before you touch a tool

This is the step everyone skips, and it's the one that saves the most time.

Claude will happily start designing from a one-line prompt. You'll then spend hours nudging it towards what you actually wanted, because you never said what that was. Every detail you settle on before you start, is a change you don't have to make later.

Some of the areas we considered:

• Fonts. We ruled out Inter deliberately — it's the default look of AI-generated work. But we didn't name an alternative, so Claude picked its own: Space Grotesk for headings and Karla for body. Both fine, but we may well change them later. Do remember to specify your fonts up front.
• Colours. Choose brand colours to use through website, provide the hex codes.
• Pages. Think about what pages you would like, and their content. Home, Work, About, Blog, FAQ, Contact.
• Other Page content. Copy, images, links.
• Tone. How do you want the tone to feel throughout the website. 
• Target customers: Think about who will interact with your site
• Design:  What do you want the design to feel like
     
  The more you note down, the closer the first design will be.

2. Start in chat, finish with a brief

Open Claude and tell it about your business: your target customer, what you want someone to feel when they land, similar sites you like. Once you've given it enough, ask it to pull everything together.

Take everything we've discussed about my business and write it up as a brief for Claude Design. Ask me questions about any gaps. I want to get an almost perfect design first try, so all the detail matters.

You now have one document instead of a long conversation, and you won't have to repeat yourself at the next stage.

3. Claude Design: get the look right first

In Claude Design, choose UI mockups and set up a design system with your fonts, brand colours and any graphics you already have. Write a couple of lines on what you're after, paste the brief straight into the chat and send.

Claude will read it, then come back with a set of questions. Take your time over these — your answers shape how the design turns out.

From there you can work through each section, change the copy and ask for anything you want done differently. For the homepage we asked for several versions before committing, and ended up going through six variations.

Ask for feedback

After asking for some feedback and being told our favourite looked like a bank. We went in a different direction, and landed on something that reflects what we actually offer. When you have stared at something for long enough, you stop seeing the obvious.

We wanted to lead with the experience rather than the service. The flat colour versions read as a list of things we do. The photograph gives you a scene to enjoy first, and the service second. Experience matters to us. 

4. Claude Code: turn the design into a real theme

You will need a paid plan for this stage: LINK

Once the design is settled, hand it over to Claude Code to build. Be specific about how you want it built, and which platform it's for — every platform structures a theme differently. It's also worth setting permissions to auto, otherwise you'll be sat at your computer clicking approve every few seconds. The whole build took us around 45 minutes.

"Build this as a Shopify theme using Liquid, with proper sections and schema settings so everything is editable in the Shopify theme editor."

Three more things we learned:

• Keep the theme in its own folder. Not loose in documents, and not in a general Claude folder with everything else. Otherwise you risk deleting something the theme needs, or having work from another project pulled into it. We'd been building an About Us page for a client in the same folder, and it got roped into our theme. We spotted it and deleted it, but that's Claude time spent on nothing.
  
  
• Ask for a preview. When it says it's finished, ask it to run a local preview so you can click through every page yourself. When you site is live and you are making changes in Claude, if you don't ask, Claude will just publish the change straight away.
  
  
• Ask for mobile separately. Most people will view your site on a phone, so this one matters.
  

Responsive ≠ built for mobile. Responsive means it reshuffles to fit a small screen without breaking. Built for mobile means someone decided what a thumb should reach first. Ask for it explicitly: "Now go through every page and optimise properly for mobile — text sizes, image sizes......."

5. Getting it into Shopify: two routes

There are two ways to move the finished theme onto your Shopify account, and the right one depends on how much you'll touch it afterwards.

Both work. Pick based on how often you'll be back.

Method 1: Upload the zip

Find the compressed theme file in your project folder, then in Shopify go to Online Store → Themes → Add theme → Upload zip file. Done. Everything after that happens in the Shopify editor.

It's a perfectly good way to get your site up and running or just test it. The catch is that every future change means uploading the file again, and if something breaks, your only route back is an older zip you hopefully kept.

Method 2: GitHub (what we'd recommend)

GitHub stores your theme with a full history. Every change is recorded with a date and a note about what changed. You can compare any two points line by line, and undo things properly instead of hunting through your downloads folder.

If you've never used it, the setup sounds more intimidating than it is — Claude Code does the actual work.

Outline:

1. Sign up at github.com and create a repository. Private is fine.
2. Tell Claude Code you want to connect the theme to GitHub, and give it the repository address.
3. In Shopify: Online Store → Themes → Add theme → Connect from GitHub. Authorise, then pick the repository. 

Two things went wrong for us. Both are common, and both are worth knowing about before they happen.

The theme has to sit at the top of the repository

Shopify expects seven folders — assets, config, layout, locales, sections, snippets and templates — right at the top level. Ours were tucked inside a subfolder, so Shopify couldn't find the theme and the connection simply failed.

The difference between a working connection and a baffling error message.

We asked Claude Code to fix it and it moved everything up in one go. Git recognised all 69 files as renames rather than deletions, so the record of every file survived intact.

GitHub will not accept your password

 GitHub stopped accepting account passwords in 2021, although we we pasted our access token, we thought nothing had pasted. You need a personal access token instead — a long generated string that acts as a password for this one purpose.

remote: Invalid username or token. Password authentication
is not supported for Git operations.
fatal: Authentication failed

Create one at github.com → Settings → Developer settings → Personal access tokens. Two things to get right:

• Tick the top-level repo box. For a private repository the narrower public_repo option won't work, and the failure looks identical to the password error.
• Copy the token immediately. GitHub only shows it once.

The bit nobody warns you about. When you paste that token at the password prompt, nothing appears on screen. No dots, no asterisks, no cursor movement. It looks exactly like a frozen terminal. So people assume the paste failed, type their account password instead, and end up back at the same error — which is precisely what happened to us, with the correct token sitting on the clipboard the whole time. It did paste. Just press enter.

Give the token an expiry too — 90 days is sensible if you'll keep working on the site. There's a trap on the far side of that date: once it expires, your computer often keeps sending the dead token and stops asking you for a new one. You just get "authentication failed" forever, with no prompt to fix it. If that happens, tell Claude Code to clear the stored GitHub credential first, then save the new one.

These specifics are for Mac. On Windows it's the same idea with a different tool underneath — tell Claude Code you're on Windows and it'll handle it.

6. Living with two systems

The GitHub connection is two-way. Your changes go up to Shopify, but Shopify also writes back. Edit anything in the theme editor and a few minutes later a commit appears in your repository, authored by shopify[bot].

Changes travel in both directions, which is the whole point and also the whole risk.

Useful Tips - Best Practice

Pull before you edit. Ask Claude Code to pull at the start of a session and it'll bring down anything that changed in Shopify since you were last there. In practice we've found it often checks GitHub and pulls on its own before making changes — but it is best practice to use the term.

Never edit the same thing in both places at once. Page layouts are the dangerous ones. When you rearrange sections in the theme editor, Shopify rewrites that whole file — so if you've also changed it locally, merging the two is genuinely unpleasant. Pick a place for each job and stick to it.

Remember that pushing changes your site. If the connected theme is published, a push is a deployment. which will go to your live site. That's the point of the integration, but just make sure the change works as it should, testing before if needed.  

One thing to know: Duplicating a connected theme in Shopify doesn't give you a safe copy — the duplicate loses its link to GitHub and becomes a standalone theme. If you want somewhere safe to work, create a new branch in GitHub instead and connect that as a second theme. Both stay linked, and you can merge your changes across when you're happy. Claude code will need to pull files depending which theme you are working on. 

-We will add to this section when we do this ourselves 

7. If you want something more ambitious

Everything above assumes a fairly clean, straightforward site. If you're after something with more character, the single most useful thing you can do is show Claude examples.

Collect five or six sites you admire — competitors, shops in other sectors, work from Dribbble or Pinterest. Then be specific about what you like. Not "make it look like this," but "I like how the product images overlap the text here," or "this navigation stays out of the way until you need it." You can pull animations and effects from other sites in a similar way, or go direct to ones that provide the actual prompt, just don't overdo it. Too many moving graphics can ruin a site.

Claude is far better with a reference than just with plain words. "Modern and clean" means nothing. A screenshot means everything.

So is it worth it?

Honestly: if you touch your theme twice a year, no. Upload the zip, edit in Shopify, and get on with running your shop.  

But if you're actively building — adding sections, refining layouts, working on it week to week — it's the difference between having a proper record of your site and hoping you kept the right zip file. We wouldn't go back.

The bigger shift is the first half of this post. A theme shaped around your brand used to mean a developer and a five figure budget. Now it means a well written brief, honest feedback and a few afternoons. That's a real change for small businesses, and most haven't noticed yet.

The build keeps on going... 

By the time I’d finished the initial build and launched the site on Shopify, I had almost used up my Claude allowance. Rather than stop there, I switched to ChatGPT Codex and carried on building.

The blog article template still didn’t feel quite right, so I decided to redesign it completely. I first worked out the visual direction in Claude Design, then handed the finished concept to Codex to build as a Shopify Liquid template.

Once the first version was ready, I tested it on a draft theme rather than publishing it straight to the live site. It still needed plenty of refinement—from adding adjustable padding to fixing a problem that caused the comment form to appear twice.

That process was a useful reminder: generating the first version is only the beginning. The real work comes from testing it properly, spotting what doesn’t feel right and refining the details until it is ready to go live. Yes using AI makes the build process faster, but refining still takes time. 

Top Tip: Go into your Chat GPT settings > Import. Here you can import your work from Claude and also turn on auto sync. This became very useful for us when we ran out of Claude credits. Although to our amazement when we had built a new page for the website it automatically published it.