> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.optis.me/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Swatch 1. [OPTIS Product Options, Variant](/product-options) 2. [20 Option Types](/product-options/20-option-types) 3. [Swatch & Button](/product-options/20-option-types/swatch-and-button) # Swatch A **Swatch** shows each value as a color block or a small image instead of a list, so customers can visually pick a color, style, or material. ✨ [Demo store](https://optis-product-options-variant.myshopify.com/products/swatch?variant=51025989075222) ![](https://storage.crisp.chat/users/helpdesk/website/-/6/9/5/6/6956af5a9d25a000/386a46fd-fe55-43c2-b50b-0e26b5_iglgs4.png) ## When to use a Swatch * **Color selection** for apparel or accessories. * **Material or texture choice** for furniture and home decor. * **Visual personalization** - monogram styles, finishes, and more. ## How to add a Swatch option ### Step 1: Add the option Open **1. Add options**, click **Add option**, tick **Swatch** under **Swatch** on the **New options** tab, then click **Add options**. ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/a/b34a96f541875800/4dcf0ea2-e7ac-4d3b-9249-982356_2weobx.png) ### Step 2: Name it, add values and set each swatch Enter the **Label on product** (e.g., "Choose Color") and add the **Option values** (e.g., Red, Blue, Black). Tick **Required field** if customers must choose before checking out, or **Hide option label** to hide the label. ![](https://storage.crisp.chat/users/helpdesk/website/-/e/9/d/d/e9dda6184042d000/69a19bf9-5cde-4ff6-9cfd-09bb48_6irdxl.png) For each value, choose: * A **color swatch** (solid color) ![](https://storage.crisp.chat/users/helpdesk/website/-/8/1/9/8/81981c3bd61d2000/ca22460c-677a-4ec2-8a95-a308ba_7mw2fg.png) * Or an **image swatch** (upload your own image) ![](https://storage.crisp.chat/users/helpdesk/website/-/9/7/e/3/97e3633b918b3800/73bf8b62-0361-4cc3-bb83-b07baf_12kvix3.png) Tick **Show option value label** if you also want the value's name shown next to the swatch, then choose a **Label position**: **Below the swatch**, **Below the swatch with a border**, **Next to the swatch**, or **Next to the swatch with a border**. ### Step 3: Save and test Click **Save**, then open the product page on your store to check that the Swatch works correctly. ![](https://storage.crisp.chat/users/helpdesk/website/-/e/b/e/7/ebe73b15c942e800/ddce0f8e-be12-474f-95f8-930cfb_1kg5i7d.png) ## Option settings Set only what you need - all of the settings below are optional. In the **Option values** table, click **Columns** to show **Add-on**, **Help text**, **SKU** or **Quantity** for each value: * **Add-on** - charge extra for a value (**Extra fee**, Advanced plan and above) or link it to a Shopify variant (**Upsell product**, Platinum and above). See [Manage add-on (additional fee for option)](/product-options/advanced-setup/manage-add-on-additional-fee-for-option). * **SKU** - a SKU for that value. Advanced plan and above. See [How does Product Option SKU works?](/product-options/customize-design/how-does-product-option-sku-works). ![](https://storage.crisp.chat/users/helpdesk/website/-/1/6/3/4/16348e81ba7f4e00/f24a00f0-5ce3-4ae1-8a84-2fe150_1n7y33u.png) ### Default value Toggle **Default** for the value that should be pre-selected when the customer opens the product page (e.g., "Black" selected automatically). ![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252F25xfk9TniaMuaNTbOcT9%252F35.png%3Falt%3Dmedia%26token%3D71accb5e-780b-4346-b62b-103e3b851ca1&width=768&dpr=3&quality=100&sign=b6f1331bfbc8bbe6ba2c00efd4fb8cee&sv=3) How it looks on your storefront: ![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FwLW2Tnirjy6i0Un6Ra2p%252F36.png%3Falt%3Dmedia%26token%3Db2e4c19c-3e32-4f70-9c31-8dd89cf43810&width=768&dpr=3&quality=100&sign=ea2c1a25e6d77eab8acb7042cec4e97e&sv=3) ### Quantity Turn on the **Quantity** column so customers can pick several values and set how many of each, using **Min quantity** and **Max quantity**. Available on the **Platinum** plan and above. See [How to Use the "Quantity" Feature for Options](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options). ![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FFMS1G8lIQMtSVVLycr4F%252Fimage.png%3Falt%3Dmedia%26token%3D099432ce-1246-41fa-a378-36f1fa98c3cc&width=768&dpr=3&quality=100&sign=af8de0eec4a37f04668cf3bbd024c034&sv=3) ### Limit how many values can be selected Set **Min** and **Max** to control how many values a customer can pick. If they pick fewer or more than allowed, OPTIS shows a message below the field, e.g. **Min selector: 2** or **Max selector: 5**. Available on the **Advanced** plan and above. See [Limit Min/Max Selectors](/product-options/faq/limit-min-max-selectors-in-checkbox-button-options-swatch). ![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252Fo8gUmmLkVwtvGRvJJOB0%252Fimage.png%3Falt%3Dmedia%26token%3D706e0fdd-e085-4262-940e-a8c5bd037d47&width=768&dpr=3&quality=100&sign=f02ea5eb425d5a963a7cc3a339efe238&sv=3) ### Help text Add a short note explaining what to choose, shown as a **Tooltip**, **Below the option title**, **Beside the option title**, or **Below the option**. Available on the **Platinum** plan and above. ![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FTTd0Z02tyJJgBCQqIle2%252F9.png%3Falt%3Dmedia%26token%3D3f4c410a-1b59-48ea-b53a-d606ebed96fd&width=768&dpr=3&quality=100&sign=acf10114cb9a3fe653310d8cfd264b75&sv=3) ### Preview the choice on the product (live mockup) Show customers what their selected swatch looks like on the product image, updated in real time. Available on the **Platinum** plan and above. See [Product Personalizer - Live Mockup Settings](/product-options/advanced-setup/product-personalizer-live-mockup-settings). ![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FYqgYKLOJ417HCsS9E8pY%252F12.png%3Falt%3Dmedia%26token%3D847e906d-cce5-4858-b0a4-95ee70380035&width=768&dpr=3&quality=100&sign=54a99967f9d65fa4031f0d2dac624a5d&sv=3) ### Show or hide with Visibility (conditional logic) Show or hide the Swatch based on another option. Available on the **Advanced** plan and above. See [How to set up Conditional logics?](/product-options/advanced-setup/how-to-set-up-conditional-logics). ![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FU4KYCm0v7rrVW1pU5utd%252Fimage.png%3Falt%3Dmedia%26token%3D37807e3e-ad52-4be7-986e-d8e7789bd990&width=768&dpr=3&quality=100&sign=9b7c88b5db0f26f0b06ddb9691b25dd9&sv=3) ### Layout In the **Display** tab: set **Option width** (**25%**, **33%**, **50%**, **67%**, **75%** or **100%**) to control how much horizontal space the option takes, and **Option value orientation** (**Horizontal** or **Vertical**) to lay the values out in a row or stack them. ![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FmHWCYhQUjXha32DZdtnD%252Fimage.png%3Falt%3Dmedia%26token%3De24dda62-882b-4294-a4ae-617a440ac129&width=768&dpr=3&quality=100&sign=afb134167ed17345e70e8c56ef4d0e5a&sv=3) ## Related guides * [Button](/product-options/20-option-types/swatch-and-button/button) * [Manage add-on (additional fee for option)](/product-options/advanced-setup/manage-add-on-additional-fee-for-option) * [How to Use the "Quantity" Feature for Options](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options) * [Limit Min/Max Selectors](/product-options/faq/limit-min-max-selectors-in-checkbox-button-options-swatch) * [Product Personalizer - Live Mockup Settings](/product-options/advanced-setup/product-personalizer-live-mockup-settings) * [How to set up Conditional logics?](/product-options/advanced-setup/how-to-set-up-conditional-logics)