# 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](https://help.fluorescent.co/stiletto/general/theme-updates) 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 %}

## Enable variant images as swatches

***

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/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 %}

## Upload and select variant images

***

{% hint style="info" %}
If you want to use images for swatches that don't appear in your product's media gallery, [use custom images](https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-swatches/use-custom-images) 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](https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-swatches/..#enable-swatches) in your theme settings.
3. Click **Save**.

</details>

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

***

> **Related links**\
> [Enable swatches](https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-swatches/..#enable-swatches)\
> [Use default color swatches](https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-swatches/use-default-colors)\
> [Use custom color swatches](https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-swatches/use-custom-colors)\
> [Upload custom image swatches](https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-swatches/use-custom-images)\
> [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)\
> [Enable dynamic option availability](https://help.fluorescent.co/stiletto/product-pages/variant-options/variant-swatches/dynamic-option-availability)