> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/lorenza/product-pages/variant-options/variant-swatches.md).

# 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 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](/lorenza/product-pages/variant-options/variant-swatches/use-default-colors.md) or that your [image files](/lorenza/product-pages/variant-options/variant-swatches/use-custom-images.md) match your variant names.

</details>

![](/files/m0HiwQbSt0lvlwWkabR0)

## **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](/lorenza/product-pages/variant-options/variant-swatches/enable-swatches.md)

[Use default colors for swatches](/lorenza/product-pages/variant-options/variant-swatches/use-default-colors.md)

[Upload custom images for swatches](/lorenza/product-pages/variant-options/variant-swatches/use-custom-images.md)

{% hint style="info" %}
You can also enable **Variant chips** on product pages, which display product options as a row of clickable buttons with the variant name as the label. See the [variant chips guide](/lorenza/product-pages/variant-options/variant-chips.md).
{% endhint %}

### **Appearance settings**

You can choose to show swatches on products cards when hovered over anywhere on your site. Lorenza also has **Dynamic option availability** that grays out swatches of out-of-stock variants.

[Enable dynamic option availability](/lorenza/product-pages/variant-options/variant-swatches/dynamic-option-availability.md)

[Show swatches on collection pages](/lorenza/collection-pages/product-grid.md#shows-swatches)

## Watch tutorial

Watch the tutorial video for setting up swatches, including default colors, and custom images. **Note: Custom colors are not available in Lorenza.**

{% embed url="<https://www.youtube.com/watch?v=VZrge6ecwIY>" fullWidth="false" %}

\\

***

> **Related links**
>
> [Product pages](/lorenza/product-pages/product-template.md)\
> [Product listings](/lorenza/products/product-listings.md)\
> [Variant chips](/lorenza/product-pages/variant-options/variant-chips.md)