# Variant swatches Display your product variants as **Swatches** to make it easy for customers to view your product options at a glance. Instead of a dropdown menu, swatches visually represent your variants as a row of clickable buttons. You can add swatches using default or custom **colors**, or you can use variant or custom **images** to represent your product variants more precisely.
Why are my swatches blank? If your swatches appear blank, make sure that you are using an existing default color or that your image files and custom swatch names match your variant names. You may also need to add [custom swatches for multiple languages](https://help.fluorescent.co/stiletto/product-pages/variant-options/use-custom-colors#add-custom-colors).
## Enable swatches *** In the theme editor, enable swatches in your theme settings by adding the option name for your product variants. You can enable swatches for multiple product options. If your store uses **multiple languages**, make sure to add the translated product option names for each language. {% hint style="info" %} If you want to set up variants as individual products with their own images and details, learn how to set up [Sibling product swatches.](https://help.fluorescent.co/stiletto/product-pages/variant-options/sibling-product-swatches). {% endhint %}
STEPS In your theme editor (**Customize**): 1. Click **Theme settings**, then click **Product**. 2. Enter the exact product option name in the **Option for swatches** field (e.g. "Material"). > For multiple product options, enter all product option names, separated by commas (e.g. "Color, Material, Style"). > If your store uses multiple languages, enter the translated names of the product options for each language, separated by commas (e.g. "Color, Couleur, Farbe"). ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-ead679cd552cd7779d3678826ac8d915ae292cef%2Fswatches-option-languages.jpeg?alt=media) 3. Click **Save**.
## Set up swatch colors or images *** Choose one of four ways to add swatches. {% hint style="info" %} #### Version update [Stiletto v5.1.0](https://help.fluorescent.co/stiletto/readme/changelog#id-5.1.0-latest-release) added support for Shopify’s built-in swatches feature. If you've added custom colors or images using Shopify’s category metafields, those swatch values will be used by default on product pages, product cards, and filter options. Learn more about [adding swatches with category metafields](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields). {% endhint %} | [Use default colors](https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-swatches/use-default-colors) | Use default color names for your variants to show one of 140 colors. | | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | | [Use custom colors](https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-swatches/use-custom-colors) | Use hexcodes to show custom web colors. | | [Use variant images](https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-swatches/use-variant-images) | Use variant images uploaded to your product's media gallery. | | [Use custom images](https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-swatches/use-custom-images) | Upload custom images uploaded to your store. | ### Appearance settings *** You can choose to show swatches on products cards when hovered over anywhere on your site. Stiletto also has [Dynamic option availability](https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-swatches/dynamic-option-availability) that grays out swatches of out-of-stock variants. [Change swatch styles](https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-swatches/change-swatch-styles) [Show swatches on product cards](https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-swatches/show-on-product-cards) {% columns %} {% column width="41.66666666666667%" %} ## Watch tutorial Watch the tutorial video for setting up swatches, including default colors, custom colors, and custom images. {% endcolumn %} {% column width="58.33333333333333%" %} {% embed url="" fullWidth="false" %} {% endcolumn %} {% endcolumns %}
*** > **Related links** > > [Product pages](https://help.fluorescent.co/stiletto/product-pages/product-template)\ > [Product listings](https://help.fluorescent.co/stiletto/products/product-listings)\ > [Variant chips](https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-chips) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-swatches.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.