# Variant swatches

{% hint style="danger" %} <mark style="color:red;">Theme retirement</mark> | Context is no longer available on the Shopify theme store. **Theme support and updates for current users will end after May 18, 2024**. [Learn more here](https://help.fluorescent.co/context/readme/theme-retirement).
{% endhint %}

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 colors** added to your theme settings. You can also **upload custom images** to represent your product variants more precisely.

<details>

<summary><mark style="color:blue;"><strong>Why are my swatches blank?</strong></mark></summary>

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 image files for multiple languages](https://help.fluorescent.co/context/product-pages/variant-swatches/use-custom-images).

</details>

## **Set up swatches**

Swatches are enabled in your theme settings by adding the option name for your variants. You can add swatches using **default colors** or you can **upload custom images**.

\[***Required***] [Enable variant swatches](https://help.fluorescent.co/context/product-pages/variant-swatches/enable-swatches)

[Use default colors for swatches](https://help.fluorescent.co/context/product-pages/variant-swatches/use-default-colors)

[Upload custom images for swatches](https://help.fluorescent.co/context/product-pages/variant-swatches/use-custom-images)

### **Appearance settings**

You can choose to show swatches on products on collection pages when hovered over.

[Show swatches on collection pages](https://help.fluorescent.co/context/collection-pages/product-grid#show-swatches)<br>

***

> **Related links**
>
> [Product pages](https://help.fluorescent.co/context/product-pages/product-template)