> ## 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).

# Quickstart

1. [OPTIS Color Swatch](/swatch)
2. [Getting Started](/swatch/getting-started)

# Quickstart

1. Activate the app

* In the **App Dashboard**, go to **Setup Guide** → click **Activate the app**

→ You’ll be redirected to **App Embed** in the Shopify Theme Editor

![OPTIS Color Swatch App embed in the Shopify Theme Editor](https://storage.crisp.chat/users/helpdesk/website/-/b/b/a/b/bbabfa92c6ec8000/7945378d-cb00-4172-bf19-bfe68a_7bkxch.png)

* Turn on the toggle and click **Save**

![App embed toggle turned on, with the Save button](https://storage.crisp.chat/users/helpdesk/website/-/e/4/c/e/e4ceeaf169493000/d199d669-8a9a-435b-894e-46f9cf_zu3vgc.png)

**Optional (Recommended for testing):** If you want to enable the app on a draft theme instead, go to **Online Store → Themes → Edit theme (selected theme) → App embeds**, then enable the **OPTIS Swatch** app toggle and click **Save**.

_This allows you to fully test the app without affecting your live store._

2. Configure your Shopify variants

* Make sure your products have variants (e.g. Color, Size) → Click **Configure variants** to open **Variants Display**

![Configure variants button opening the Variants Display page](https://storage.crisp.chat/users/helpdesk/website/-/4/d/4/2/4d4261438dfd7000/11965f65-e587-47d1-aac4-87ba12_rufhy0.png)

* Here, you can customize how variants are displayed on Product pages and Collection pages - Choose the display type that fits your store design

![Variants Display page with display type options for product and collection pages](https://storage.crisp.chat/users/helpdesk/website/-/a/0/6/7/a0670f6c9ebab800/3dd56f80-1a8a-40b7-b0b1-7fde54_u5sah4.png)

👉 **Click here to learn** [How to change the variant display](/swatch/variant-display/auto-image-swatch)

3. Make it yours! (optional)

* Click **Style your variants** to open the **Styling Dashboard**

![Style your variants button opening the Styling Dashboard](https://storage.crisp.chat/users/helpdesk/website/-/6/6/8/1/66811308df6bbc00/91e4c852-3022-40ae-b2dc-401ed7_z8ndpf.png)

* Customize how variants look on your store, including size, alignment, colors, spacing, hide extra swatches,...

![Styling Dashboard with size, alignment, color, and spacing options](https://storage.crisp.chat/users/helpdesk/website/-/7/a/4/7/7a47e8240b26fc00/a4bd012e-48b8-4c34-9e3f-ff76a6_fqc1p3.png)

👉 **Click here to learn** [How to customize the swatches' look](/swatch/frequently-asked-questions/is-it-possible-to-customize-how-swatches-look)

You're all set! 🎉 Continue to the next sections to explore advanced settings and customization options.