> For the complete documentation index, see [llms.txt](https://templatescoder.gitbook.io/pizzon-shopify-theme-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://templatescoder.gitbook.io/pizzon-shopify-theme-documentation/theme-settings/product-card/product-swatch.md).

# Product Swatch

You add variants to a product that comes in more than one option, such as size or color. Each combination of option values for a product can be a variant for that product.

For example, suppose that you sell T-shirts with two options: size and color. The size option has three values: small, medium, and large. The color option has two values: blue and green. One specific variant from these options is a small, blue T-shirt. Read official documentation [<mark style="color:orange;">how to add variants</mark>](https://help.shopify.com/en/manual/products/variants/add-variants)

{% hint style="success" %}
**Steps:**

1. From your Shopify admin, go to **Online Store -> Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Theme settings -> Product Card -> Product Swatch**.
   {% endhint %}

| Setting                  | Description                                                                                                               |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
| Product Swatch?          | Toggle to show or hide product swatches on Product Card.                                                                  |
| Size of Swatch on PC     | Fill in the desired size of a swatch on Product Card on Desktop.                                                          |
| Size of Swatch on Mobile | Fill in the desired size of a swatch on Product Card on Mobile.                                                           |
| Size of (+Number)        | Determine the font size of the text showing the remaining number of swatches if the total swatches amount is more than 3. |

<figure><img src="https://content.gitbook.com/content/SkIHgFDpy0SIeYlayaAb/blobs/ZhU62ImI1siCYlg0kc3d/screenshort-16.jpg" alt=""><figcaption></figcaption></figure>