- Shopify
- OS 2.0
- Claude Code
Base theme
Shelf
Product · Shopify theme
Shelf.
A conversion-first Shopify theme that doubles as a base for agencies. One set of sections, cart logic and accessibility work underneath, and as many brands as you like on top.
The idea
Shelf started as a conversion-focused theme: a bundle builder, product quiz, subscribe and save, sticky add to cart and the other things merchants usually buy apps for, built in as 63 sections and 64 blocks.
Then I wanted to reuse it. Agencies, mine included, rebuild the same cart, filtering and product form for every client. I wanted one solid base that a designer could restyle completely, without forking it and losing every future fix.
What Shelf gives an agency
-
Conversion features, built in
Quiz, bundle builder, subscribe and save, before/after slider, ingredient cards, countdowns, upsells and a free-shipping bar all ship as native sections. No app stack to install, or pay for, on every client store.
-
Any brand on the same base
Every color, size and spacing value runs through design tokens. A new look is a preset, a token file and a little CSS, all in files Shelf never touches. The Editorial demo needed a single CSS rule.
-
Updates that merge cleanly
Client designs live in their own layer, so taking a Shelf release is an ordinary git merge. In testing, about 40 changed core files merged with zero conflicts. A lint check in CI keeps raw colors and undefined variables out of the base.
-
Hand Claude a design
A Claude Code skill in the repo takes mockups, a Figma file or a written brief and maps the palette, fonts and layouts onto Shelf's own settings and sections. It checks contrast, keeps a design record, and reports anything that needed custom code.
How I built the base
I worked through it with Claude Code. First an audit: about 35 CSS variables were used but never defined, so theme settings quietly missed parts of the store. Fixing those put every value on a token.
Then I added a custom layer, a token file and a stylesheet that load after everything else, plus a guide, a changelog, a rebrand script and kitchen-sink templates that show every section on one page for QA.
What testing taught me
The audit wasn't enough. Building real designs on the base found what it missed: pill shapes, button shadows and 54 letter-spacing values that a new design couldn't reach. Each demo design became a list of fixes for Shelf itself, and the next design needed less custom code than the last.