How we build Shopify stores with Claude Code in 2026

15 October, 20269:00 am

Introduction

Most small business Shopify stores are built the same way: pick a theme, install an app for the slideshow, an app for the Instagram feed, an app for badges, an app for the mega menu, and keep adding until the store does what the owner wants. It works, at first. Then an app is abandoned, the theme update overwrites a tweak, or the store takes ages to load on a phone.

We build differently. In this post we’ll walk through the setup behind a real project: a Shopify store for an independent home and gift boutique in Brighton’s North Laine. Over three weeks, from 17 September to 6 October 2026, the theme was reshaped into a branded storefront with custom pages, a rebuilt slideshow, an autumn campaign homepage, a new header and search, and an accessibility pass to the strictest standard.

You don’t need to understand the technical detail to benefit from it. But if you’re choosing someone to build or look after your store, it’s worth knowing what good foundations look like, and what questions to ask.

Working on the theme files locally

The problem. Plenty of stores are edited live. Someone changes the theme in the admin, hopes for the best, and customers see any mistake before the owner does.

Our approach. The theme lives as a folder of files on our own computer, and Claude Code works on those files directly. It can read the Liquid, CSS and JSON templates, make a change, and let us check the result in the browser.

This means we can:

Experiment safely. Layout ideas, such as five different slideshow text panels, are tried and thrown away without customers ever seeing them.
Work quickly. Changes are small and quick to check, which suits a loop of looking, adjusting and looking again.
Pay nothing per edit. Previewing, comparing versions and undoing a change cost nothing. There’s no meter running in the background (more on why that matters further down).

Version control with Git

What it is. Git records every change made to a set of files: what changed, when, and why.

What we track. On this project, only the theme/ folder is tracked. The business documents at the root of the project, such as contracts, accounts and call notes, are deliberately kept out of Git. Between 17 September and 6 October the project collected around 250 recorded changes, from “Remove background from ‘You may also like’ section on product page” to “Sale badge: zigzag edge on all sides”.

Why that matters to you:

Nothing is ever lost. We tried a gradient text container on the slideshow, disliked it, and reverted it with a single command. The same happened with an “in-stock only by default” collection filter.
There’s a clear history. If something looks wrong, we can see exactly what changed and when.
Rollbacks are cheap. Because each change is its own entry, undoing one never means undoing a week of work.

One caveat: Git protects the theme files, but it doesn’t track live Shopify Admin data such as Pages, Policies and Navigation. That’s store data, not files, so it’s handled with extra care (see below).

Written rules: the AGENTS.md guide

The project has a written guide for the AI. It describes how the theme is structured, which customisations exist, what the content rules are, and what the standards are. A short root file points to a detailed guide inside the theme folder, which is the authoritative reference.

Claude works within those rules, not around them. It’s also why a request like “make the Autumn Edit tiles match the homepage” can be a small, targeted edit instead of a rediscovery of how the store works each time. When we add a template, such as the About page, the guide is updated at the same time so the next session starts with the right picture.

A custom theme, not a pile of apps

Every app is code written by someone else, running on your store. Each one is a potential conflict, a little extra loading time, and often a monthly fee.

So we build what the store needs into the theme itself:

A slideshow with per-slide mobile images and focus points, a numbered slide picker, proper carousel ARIA, autoplay off by default and a per-slide text box colour setting.
An Instagram section that shows one, two or three posts depending on the device, with equal-height cards.
Product, sale and sold-out badges designed to match the brand.
A desktop search bar with a styled predictive-results dropdown, with the basket beside it.
A Brands A-Z page template, menu-driven 404 links, and structured data (FAQPage JSON-LD) for the FAQ page.

The benefits add up: faster pages, fewer things to update, no surprise subscriptions, and a store that’s far less likely to break when something else changes.

Reusable sections you can edit in the theme editor

Shopify themes are built from sections, and a good store needs more than the defaults. We build sections for specific jobs and keep them editable:

The About intro is a reusable section with an optional call-to-action button. It replaced a one-off homepage section, and now serves the homepage and the About page.
The autumn homepage uses hero-collection, editorial-tiles and brand-strip sections, including a five-tile Autumn Edit.
The contact, policy and FAQ pages each got a custom section: a single Get in touch form, an “On this page” nav, and always-expanded FAQ answers.

