# Quickstart

{% stepper %}
{% step %}

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

<figure><img src="/files/wRCvkCBUUaYZrrerfKOA" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/A2xmT4rYgK7Sai1GAxln" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**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.*
{% endhint %}
{% endstep %}

{% step %}

### Configure your Shopify variants

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

<figure><img src="/files/KUUx4k17BPLh2OBRyHuG" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/O6S1qPl9Z8fLjitBZWgT" alt=""><figcaption></figcaption></figure>

👉 **Click here to learn** [**How to change the variant display**](/swatch/variant-display/auto-image-swatch.md)
{% endstep %}

{% step %}

### Make it yours! (optional)

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

<figure><img src="/files/Lki15YSUkCnJKzJm7Wkk" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/3abjdy7vAvUecsgt5vOY" alt=""><figcaption></figcaption></figure>

👉 **Click here to learn** [**How to customize the swatches' look**](/swatch/frequently-asked-questions/is-it-possible-to-customize-how-swatches-look.md)
{% endstep %}
{% endstepper %}

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.optis.me/swatch/getting-started/quickstart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.