> 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/where-swatches-appear.md).

# Where swatches appear

Which pages the app can render on, and how to control placement.

Once the app embed is on, the app renders on the page types listed in the **Showing on** row of the **Storefront status** card: **Product page**, **Collection**, **Home page** and **Search**.

## Product pages

On a product page the app replaces the plain variant picker with the style you chose in **Options** under **Display on Desktop** / **Display on Mobile**.

By default the swatches are placed automatically. To control exactly where they sit, add the app's block in the Theme Editor:

1. Go to **Online Store → Themes → Customize** and open a product template.
2. Click **Add block** in the product information section, choose **Apps**, then **Variant swatches**.
3. Drag the block to the position you want and click **Save**.

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

The block has no settings of its own — everything is configured in the app.

{% hint style="warning" %}
Leave your theme's own **Variant picker** block enabled. The app works alongside it and uses it to tell Shopify which variant is selected. If you end up with two visible pickers, [contact support](/swatch/help/contact-support.md) and we'll hide the duplicate for your theme.
{% endhint %}

## Collection, home, search and other product lists

On product cards the app renders the style set on the **Collection page** tab in **Options**. This is **Do not show (Default)** until you change it — see [Show swatches on collection pages](/swatch/options/show-swatches-on-collection-pages.md).

The same rendering covers product lists on your home page and search results pages, as long as they are your theme's own product cards.

The app may not reach product lists that are built by another app or by a page builder, product carousels injected by third-party apps, or blog and content pages. If swatches show on your collection pages but not somewhere else, that is usually why — [contact support](/swatch/help/contact-support.md) with the page URL and we can look at it.

## The app's other blocks

The app ships three blocks for product templates. All of them are added the same way (**Add block → Apps**) and none of them has settings in the Theme Editor:

| Block name in the Theme Editor | What it renders                                                   |
| ------------------------------ | ----------------------------------------------------------------- |
| **Variant swatches**           | The variant swatch picker on the product page.                    |
| **Product Groups**             | The [product group](/swatch/product-groups/overview.md) selector. |
| **Product Bundles Combo**      | The [product bundle](/swatch/bundles/overview.md) widget.         |

## Themes and page builders without app blocks

Older themes and page-builder templates may not support app blocks. In that case each widget can be placed with a plain container element instead — see [Themes without app blocks](/swatch/app-integrations/themes-without-app-blocks.md) and the [page builder guides](/swatch/app-integrations/overview.md).

## Related pages

* [Turn on the app in your theme](/swatch/getting-started/turn-on-the-app-in-your-theme.md)
* [Show swatches on collection pages](/swatch/options/show-swatches-on-collection-pages.md)