> 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/getting-started/integrate-app-to-theme.md).

# Integrate app to theme

The app connects to your storefront through a Shopify app embed — a theme block that Shopify lets you turn on or off directly from the Theme Editor.

## What this does

In practice, the app embed is a single toggle inside Shopify's Theme Editor (under the small grid icon in the top toolbar), sitting alongside any other app embeds your theme has installed. Flip it on and, on your next storefront page load, the filter panel appears on collection pages, the search box takes over your theme's existing search field, and recommendation blocks render wherever you've placed them — all without a developer opening a single theme file. Flip it off and all three disappear just as immediately, leaving the rest of your theme untouched. Concretely, this means:

* No manual code edits to `theme.liquid` or any other theme file are required.
* Turning the app on or off takes effect immediately, without a developer.
* The app embed only loads the filter/search/recommendation widgets — it does not otherwise modify your theme.

## Prerequisites

* You should have already synced your products at least once (see [Sync Product Data](/getting-started/sync-product-data.md)) so there is data for the widgets to display once enabled.

## Enable the app on your live theme

1. From the app's **Home** dashboard, find the **App embed** card. It shows whether the app is currently **Active** on your theme.

   ![Home dashboard — App embed card](https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fgit-blob-be6a5b3346d05ed36c35c98e08b1aec64edb06af%2Fhome-dashboard-app-embed-card.png?alt=media)
2. Click **Integrate theme**. In the **Theme Integrate** dialog, select the theme you want to enable the app on from the dropdown (it defaults to your current theme), then click **Apply Filter**.

   ![Theme Integrate — select a theme, then click Apply Filter](https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fgit-blob-d1528d564b7805dd16831fd50a8564c1b31569fb%2Ftheme-integrate-modal-select.png?alt=media)
3. A confirmation step appears telling you to enable the app's embed blocks in **Theme > Customize > App embeds**. Click **Go to Theme > App embeds**.

   ![Theme Integrate — Go to Theme → App embeds](https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fgit-blob-2f98cc7562de0bfa9f7b7103290fee7e4df90556%2Ftheme-integrate-modal-goto-embeds.png?alt=media)
4. This opens your theme's Shopify **Theme Editor** with the **App embeds** panel already selected, and the toggle for **Product Filter & Search** already turned **on**.

   ![Theme Editor — App embeds panel with the toggle already on](https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2Fgit-blob-92fc2ebfc85ec47b507f1accc07fe415d289ce0b%2Ftheme-editor-app-embed-toggle-on.png?alt=media)
5. Click **Save** in the Theme Editor to confirm.

Once saved, filters will appear on your collection pages and the instant search widget will appear wherever your theme's search box is, based on the settings you configure in the app — see [Configure filter sidebar](/filters/configure-filter-sidebar.md) and [Enable instant search widget](/search/enable-instant-search-widget.md).

## Enabling on a draft/duplicate theme

If you want to preview the app before publishing it to customers:

1. In Shopify Admin, go to **Online Store > Themes** and duplicate your live theme (or use an existing draft theme).
2. Open that draft theme in the Theme Editor and repeat the steps above to turn the app embed on.
3. Preview the draft theme to check filters and search before publishing it live.

The app tracks app-embed status per theme, so you can safely enable it on a draft theme without affecting your live store.

## If something looks off after enabling

* Give the page a hard refresh — some themes cache the storefront JavaScript.
* Confirm the app embed toggle is on for the **specific theme** you're viewing (live vs. draft themes are tracked separately).
* Check that product sync has completed — an incomplete sync can make filters/search appear empty. See [Sync Product Data](/getting-started/sync-product-data.md).

## For developers

* The app embed is delivered as a standard Shopify **theme app extension** block. It does not require Liquid edits, but if your theme has heavy custom CSS, you may need to adjust spacing/positioning around the filter panel and search box using your theme's own CSS — the app exposes CSS classes on its wrapping elements for this purpose.
* If you use a custom or heavily modified theme, verify the filter panel snippet renders in the expected location (usually the collection page sidebar) after enabling the app embed, since custom collection templates can vary.

## Related pages

* [Getting Started](/getting-started/getting-started.md)
* [Supported Shopify themes](/getting-started/supported-shopify-themes.md)
* [Disable app from theme](/getting-started/disable-app-from-theme.md)