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.

Try it live — browse the full theme on its Shopify demo store: fk-ecom-zffen8eq.myshopify.com. Like any Shopify theme demo it's password-gated — enter the storefront password rtuiya. The demo runs a 50-product fragrance catalogue across all three colour schemes (Sillara · Neroli · Ambre), on desktop and mobile.

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

Submitted to the Shopify Theme Store and in review. 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), a copy / font / alt-text compliance sweep, the core JS layer (JS variant picker, cart drawer, predictive search), the home and collection sections, and secondary templates with empty / sold-out / success states. Continuing through the review cycle: the i18n / RTL and Lighthouse / axe automation passes, plus the Neroli and Ambre preset listings.

The demo store above runs the current build of this commercial theme, submitted to the Shopify Theme Store and in review.