> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/drift-shopify-theme/drift-studio/sections-and-features/variant-swatches.md).

# Variant Swatches

DRIFT uses Shopify's native variant swatches for color and size pickers on product pages and collection cards.

## How to access

Variant swatches are configured in **Shopify Admin**, not in the theme editor. Go to **Settings → Custom data → Products** and configure swatch metaobjects, or assign swatch values directly to your variants.

## How DRIFT renders swatches

DRIFT includes a `swatch.liquid` snippet that renders Shopify's native swatch values (colors, images, or labels) on the product page and Quick Add overlays. No separate theme setting controls swatch behavior — it follows whatever Shopify provides for the variant option.

## Tips

* For best results, use Shopify's swatch metaobject system (**Settings → Custom data → Variants → Color**) to attach color values or images to each variant option.
* Color and pattern swatches render as small circles. Text values fall back to button-style chips.

## Related

* [Colorways metafield](/drift-shopify-theme/drift-studio/metafields/colorways.md) — DRIFT's grouped-product variant linker (separate from native swatches).