Guides
Color swatches
Show color or pattern swatches on the product page, in product grids, and in filters.
On this page
Maison shows color swatches based on the swatches Shopify associates with your products' option values. The theme doesn't guess colors from names ("Red", "Navy"): your product data carries the color.
Where swatches appear
- Product page and featured product: the option shows as 20px swatches, and the name of the selected or hovered color shows next to the option name.
- Product cards in grids, if Show color swatches is checked: up to three swatches, then "+N". Hovering over a swatch shows the variant's image.
- Collection and search filters, when the filter is based on values that have swatches.
Swatches are round with the Pill control shape, and square otherwise. The selected value is underlined with a thin line.
Set up swatches
With the product category (recommended)
Choose a category
On the product's page in your Shopify admin, choose a specific product category (for example, Apparel > Dresses). Shopify then offers category metafields, including Color.
Connect the option to the metafield
In Variants, for the "Color" option, choose to connect it to the Color category metafield. Each value becomes a standard color entry.
Set the swatch
For each value, set a color (hex code) or an image (for a pattern, weave, or material) in ContentMetaobjects or directly from the option.
Connected values are shared across products: define "Camel" once and all your products benefit, and Search & Discovery can use them as a swatch filter.
Variant thumbnails
If an option has no swatches but its variants each have a different image, Maison shows it as 56px thumbnails of those images. This is handy for photographed materials or finishes. Note that this applies to any option whose variants have different images, not just color.
Swatches don't show
- Is the option connected to a metafield with swatches, or do the variants have distinct images? Without one or the other, the option shows as text, boxes, or a dropdown.
- In grids, is Show color swatches checked in the section?
- In grids, only the first option that has swatches is shown, and swatches are hidden on cards that are too narrow (Full bleed layout).
Maison 1.0.0