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

</details>

![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-2aac681ba4d3fb41402e6a56a9fc9fbfe05f5be8%2Fproduct-pages-swatches.jpeg?alt=media)

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

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

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

{% 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](https://help.fluorescent.co/lorenza/product-pages/variant-options/variant-chips).
{% 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](https://help.fluorescent.co/lorenza/product-pages/variant-options/variant-swatches/dynamic-option-availability)

[Show swatches on collection pages](https://help.fluorescent.co/lorenza/collection-pages/product-grid#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" %}

<br>

***

> **Related links**
>
> [Product pages](https://help.fluorescent.co/lorenza/product-pages/product-template)\
> [Product listings](https://help.fluorescent.co/lorenza/products/product-listings)\
> [Variant chips](https://help.fluorescent.co/lorenza/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/lorenza/product-pages/variant-options/variant-swatches.md?ask=<question>
```

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.