Sillara — Luxury Fragrance Theme — Case study

Overview

Sillara is a commercial Shopify theme for the luxury-fragrance niche, built to be app-independent — it has to look and work fully with no required apps. It's an Online Store 2.0 theme on Shopify's Skeleton base, designed system-first and engineered for Core Web Vitals, accessibility, and the Shopify Theme Store's review bar. I'm building it solo, end to end: strategy, brand, design system, architecture, and code.

The problem

Perfume merchants on Shopify are caught between two poor options. Generic multipurpose themes need a stack of paid apps to tell a scent story — which drags down Core Web Vitals and setup simplicity, and still rarely fits the editorial, olfactory-led UX that luxury fragrance expects. Custom or headless builds fix the fit but cost far more than a new or scaling store can justify. The target merchant is non-technical, sells across EU / US / AU, and wants to launch fast without a developer.

Constraints

No required apps. Every feature — cart drawer, predictive search, mega-menu, scent pyramid, filtering — ships native.
The Theme Store bar. shopify theme check at 0 offenses; Lighthouse mobile Performance ≥ 85, Accessibility / Best-Practices / SEO ≥ 90; WCAG 2.1 AA with 0 critical axe issues.
Everything merchant-editable. No hardcoded copy — all strings via t: keys + locales/, all styling via theme settings.
International from day one. Shopify Markets (multi-currency / language) and RTL via logical CSS properties.
Lean runtime. Vanilla JS and Web Components — no framework, no build step.

Approach

I ran it as a product, not a template: strategy and competitor teardown (Le Labo, Diptyque, Aesop) → brand and naming → a tokenised design system with three WCAG-AA colour schemes → hi-fi mockups of every template and state → then build. The fragrance-specific UX — a scent pyramid, browse-by-note, an olfactory story — is treated as structured data the merchant edits, not bespoke markup.

Architecture

Sillara is a token-driven OS 2.0 theme with a vanilla-JS component layer. Design decisions live as CSS custom properties (snippets/css-variables.liquid + a hand-tuned critical.css), so all three schemes — Sillara, Neroli, Ambre — clear WCAG AA from the same token contract. Merchandising is data-driven: scent pyramids and notes come from product metafields, and collection filtering uses Shopify's native Search & Discovery rather than an app. Interactivity is progressively enhanced — the cart drawer, predictive search, and variant picker upgrade markup that already works without JS.

Shopify Online Store 2.0  ·  Skeleton base  ·  app-independent
  ├── layout/theme.liquid        header / footer section groups
  ├── sections + blocks (JSON)   merchant-composed · t: keys → locales/
  ├── snippets/css-variables     design tokens → 3 AA colour schemes
  ├── assets/critical.css        above-the-fold, token-driven
  └── assets/*.js  (vanilla WC)  cart drawer · search · mega-menu
        ↕  native platform, no apps
  ├── Metafields                 scent pyramid · olfactory story
  ├── Search & Discovery         filter by note / family
  └── Markets + RTL              multi-currency / language · logical CSS

Key decisions & trade-offs

App-independent, on purpose. Building commerce UX natively is more work than dropping in apps, but it's the theme's core promise — faster stores, simpler setup, no per-merchant app bills.
Design tokens over one-off styles. Every scheme derives from one token set, so a new palette is data, not a rewrite — and AA contrast is provable across all three.
Progressive enhancement over a JS framework. A no-build, vanilla-JS baseline keeps the performance budget honest and the theme maintainable across the Theme Store's long tail of updates.
Metafield-driven merchandising. The scent pyramid and story are structured data, so merchants edit meaning, not markup.

Status & what's next

In active development toward Theme Store submission. Shipped and merged so far: the PDP refactor to snippets + app/theme blocks, native cart via {% form %}, app-block support and localization, PDP feature parity (unit price, pickup, gift-card recipient, selling plans, media), and a copy / font / alt-text compliance sweep. Next: the core JS layer (JS variant picker, cart drawer, predictive search), the remaining home and collection sections, secondary templates with empty / sold-out / success states, then the i18n / RTL and Lighthouse / axe automation passes before submission.

This is a pre-launch commercial theme; the above reflects a build in progress, not a shipped store.