> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/swatch/getting-started/quickstart.md).

# Quickstart

From installed app to clickable swatches on your storefront.

The app's **Home** page has a **Setup guide** card that walks you through the same four steps. This page is the long version of it.

{% stepper %}
{% step %}

### Open the app

In your Shopify admin, go to **Apps** and open **GLO Color Swatch**. You'll land on the Home page
{% endstep %}

{% step %}

### Turn on the app in your theme

Nothing from the app reaches your storefront until its **app embed** is active on your live theme.

On the Home page, click **Turn on app embed** — this opens Shopify's Theme Editor with the app embed ready to switch on. Click **Save**.<br>

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fgit-blob-c0303d8b7b1387895c49b60185ddd9ebf5a9d32d%2Fenable-app-embed%20(not%20on%20yet).jpg?alt=media" alt=""><figcaption></figcaption></figure>

See [Turn on the app in your theme](/swatch/getting-started/turn-on-the-app-in-your-theme.md) for the full walkthrough, including draft themes.

{% hint style="warning" %}
Switching to a different Shopify theme does not carry the app embed across. Turn it on again on the new theme.
{% endhint %}
{% endstep %}

{% step %}

### Set up color and image swatches

Go to **Options**. The app lists every product option it found in your catalog (Color, Size, Material…), how many products use it, and whether it is **Ready** or **Needs setup**.

For each option, pick how it should look under **Display on Desktop**, then click **Set swatches** to give every value a color or an image.

See [Choose a display style](/swatch/options/choose-a-display-style.md) and [Set color and image swatches](/swatch/options/set-color-and-image-swatches.md).

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fgit-blob-07412a6c8a756e3b876ded910a19bcd50296962c%2Fimage%20(20).png?alt=media" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Adjust the appearance

Go to **Appearance** to customize the style you selected, including — shape, size, spacing, borders, hover effects, how sold-out values look, and more.\
\
Each style is configured separately for the **Product page** and the **Collection page**.

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fgit-blob-663f2e7b3eba875079f75bb8e46862b4f9c24d26%2Fimage%20(2).png?alt=media" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
See [Customize a swatch style](/swatch/appearance/customize-a-swatch-style.md).
{% endstep %}

{% step %}

### Check the storewide settings

Go to **Settings** for the options that apply across your store: tooltips, grouping images by swatch, requiring an option before add to cart, how swatches behave on collection pages, and an **Add to cart** button on product cards.

See the [Settings](/swatch/settings/general.md) section.
{% endstep %}

{% step %}

### View it on your storefront

Open a product page on your live storefront. Your options now appear as swatches instead of the theme's plain variant picker.

{% hint style="info" %}
Keep your theme's own variant picker enabled. The app listens to it to know which variant is selected — hiding it can cause the wrong variant to be added to the cart. See [FAQ and troubleshooting](/swatch/help/faq-and-troubleshooting.md).
{% endhint %}
{% endstep %}
{% endstepper %}

## Next steps

* [Sync product data](/swatch/getting-started/sync-product-data.md) — run this after you add new products or variants.
* [Group images by swatch](/swatch/assign-images/group-images-by-swatch.md) — show only the images that match the selected variant.