Claude Code and Shopify: Building a Custom Theme Section

If you can describe a feature you saw on another store, Claude Code can build it as a Shopify theme section. I tested that on a shoppable lookbook: click a look, see every product in it, pick a size and add to bag without leaving the page. The first working version took a couple of minutes. The finished section is one file that installs in any Online Store 2.0 theme, and the code is free on GitHub.

Here's the full build:

Where the Idea Came From

I found this one in my inbox. Classic Six sent a "Look of the Week" email for their S/S 2026 lookbook, and the link didn't go to a collection page. It opened the lookbook with that exact look already popped up, showing every product the model was wearing. It's one of the best-executed lookbooks I've seen, and I haven't seen anyone else do it that way.

Most brands struggle with lookbooks. The usual workaround is a custom collection per look, which is a merchandising chore and still doesn't show the outfit as an outfit. A look you can click, with its products attached, fixes that. The one thing I wanted to change: in the original, every product click sends you to the product page. If you want the blazer and the earrings, you go to one page, come back, go to the next, and come back again. On mobile you get lost fast, and multi-item orders are the whole point of a lookbook.

What Claude Code Handled, and What It Couldn't

The first problem was access. I wanted to rebuild a feature from a store I don't own, so there was no theme to work in. I created a free Shopify development store (the one step the CLI can't do), Claude Code generated a 27-product demo clothing catalog as an import file, and it worked in a copy of Shopify's free Horizon theme pushed as an unpublished theme. From there it did the parts that usually need a developer:

• Read the live page and rebuilt how it works. I gave it the Classic Six URL (the one from the email, popup anchor and all) and asked it to copy the functionality, not the design.
• Built it as a native section. Looks are blocks in the theme editor: a photo, a product picker, optional title and description. No app, no embed.
• Pushed to the store and fixed what broke. Every change went to the dev theme through the CLI, and I reviewed it on desktop and mobile.
• Wrote the docs. A README for people installing by hand, and an AGENTS.md for anyone installing with Claude Code or Cursor.

It also hit two real limits. The CLI can't upload images to Content > Files, so I uploaded the look photos myself and Claude wired them into the template. And when I couldn't find the new lookbook template in the page's template dropdown, it explained why: Shopify only lists templates from the published theme, and ours lived in an unpublished copy. Neither took long, but both are the kind of thing you should expect to do by hand.

The Build in Three Prompts

No spec, no wireframe. These are the actual requests, lightly cleaned up:

1. Copy how it works.

Here's the lookbook we want to emulate. Let's start by copying how it functions: the ability to add a photo, add the products, and show all of the products included in that look.

That produced a working grid of looks and a popup listing each look's products, including a bottom-sheet version on mobile that I didn't ask for and liked.

2. Fix the part I didn't like about the original.

I want it to open the quick select for the products instead of going to the product page, because that's clunky. Say I'm a shopper and I want multiple products. Opening new tabs is the other option, but I think that's bad on mobile.

Claude added size chips and an add-to-bag button under each product in the popup, with out-of-stock sizes crossed out and a bag bar that confirms each add. I'd pictured the theme's own quick-add modal, and it explained why it didn't use it: every theme builds that modal differently, so hooking into one would break the section in other themes. It used Shopify's standard cart API instead. Inline size selection works everywhere. It was the right call, and honestly it looks better.

3. Fix what looks wrong, from a screenshot.

[screenshot] Can we fix this funky overlay that's happening?

That's the whole QA loop, the same one we use when we build Shopify landing pages from Figma. Screenshot the problem, describe it in a sentence, check the fix.

Making It Work in Any Theme

Building something for one store is easy. Building something anyone can paste into their store is where most custom code falls apart, because it quietly leans on the theme it was built in. So I had Claude build it to be portable, and the rules it works by are written into the repo's AGENTS.md:

• One file. Markup, CSS, JavaScript and settings all live in sections/lookbook-gallery.liquid. Nothing to add to assets or snippets.
• Nothing borrowed from the theme. No theme classes, CSS variables or scripts for core behavior. Colors are read from the page at runtime, so the popup matches whatever store it lands in.
• Text sized so it survives different themes. Dawn and Horizon set different base font sizes, so the section sizes type relative to the page instead of assuming one.
• Every visual choice is a setting. Columns, image shape, popup side and size, colors, and every button label, all in the theme editor.

The one place themes still differ is the cart icon. Adding to bag works everywhere. Whether the header count updates live depends on the theme: it does on Horizon, it should on Dawn-based themes, and otherwise it catches up on the next page load.

The Email Angle: Link Straight to a Look

This is the part I care most about as an email agency, and it's how I found the original. Every look gets its own link that opens its popup on load:

yourstore.com/pages/lookbook#look-1
yourstore.com/pages/lookbook#look-2

That makes a weekly "Look of the Week" campaign easy. Each send features one outfit, the button drops the subscriber into that exact look, and they can add the whole outfit without clicking through four product pages. You can also set a custom anchor per look (like #summer-linen) so the links read well in ads and UTM reports. Pair it with Claude Code writing the email copy from your catalog and the whole campaign is mostly assembly.

Install It on Your Store

Two ways, both about five minutes. Try it on a duplicate of your theme first.

No code, in the Shopify admin:

1. Copy sections/lookbook-gallery.liquid from the GitHub repo.
2. In Online Store > Themes > Edit code, add a new section named lookbook-gallery and paste it in.
3. In Customize, create a page template called lookbook and add the Lookbook gallery section.
4. Create a page that uses the lookbook template, then add your looks: a photo and the products in each one.

With Claude Code or Cursor: open your theme folder, point it at the repo, and say what you want ("install this in my theme" or "put the popup image on the right and add a quantity picker"). The AGENTS.md file tells it how the section works and which rules keep it portable, so its changes don't break the section in the process.

After that, everything is managed in the theme editor. Swap photos, reorder looks, change the products, rename the collection for winter. None of it needs code.

What Else This Works For

The lookbook is one example of a pattern: see a feature you like, describe it, and let Claude Code build it natively instead of paying for an app to approximate it. We've used the same approach to replace Rebuy with native checkout cross-sells and to add one-tap subscription switching on checkout. The common thread is ownership. The code lives in your theme, costs nothing per month, and does exactly what your store needs.

Grab the section from GitHub or watch the build on YouTube. If you want features like this built for your store, and the emails that send people to them, reach out.