Variant swatches
Dropdown variant pickers hide the thing people are actually choosing. Swatches put the colours and materials on the surface, on both the product page and the collection grid, so shoppers can see the range without opening every product.
What’s included
- Colour or image swatches on the product page
- Swatches on collection cards, switching the card image
- Driven by metafields or your variant images, not hard-coded hex values
- Unavailable combinations clearly marked
Not included
- Producing swatch imagery
- Restructuring your variant options in Shopify admin
Anything on the right is still something we do — it is simply a separate task, quoted separately, so this one keeps a fixed scope and a fixed price.
When it is done, you will have
- 1The change live on your store, published only after you approve it
- 2A clean diff you are welcome to read
- 3A short written note covering what changed and why
Before we start, we will need
- Collaborator access to your Shopify admin
- A sentence or a screenshot describing what you want
Questions people ask first
Where do the colours come from?
Either from your variant images, or from a metafield your team controls. We avoid hard-coding hex values in the theme, because that means a developer every time you add a colour.
Can it show out-of-stock options?
Yes, and we recommend it. Hiding sold-out variants makes the range look smaller than it is; marking them clearly keeps the range visible and sets expectations.
Often bought alongside
Custom homepage section
A new homepage section, schema-first and editable in the theme customizer.
Custom product page section
A new section on your PDP — tabs, spec table, trust row — editable in the theme editor.
Collection page layout change
Grid density, card content and sort controls on your collection template.