> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt
> Use this file to discover all available pages before exploring further.

# Show color swatches for product variants in Facet

> Turn Facet's color options into swatches, choose which option names count as colors, map color names to shades and set the shape of option boxes.

The **Variants** settings decide how product options such as color and size look to shoppers. Facet can show color options as small filled swatches instead of words, and gives every option box the same corner shape. This page explains how Facet finds a color option, how it picks the color for each value, and where swatches appear.

## What these settings control

* Whether color options show as swatches or as text.
* Which option names Facet treats as colors.
* The color shown for each color name.
* The corner shape of option boxes and swatches.

Swatches appear in the product page variant picker (when it shows buttons, not a dropdown), on product cards, in quick view, in the **Bundle** section and in the color filter on collection and search pages.

## How to access

**1. Open the Theme Customizer**

In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet.

**2. Open Theme settings**

Click the **Theme settings** icon in the left sidebar.

**3. Open Variants**

Expand **Variants**. Open a product with a color option in the preview to see your changes.

![The theme editor with Theme settings open and the Variants group expanded in the sidebar.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/theme-settings/variants/variants-location.jpg?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=a3c3abc68c33890e52ba75eb4bb77f60)

## Variant settings

![Theme editor sidebar showing the Variants theme settings: Variants, Color option style, Color option names, Color names.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/theme-settings/variants/variants-settings-1.png?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=a088eef3ae87bff41aeefc1167cd2fc5)

![Theme editor sidebar showing the Variants theme settings (part 2): Box shape.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/theme-settings/variants/variants-settings-2.png?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=38125f0b2df2b89605c5e74ee9c0dfcf)

> [accordion] Color option style
>
> * **Color swatch** (default): color options show as small filled boxes. Product cards show a row of swatches under the price.
> * **Text**: color options show their names, like any other option, and product cards show no swatches.
>
> The shape of the swatches follows the **Box shape** setting further down in **Variants**.

> [accordion] Color option names
>
> The option names that count as colors, separated by commas. Default: `Color, Colour, Renk`. Capital letters don't matter.
>
> Add the name you use in your products if it is not in the list, for example `Shade` or `Kleur`. With the **Color swatch** style, values that have a Shopify image swatch also show that image, whatever the option is called.

> [accordion] Color names
>
> A list that tells Facet which color to show for each value. Write one color per line as `Name: #hex`, for example `Oat: #E4D8C4`. Facet comes with a list of common fashion colors, such as Sage, Camel and Navy, that you can edit or extend.
>
> For each color value, Facet looks for the color in this order:
>
> 1. The Shopify swatch on the value (an image or a color you set in your Shopify admin).
> 2. A matching line in **Color names**. Names match whatever their capital letters.
> 3. The value's name read as a standard web color, such as `Black` or `Navy`.
>
> When none of these match, the swatch shows a neutral fill. A two-tone value written with a slash, such as `Navy/White`, shows both colors split on the diagonal.

> [accordion] Box shape
>
> The corner shape of option boxes and swatches on product pages, product cards, quick view, bundles and filters.
>
> * **Square**: sharp corners.
> * **Rounded** (default): slightly rounded corners (8 pixels).
> * **Pill**: fully rounded. Swatches become circles and text boxes get round ends.

> [!TIP]
>
> The **Color names** list also accepts patterns. The default list includes a striped **Navy Stripe** entry you can copy for your own striped colors.

## Best practices

* **Use Shopify swatches for prints.** For a pattern or a texture, set an image swatch on the option value in your Shopify admin. Facet uses it before anything else.
* **Name colors consistently.** Use the same spelling across products, such as always `Grey` or always `Gray`, and add that spelling to **Color names**.
* **Check pale colors.** Facet draws a thin outline on swatches so white and cream stay visible on a light page. Preview them on your lightest color scheme.

## Related guides

> [card] [Product page](https://docs.shopify.lightsout.agency/themes/facet/products/product-page.md)
>
> Set up the variant picker on product pages.

> [card] [Product cards](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/product-cards.md)
>
> Align the swatches shown on product cards.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.