Muller Pigments — a Shopify OS 2.0 theme

A storefront for a pigment mill in Roussillon, Provence. Forty colours, dug and ground by two people, sold to painters who want to know what they are buying.

The whole design rests on one decision: the swatch is the product photograph. A painter buys behaviour, not packaging, so every colour is shown as one stroke pulled at 15° — mass tone, 1:10, 1:100 — and the jar sits in front of it at a quarter of the size, only to say what arrives in the post.

Live demo: https://rcftx1-03.myshopify.com — storefront password shopify

The store sits behind Shopify's password page; the theme and the script that fills the store with the data it reads are both in this repository.

What is interesting in here

Filtering that is real. Forty colours is small enough to browse and large enough that facets have to work. The rail is Shopify's own tag filtering — /collections/colours/family-earths+lf-i — so it needs no app, survives the back button and is shareable. Counts are computed against the unfiltered collection, so a painter can see a filter is empty before spending a click on it.

Specifications as data, not prose. Colour Index, lightfastness, opacity, granulation, grind, binder, undertone and source live in muller.* metafields with storefront access, not in the description field. The three ASTM III colours that genuinely fade say so on their own page, next to the rating.

Formats are variants. 30 g / 100 g / 250 g jars, pans, tubes — each a real variant with its own URL, so the price on the page is the price the cart charges and the choice survives without JavaScript.

No stock photography. Every swatch, drawdown and vessel in this theme is generated: tools/make-swatches.py paints 243 PNGs from the catalogue, and the jars, pans and tubes are inline SVG built from each pigment's hex.

Structure

sections/         14 sections — hero, catalogue, product, cart, journal, pages
snippets/         product card, drawdown, facet rows, jar / pan / tube
templates/        JSON templates incl. collection.wide.json for the wide view
assets/           theme.css, theme.js, 243 generated swatches
tools/
  pigments.json   the catalogue — one source of truth
  make-swatches.py   paints every swatch and scene from it
  deploy-store.mjs   fills a real Shopify store from it
preview/          a local Liquid harness — `npm run preview`

Running it

Local preview, no Shopify account needed:

npm install
npm run preview          # http://localhost:4000

Against a real store:

node tools/deploy-store.mjs <store>.myshopify.com   # metafields, 40 products,
                                                    # collections, pages, journal
shopify theme push --store <store>.myshopify.com

The deploy script is idempotent and stepped — definitions, products, collections, pages, journal, publish — so any part can be re-run alone.

Notes

shopify theme check passes with no errors. The remaining warnings are the Google Fonts link and hardcoded / links, both deliberate.