> 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/stiletto/product-pages/variant-options/variant-swatches/use-variant-images.md).

# Use variant images

{% hint style="warning" %}
This feature was added in v3.1.0 on March 11, 2024. See our [Changelog](https://github.com/fluorescent/kb-stiletto/blob/main/product-pages/stiletto-help-center/changelog.md) and [theme update guide](/stiletto/general/theme-updates.md) to learn more.\
Use variant images to display as your product's swatches. Upload and select product images in your Shopify admin, and enable the option to use variant images for swatches in your theme settings.
{% endhint %}

<h2 align="center">Enable variant images as swatches</h2>

***

In your theme editor, go to **Theme settings** and open the **Products** tab. Under **Swatches**, select the **Use variant images** option.

{% hint style="info" %}

#### Version update

[Stiletto v5.1.0](https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-swatches/pages/J9rXgmXvITsLLIzjsXoR#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 %}

<h2 align="center">Upload and select variant images</h2>

***

{% hint style="info" %}
If you want to use images for swatches that don't appear in your product's media gallery, [use custom images](/stiletto/product-pages/variant-options/variant-swatches/use-custom-images.md) instead.
{% endhint %}

In your Shopify admin, go to **Products** to upload and select images for your variants, which will appear as product swatches.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

From your Shopify admin:

1. Click **Products** and select the product you want to edit.
2. Under **Variants**, click the **Select image** button to assign an image to each variant.

   > The images will appear as variant swatches. Remember to [enable swatches](/stiletto/product-pages/variant-options/variant-swatches.md#enable-swatches) in your theme settings.
3. Click **Save**.

</details>

> After setting up variant images, [customize swatch styles](/stiletto/product-pages/variant-options/variant-swatches/change-swatch-styles.md) to change the shape, size, and image fit of all product swatches.

***

> **Related links**\
> [Enable swatches](/stiletto/product-pages/variant-options/variant-swatches.md#enable-swatches)\
> [Use default color swatches](/stiletto/product-pages/variant-options/variant-swatches/use-default-colors.md)\
> [Use custom color swatches](/stiletto/product-pages/variant-options/variant-swatches/use-custom-colors.md)\
> [Upload custom image swatches](/stiletto/product-pages/variant-options/variant-swatches/use-custom-images.md)\
> [Change swatch styles](/stiletto/product-pages/variant-options/variant-swatches/change-swatch-styles.md)\
> [Show swatches on product cards](/stiletto/product-pages/variant-options/variant-swatches/show-on-product-cards.md)\
> [Enable dynamic option availability](/stiletto/product-pages/variant-options/variant-swatches/dynamic-option-availability.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-swatches/use-variant-images.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.