# Product Swatch

<figure><img src="https://3751104066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJKlAwzeCbxVGW0a9OXJm%2Fuploads%2FVszfuNWrA7mXcAF7EGfE%2F14.jpg?alt=media&#x26;token=d33eb0ad-6dd8-4396-b87d-5d4f91cd443f" alt=""><figcaption></figcaption></figure>

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)

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**.

| 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://3751104066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJKlAwzeCbxVGW0a9OXJm%2Fuploads%2Fte49Ig0lOgYKFMO2qS5C%2Fscreenshort-16.jpg?alt=media&#x26;token=7610991c-4c65-4034-b2b3-7572a7ac79d1" alt=""><figcaption></figcaption></figure>
