The Hair Spell - Shopify Redesign

When I took on The Hair Spell a hair-care brand founded by Bree Aylissa the brief looked simple: a storefront that felt as considered as the products. No off-the-shelf theme, no "close enough" template. A custom Shopify theme, built section by section, that a non-technical founder could run herself in the theme editor. I ended up shipping 17 sections, more than 2,400 lines of Liquid, and a full custom theme.

Why custom Liquid instead of headless

I could have reached for a React front end on top of the Storefront API. But this store's whole value is editorial: story-driven product pages, a founder narrative, a hair quiz. That's exactly the kind of content Shopify's native theme editor is built for. Going native meant Bree could rewrite copy, swap images, and reorder the homepage without touching code and I could still write real software underneath.

The architecture is the standard Shopify contract, done properly:

- Sections — self-contained, reusable Liquid components, each with its own schema.

- JSON templates — the homepage, product page, and About page assemble those sections and define default content.

- A global settings schema — brand controls for colors, type, spacing, and the announcement bar.

That last piece is what turns a theme into a product. Bree's entire visual identity lives in settings, not in the code. Every component consumes the same design tokens, so changing one color in the theme editor updates the whole storefront at once buttons, borders, bands, hover states. No find-and-replace, no redeploy. The theme itself is the CMS.

Fonts with zero external requests

Most themes quietly phone home to Google Fonts on every page load. I self-hosted the brand's variable fonts and served them from Shopify's own CDN instead. League Spartan for display, Montserrat for body, Playfair Display for the italic serif accents.

Because they're variable fonts, one file covers every weight — smaller payloads, faster first paint, and no third-party dependency that can slow the site down or break. A user in a region with restricted access to font CDNs still gets the full brand experience, and there's one less external request on the critical path.

Product pages driven entirely by metafields

The hardest constraint on a theme is content that keeps changing. If product storytelling lives in hardcoded markup, every new product needs a developer. So I pushed the product page's editorial content into Shopify metafields and let the template render whatever the merchant fills in.

Step label, tagline, "why Bree made it," what it does, key ingredients, FAQs — each one renders only if it exists, so a sparse product degrades gracefully instead of showing empty headers. Bree writes the story in the admin; the theme lays it out. The same data powers the product gallery, variant-aware pricing, and the FAQ accordion. Adding a product became a content task, not a code task.

A hair quiz that feels like an app

The section I had the most fun with is the quiz — a modal that walks a shopper through five questions and routes them to a personalized result. It's built from theme blocks, filtered by type at render time, so the whole flow is editable in the theme editor without a developer.

Each answer option carries a result handle; the JavaScript tallies responses, reveals the matching result block, and captures the email through Shopify's native customer form — which means leads land in the customer list with the right tags, no third-party app required. Progress bar, reduced-motion support, keyboard-accessible dialog, all included.