Shopify theme rebuild
A theme rebuild for a wine shop with its own data model
- Role
- Theme development & data modelling
- Period
- 2025 – today
- Stack
- Liquid, metafields, metaobjects, JS, CSS
- Scope
- Product page, Collections, Admin API, etc.
"The biggest problem" — Structure
The previous setup treated every product as a one-off. The fact sheet the producer supplies — the ficha técnica — was attached as a PDF download, and anything that needed to be visible on the page was pasted into a rich-text block by hand, per wine, in every language. Nothing was queryable: you could not filter by region, because "Beira Interior" was a run of characters inside a paragraph, not a value. This alone made managing the shop a project in itself. Costing the owner valuable time he could have spent on the business.
Nineteen fields, sorted as you scroll. Six of them are references to shared records — a producer or a region exists once and every wine that needs it points at the same entry.
- One hand-written HTML block per product
- Hours to add a new wine, prone to typos and inconsistencies
- No filtering — the data was prose
- Repeating recurring information, like a producer or region
- 19 typed metafield definitions rendered by one template
- using Claude + MCP, a new wine is added in minutes
- Filter by producer, region, grape and wine type
- Shared metaobjects for producers, winemakers, regions, etc.
The Steckbrief
The block that replaced the hand-written HTML. Every row is a metafield, rendered by one template for every wine in the store. The icons are the same SVGs I drew for the printed catalogue in 2024 — the print schema and the Shopify schema turned out to be the same schema.
Rebuilt here in dark; the shop renders it on linen. Values are the live ones from the product page.
- Typ
- Weisswein
- Bezeichnung/Region
- DOC Beira Interior, Portugal
- Abfülljahr / Jahrgang
- 2024 / 2023
- Rebsorten
- Síria, Gouveio, Arinto, Rabigato, Fernão Pires
- Produktionsmenge
- 4000 Flaschen
- Alkohol
- 13,8% Vol.
- Gesamtsäure
- 6,53 g/L
- pH-Wert
- 3,12
- Lagerung und Service
- 12–14 °C
Down to the Detail
Roughly one in six wines has won something, and the ones that have often have won several times. A row of five medals on a product card would drown the bottle, and showing only the best one throws away the rest. So the stack rests as a single medal and fans out on hover — the card stays calm in a grid, and a visitor who is interested gets the full list without leaving the page.
Rebuilt from the live CSS, with the real medals from Flutt Baga Rosé Bruto. Hover the card — or use the buttons to change how many awards the wine has.
Hover the card. The lead medal shrinks and the other 4 expand beneath it.
The shop today
Most of the traffic is on a phone, so the product page was rebuilt for the small screen first and the desktop layout follows from it. Everything on the storefront — the spec block, the producer story, the awards, the filtering — reads from the same schema.
The same eight facts started life as a hand-set page in an InDesign catalogue. Two years later they are a schema — and the printed book now generates itself.