---
title: Product Swatches
description: "Settings for product swatch on product detail page. Select swatch style from **Product Main -> Variant Picker** [![product-swatch](https://adornthemes.com/wp-content/uploads/2025/04/product-swatch.png)](https://adornthemes.com/wp-content/uploads/2025/04/product-swatch.png) --- Please make sure that you set variants for your products in order to**display product swatches** on your store. From **Shopify admin**…"
url: "https://www.adornthemes.com/knowledge-base/product-swatches/"
updated: "2025-07-01"
category: Theme Settings
---

# Product Swatches

Settings for product swatch on product detail page. Select swatch style from **Product Main -> Variant Picker**

 [![product-swatch](https://adornthemes.com/wp-content/uploads/2025/04/product-swatch.png)](https://adornthemes.com/wp-content/uploads/2025/04/product-swatch.png)

---

Please make sure that you set variants for your products in order to**display product swatches** on your store.

From **Shopify admin** > **Products** > **Select**product to add variants > Scroll down to **Variants** > Click ➕Icon to **Add** **Variants** and add color, size, etc as your products suit.

 ![](https://adornthemes.gitbook.io/~gitbook/image?url=https%3A%2F%2F1708375644-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FrsFZ0qmgr873lDxCKvMZ%252Fuploads%252FnFLskeWkM1NOCIJTFPpQ%252Fproduct-swatch.jpg%3Falt%3Dmedia%26token%3D88044a27-d214-48d0-bf0d-68951e6c0039&width=768&dpr=1&quality=100&sign=27720751&sv=2)

---

Configure the swatch’s background, text, border, active swatch colors, border radius, and other settings as specified.