Shopify theme · Fashion · My own product
Not a client order: my own theme, built to be sold on the Shopify marketplace. It started not from “what should this look like” but from “where should we go”: which niche monetises best once the difficulty of the competition is weighed against the margin. Five days of sprint from that question to a finished theme: research, a design system, UI kits, and templates for mobile and desktop across every breakpoint.
Where the facts come from. Everything on this page is read off the working Figma file as of 11 October 2026: component names, their versions, variable values, sizes and line heights are quoted as written there. Scope and the dates of decisions come from the written agreement with the developer.
What is not here, and why. No sales, install or conversion figures: the theme is finished but not on the marketplace yet. Everything below that looks like a result is work done, not an outcome. Once it is listed the statistics live in the admin, and real numbers can take their place on this page.
Two disclosures. ATELIER is a placeholder brand for the demo store, not anyone's real label, and the photography is stock standing in for a merchant's own catalogue. The developer is not named here: that is his call, not mine.
Product
Role
One designer on the product, and that is me. Everything from the question of where to go to the handed-over design system went through me: desk research, interviews, a survey, ideation, structure, templates, tokens and kits. The platform, the theme build and the release are the developer's. Five days from the question to a finished theme, run as a sprint.
This is my own theme, built to be sold, not someone else's brief, so the first question was not about design. A theme lives on a marketplace beside hundreds of others, and its fate is decided before the first screen: which niche to enter so the monetisation is best, once market size, the difficulty of the competition and the margin are put side by side.
The answer came from data rather than taste. Fashion: the largest category of Shopify stores, so the widest pool of buyers for a theme, and at the same time a niche where the competition is fought on visual quality rather than on features. Where the win goes to how it looks instead of to a longer feature list, a designer has something to win with.
Then came a five-day sprint, shaped the way Google's is: the question, research, ideation, design, the system. Desk research across the competing themes on the marketplace, interviews, a survey, and the catalogue structure and page map came out of that rather than the other way round.
What came out is not a picture but the thing a theme gets built from: a design system, UI kits, the research artefacts and the designs, mobile and desktop across every breakpoint. It had to be: a Shopify theme is sections with settings, and to describe the settings you have to know in advance which values a merchant will change. A palette chosen after the components exist is no longer a repaint, it is a rebuild.
Audience
I raised this at the start and the research confirmed it: the product's customer and the product's user are different people with different jobs. The theme has to work for both, because one pays for it and the other decides whether it was worth paying for. Both portraits below came out of the interviews and the survey rather than off a desk.
01
02
The tension is real: the merchant is sold by a shopfront and the shopper is convinced by quiet. A theme built only for that first glance on the marketplace is overloaded with blocks. A theme built only for the shopper looks empty in the demo and nobody buys it.
It resolves through density rather than quantity. The homepage carries plenty of blocks, and each one is a selling point for the merchant, but inside each there is one heading, one action and a photograph at full size. The shopfront is assembled out of screens, not out of elements inside a screen.
audiences in one product
components, each with a version
days from question to finished theme
Screens
The header is transparent and sits on the photograph, so the first screen is a full-width frame rather than a frame under a bar. The display line is Cormorant Garamond at 104, the only size of its kind in the theme. The dark variant on the right is the same components with the token map switched, not a second design.
The one block in the theme that sells more than a single item at a time. Hotspots sit on the frame itself, the garments are listed beside it with indices and prices, and the look's total and one button close it. For the merchant it is an argument on the marketplace; for the shopper it is a way not to assemble the outfit themselves.
The filters stand open in a sidebar rather than behind a button: size and colour are the first things a shopper cuts the catalogue with, and hiding them adds a step. Active filters are lifted into the toolbar as chips next to the product count, so what is narrowing the results is always on screen.
The gallery takes two thirds and does not compress: in fashion the decision is made on the photograph. The column beside it carries exactly what a purchase falls over on: colour, size, the size guide, what is left, delivery and returns. The rest of the copy is folded into accordions, because it is not needed by everyone and not at once. On a phone the buy button moves into the Buy Bar and stops disappearing.
System
The token layer is built in three levels. Primitives hold the raw values, the semantic level says what each one is for, and component tokens record a decision that would otherwise live inside a single block and vanish the first time it was recoloured.
Cormorant Garamond Light · 104 / 100 · -1.5The only size of its kind in the themeCormorant Garamond Light · 72 / 72 · -1The editorial block on the homepageCormorant Garamond Regular · 48 / 52 · -0.5Any section headingCormorant Garamond Medium · 28 / 32A category name, a look titleCormorant Garamond Medium · 28 / 32 · +6The tracking is the logoManrope Regular · 18 / 28Hero subhead, descriptionsManrope Regular · 16 / 24Body copyManrope Regular · 14 / 20Captions and fine printManrope Medium · 16 / 22Price is its own style, not just textManrope SemiBold · 14 / 12 / 12 · +0.2 · +1.2 · +0.8Buttons, tabs, utility labelsNot one scale but two: --space-inline-* for spacing along the line and --space-stack-* for vertical rhythm, each running 4 to 128. Plus two layout constants, --space-gutter at 64 and --space-section at 96. The same number named twice settles the question of whether a gap is horizontal or vertical on every other component.
--card-width, --swatch-border-selected, --hotspot-bg-active, --badge-bg-sale do not exist for tidiness. Each one is something a merchant will eventually want to change, and each has to have a name before the theme's admin needs a setting for it.
The display styles keep size and line height as separate tokens: --font-display-hero-size and --font-display-hero-line-height. So the scale for a narrower screen, or for a more restrained merchant, switches on one value instead of being laid out again.
Library
All of them are at 1.0.0 from the start. The version is not a formality: a theme gets updated after release, and a merchant who has already dressed a shop in it needs to know what changed and whether it will pull their page apart.
Decisions
Three quantities put side by side: market size, the difficulty of the competition and the margin. Fashion is the largest category of Shopify stores, so the widest pool of buyers for a theme, and a niche where themes compete on visual quality rather than on the length of a feature list. The theme targets one niche on purpose: adjacent ones are reached afterwards through the token map, which is how the popular themes on the marketplace are arranged.
The sprint was chosen deliberately. A theme on a marketplace does not compete with an imagined ideal but with what is already sitting beside it, and six weeks of polishing says nothing about that. Five days keep the whole chain in one head and one week: the question, research, ideation, design, the system. What does not survive that pace is usually decoration rather than quality.
--radius-control: 0 on buttons, fields, swatches and badges. In fashion the decision is made on the frame, and rounded chrome starts competing with the crop of the photograph. Exactly one rounding survives in the theme, --radius-pill on the bag count, because that is the one thing that has to read as a sticker over an icon.
The line “only 2 left in size M” appears when the stock figure really says so, and never any other way. A theme that ships fabricated urgency out of the box makes the merchant liable for it, not the theme. The same rule governs the sale badge: it shows the difference between two prices, not a mood.
Size and colour are the first things a shopper cuts a catalogue with, so on desktop they stand open in a sidebar. Active filters are mirrored as chips in the toolbar next to the product count: without that a user loses track of what narrowed the results and clears everything instead of removing one filter.
The dark layout is assembled from the same components with the token map switched. That was the test of the token layer: if the dark version had needed layouts of its own, the layer would have failed at its job. It is shown on mobile, because mobile is where fashion actually gets browsed.
I was the one who proposed tickets, estimates and prioritisation, and I was the one who agreed that at two people it is counterproductive. The scope is a written list in the thread, and that is enough. A tracker arrives when there are more than two of us, not because it is the done thing.
What the handed-over file holds
The desk analysis of competing themes, the interview notes, the survey and the two portraits assembled out of them. They sit in the file beside the designs rather than in a separate deck nobody opens twice.
Tokens in three layers, eighteen components with versions and states, the type scale, the grid and the two-axis spacing rules. This is what a theme gets built from, not an illustration of one.
Home, catalogue and product, mobile and desktop, plus the dark variant and the scrolled product state with its sticky header and Buy Bar. Not three pictures but a theme you can see working.
Figures. The theme is finished but not listed yet, so there are no sales, installs or reviews. They come onto this page when there is something to show, and not before.