> 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/change-swatch-styles.md).

# Change swatch styles

Modify the appearance of variants swatches by changing the **Shape** and **Size**. You can also change the **Media fit** for images used as swatches.

### <mark style="color:$primary;">Swatch size</mark>

Set the swatch Size for specific product templates.

<details>

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

In your theme editor (**Customize**):

1. Open a **Product template** with the template selector in the top bar.
2. Click on the **Variant selector** block to open the settings.
3. Set the **Swatch size** to **Small**, **Medium**, or **Large**.

   ![](/files/iM4CQ6u3j7H0ZEDp96bY)

   > This option applies only to the current product template.
4. Click **Save**.

</details>

### <mark style="color:$primary;">Change swatch shape</mark>

Display all swatches with a **rectangular** or **square** shape. Go to *Theme settings > Swatches > Swatch shape.*

You can adjust the corner radius in *Theme settings > Corner rounding > Swatches*.

### <mark style="color:$primary;">Swatch image fit</mark>

If using custom or variant images for swatches, choose to have the images **Fill** the swatch area or **Contain** the image to show the full image without cropping.

Go to *Theme settings > Product*, then set Media fit to **Fill** or **Contain.**

<br>

***

> **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)\
> [Use variant image swatches](/stiletto/product-pages/variant-options/variant-swatches/use-variant-images.md)\
> [Upload custom image swatches](/stiletto/product-pages/variant-options/variant-swatches/use-custom-images.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)