Color swatches

Metonia shows color circles instead of text buttons when your option values have Shopify swatches. There is no theme setting to turn this on: swatches appear automatically once the product data has them.

Where swatches appear

Place	What customers see
Product page Variant picker block	A circle for each value, filled with the swatch color or image. The value name is available to screen readers and as a tooltip. Unavailable values are faded with a diagonal line.
Floating product card and quick view	The same circles, so customers can switch metal without scrolling back.
Collection and search filters	Circles next to each value in color filters. See Set up filters with Search & Discovery.

Product cards in collection grids don’t show swatches.

Add swatches to your products

Shopify stores swatches on category metafield entries, such as the Color entries of a product category.

1. In your Shopify admin, open a product in Products.
2. In Category, choose the product’s category. Pick one that includes a Color attribute (the attributes appear under Category metafields once the category is set). Select Save.
3. In Variants, select + Add options like size or color and choose the category metafield option (for example Color). Pick the values you sell. The values connect to category metafield entries.
4. In Category metafields, select the color metafield, then open an entry or select Add new entry. Set a color value, or upload an image for textures like hammered gold or pavé. Select Save.

You set a swatch once per entry. Every product that uses the entry shows the same swatch, and renaming it (for example Yellow to Yellow gold) updates everywhere.

Image swatches are cropped to a small circle, so use a close, even texture photo, square and at least 80 px wide.

Options that aren’t linked

If an option is plain text (not connected to a category metafield), Metonia shows its values as text buttons on the product page. Linking the option is the only way to get circles in the variant picker.

Swatches in filters

1. Go to Apps → Search & Discovery → Filters.
2. Add a filter for your color category metafield (or open the existing one). If you moved your options to category metafields, remove the old option-based filter and add the category metafield filter instead.
3. Turn on Include swatch (for standard attributes) or Include visual with the Swatch style (for metafield filters). Select Save.

Metonia also helps metal filters look right before you add swatches: in any filter whose name contains color, colour or metal, the values Gold, Silver, Rose gold, White gold, Black, White, Bronze and Copper get a matching circle automatically. Other values show as checkboxes until they have a swatch.

Troubleshooting

The variant picker shows text instead of circles. At least one value of the option needs a swatch color or image. Check that the option is connected to a category metafield and that the entries have a color set.

Some values show text and others show circles. Only values with a swatch get a circle. Open the entries without one in Category metafields and add a color or image.

Filter swatches don’t match the product page. The filter may still use the old option-based source. Replace it with the category metafield filter.