What are Shopify's native swatches?

A color or an image attached to an option value, such as a sand-coloured dot for Sand, set in Shopify by linking the option to a category field such as Color; storefronts show it in place of the value's name.

A swatch is the little color dot or fabric picture next to an option value. Since 2024, Shopify keeps swatches itself:

The product has a category, such as Shirts, which gives it category fields, such as Color.
When you create the Color option, you link it to the Color field and pick its values from it.
Each value of that field has a color or an image: that is the swatch.

The order matters. An option created first, and linked to the Color field afterwards, keeps empty swatches. Delete the option and create it again from the Color field. This recreates the variants, so note their SKUs, prices and stock first.

In Webflow terms

In Webflow you would add a color field to a CMS item. Here the color belongs to the value of an option in Shopify, shared by every product that uses it: set Sand once, and every Sand product shows the same dot.

In Smootify

Inside a picker, option="bg-color" paints the value’s color and option="image" shows its image. For more than a color, such as a description or extra fields, Smootify also reads an option metaobject in the product metafield custom.options.