> 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/turn-on-the-app-in-your-theme.md).

# Turn on the app in your theme

Activate the app embed so swatches, product groups and bundles render on your storefront.

The app reaches your storefront through a Shopify **app embed** — a switch inside the Theme Editor. Until it is on, nothing the app does in the admin shows up for shoppers. Turning it off removes the swatches again and leaves the rest of your theme untouched.

## Turn it on

{% stepper %}
{% step %}

### Open the app embed from the app

On the app's **Home** page, click **Turn on app embed** and click **Open theme editor**.

If you've dismissed the Setup guide, the **Storefront status** card takes its place — use the **Turn on app embed** link there instead.

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

{% step %}

### Switch the embed on

The Theme Editor opens with the **App embeds** panel selected and **Globo Color Swatch** ready. Turn its toggle on.

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fgit-blob-98b678630b39921381af4b341949a8ce67ba15a4%2Fimage%20(4).png?alt=media" alt=""><figcaption><p>Theme Editor App embeds panel with the Globo Color Swatch toggle on</p></figcaption></figure>
{% endstep %}

{% step %}

### Save

Click **Save** in the Theme Editor. Reload a product page on your storefront to see the swatches.
{% endstep %}

{% step %}

### Check the status

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fgit-blob-3e633edefa43d8178c000dd9750cda3278286999%2Fimage%20(22).png?alt=media" alt=""><figcaption><p>It shows <strong>Live</strong> in Storefront status</p></figcaption></figure>
{% endstep %}
{% endstepper %}

## Check the status any time

The **Storefront status** card on the app's Home page shows:

* **App embed** — **Enabled on your live theme** or **Not enabled on your live theme**, with a link to turn it on or off.
* **Active app blocks** — how many of the app's blocks are detected across your theme.
* **Showing on** — the page types swatches can appear on: **Product page**, **Collection**, **Home page**, **Search**.

A badge reads **Live** when the embed is active, and **Off** when it isn't.

{% hint style="info" %}
The status reflects your **published** theme only. If you're testing on a draft theme, open that theme in the Theme Editor and turn the embed on there as well.
{% endhint %}

## Extra settings on the app embed

The **Globo Color Swatch** app embed itself has two fields in the Theme Editor:

| Setting        | What it does                       |
| -------------- | ---------------------------------- |
| **Custom css** | Add custom styles to Color Swatch. |
| **Custom js**  | Add custom js to Color Swatch.     |

Most stores never need these. For style tweaks, prefer **Appearance** or [Custom CSS](/swatch/settings/custom-css.md) in the app, which stay with the app when you change themes.

## Try it on a draft theme first

1. In Shopify admin, go to **Online Store → Themes** and duplicate your live theme.
2. Open the duplicate in the Theme Editor, go to **App embeds** and turn **Globo Color Swatch** on.
3. Preview the draft theme and check your product and collection pages before publishing.

## Related pages

* [Quickstart](/swatch/getting-started/quickstart.md)
* [Where swatches appear](/swatch/getting-started/where-swatches-appear.md)
* [Themes without app blocks](/swatch/app-integrations/themes-without-app-blocks.md)