Text, images, links and colours are settings in the theme editor, so the owner never has to touch code to change their own words. When we improve a section, we keep existing content working rather than leaving blank blocks behind.

Accessibility to WCAG 2.2 AAA

Accessibility is a checklist in the project guide, not an afterthought. We aim for Level AAA, the strictest level, wherever it’s practical. Examples from this build:

Contrast checked per colour. The Sold out badge is red #ff6b6b with black text at 7.57:1. The Sale badge is blue at 8.55:1.
Decorative graphics hidden from screen readers, form placeholders labelled, and a fallback for product image alt text.
A real carousel. The slideshow has correct ARIA roles and a numbered picker that works on every device.
Sensible mobile headings. Headings below h1 are always smaller than h1, so the hierarchy reads correctly at every width.

Protecting the live store

AI makes it easy to change a lot quickly, so the rules about what is and isn’t live need to be explicit:

The live theme is treated carefully. We commit each change, then push it to the live theme, checking that the live copy matches what we expect.
Store-wide changes are confirmed first. Anything that touches live data or goes out to customers immediately, such as navigation or policies, is confirmed with the owner before it happens.
Work in progress stays out. On 6 October a half-finished homepage layout was committed but deliberately not pushed, so customers only saw finished work.
Store data gets its own checklist. Link audits, menu clean-ups and pre-launch data fixes are recorded in the docs, because Git can’t roll those back.

Pro tip: where AI fits in

We use Claude Code as part of this workflow, in a deliberately structured way:

Written rules for every project. The guide covers structure, accessibility targets and house style.
Small, recorded changes. Each edit is committed individually, so every AI-assisted change is visible, reviewable and reversible.
More than code. Alongside the Liquid and CSS, Claude helped with image work: upscaling a slideshow image, and cutting out products from their backgrounds to build banners with soft shadows. It also helped with link audits and keeping the docs current.
Visual feedback drives the work. Most results came from looking at the page and asking for small adjustments over several rounds, such as “make the panel narrower” or “make the heading match the About page”.

For independent, regularly updated coverage of how AI coding tools like Claude Code behave in practice, follow Simon Willison’s writing on Claude Code on his weblog.

AI speeds up the repetitive work. The decisions about what the store should do, how it should look, and whether a change is right for the customers stay with a human.

Local development vs credit-based AI builders

AI website builders let you describe a store in a chat box and watch it appear. For a quick prototype that’s impressive. The catch is how they’re priced: by credits. Every message uses credits, and fixing something the tool got wrong uses more.

Why that matters over the life of a store. A store is never finished. It’s revised for years: seasonal campaigns, new collections, better mobile layouts. Under a credit model, every one of those changes is a metered cost, and the pressure is always to do less.

It limits creativity. When each attempt has a price, you stop experimenting. The slideshow on this project went through dozens of small variations before it felt right. Under a credit model, many of those would never have been tried.

How our workflow is different:

AI is one tool, not the whole workshop. Claude Code works alongside a code editor, Git and a browser. Hand edits, previews and reverts don’t touch an AI allowance.
A fixed subscription, not a per-project bill. Usage isn’t tied to any one store, so there’s no cost that grows with every revision.
Good foundations make usage go further. Because the guide and the structure are already in place, requests are small and targeted instead of regenerating whole pages.
Experiments are free to throw away. Because every change is its own commit, a failed idea is a single revert.
You own the result. The theme is files in a repository that runs on standard Shopify, so you’re never paying a platform just to keep editing your own store.

Conclusion & next steps

A store doesn’t have to be a fragile stack of apps held together by hope. Work on the theme files locally, track every change, write down the rules, build the features into the theme, hold it to a high accessibility standard, and treat the live store with care, and you end up with a storefront that’s fast, accessible, easy to edit and straightforward to look after for years.

That’s the setup behind our Shopify builds, from a Brighton gift boutique to whatever comes next. If you’d like a store built on the same foundations, or you’re worried your current one has become slow and app-heavy, get in touch and we’ll take a look.