Matter
A theme where the design system is the product.
- Platform
- Shopify Online Store 2.0
- Stack
- Shopify · Liquid · Tailwind CSS · JavaScript · Section Rendering API · Theme Check
- My role
- Theme architecture, design system, Liquid sections and blocks, accessibility, performance, and Theme Store packaging.
Overview
Matter is a premium theme for furniture and home retailers, designed for the Shopify Theme Store. Its first preset grew out of a real furniture store's catalogue: room-based browsing, large product families and a lot of practical detail.
The problem
Furniture stores sell big, considered purchases. Shoppers browse by room, compare sizes and materials, and want reassurance about delivery and warranty. Most themes either look generic or fall apart as soon as a merchant changes a colour or a section.
The approach
Start with the design system. Colours, type, spacing and component recipes come from theme settings as CSS variables, so every section stays consistent however a merchant configures it.
Then build the store phase by phase — shell, cards, collection pages, product page, homepage sections — each one visible in a built-in styleguide view before it ships.
Engineering
Liquid, JSON templates and theme blocks, with Tailwind CSS v4 compiled at build time and small custom elements instead of a JavaScript framework.
E.01
Server-rendered interactions
Predictive search, cart updates, product variants and collection filters re-render through Shopify's Section Rendering API, so the HTML stays the source of truth.
E.02
Tokens from theme settings
Merchant settings become --ds-* CSS variables that the utilities read, so the compiled stylesheet only changes when the source does.
E.03
A block-based product page
The buy box is built from reorderable blocks — variant picker, price and stock, fulfilment, trust, specs, reviews — next to a gallery that supports video, 3D and AR.
E.04
Keyboard-first patterns
Predictive search follows the combobox and listbox pattern, and menus, drawers and dialogs are built to work fully from the keyboard.
E.05
Theme Store readiness
Theme Check runs as part of verification, preset listings are generated from the templates, and a packaging script assembles the Theme Store bundle.
My role
I designed the architecture and built the theme: design system, sections and blocks, interactions, and the tooling for listings and packaging.
Outcome
A complete Online Store 2.0 theme with more than fifty configurable sections, several presets and a packaged release, being prepared for the Shopify Theme Store.
Selected visuals
