> 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/globo-combined-listings/storefront/storefront.md).

# Where widgets appear

Once the [app embed is on](/globo-combined-listings/getting-started/enable-the-app.md) and a group is **Active**, its option widgets render on three storefront surfaces automatically:

<figure><img src="/files/NM1GiSXM2Lltd9mYPguO" alt="One active group renders on the product page, on collection cards, and inside the quick view modal"><figcaption><p>One active group renders on all three surfaces — no extra setup per surface.</p></figcaption></figure>

## Product page

The full widget for every option set to *show on product page*. Selecting a value navigates the shopper to the linked product (title, price, images, and URL all switch to the real product).

<figure><img src="/files/okifJnMzUHCgzN7OfUmp" alt="Storefront product page widget below the price with one value selected"><figcaption><p>The full widget renders below the price, with the active value highlighted.</p></figcaption></figure>

* Default position: injected automatically near the product form.
* Want exact placement? Add the optional [product page block](/globo-combined-listings/storefront/product-page-block.md).

## Collection cards

A compact widget on product cards in collections, search results, and featured-product sections. It renders every option whose card style isn't **Hidden**.

Clicking a value follows your [Settings](/globo-combined-listings/settings/settings.md#when-clicking-options-on-product-card) choice:

* **Update the price, image, and title on the card** (default) — the card's price, image, and title switch in place to the selected product.
* **Redirect to product details page** — jump straight to that product.

<figure><img src="/files/Gs0LWMiC8D0v6VmzKAhl" alt="Collection grid with one product card mid-swap after clicking a swatch"><figcaption><p>Clicking a swatch on a collection card swaps its image instantly.</p></figcaption></figure>

## Quick view / quick add

When your theme opens a quick-view or quick-add modal, the widget appears inside it and updates the modal in place when the shopper switches values.

## Shared behavior

* **Sold-out & unlinked values** — values whose product is unavailable (or no longer linked) are visually disabled per your style's [sold-out effect](/globo-combined-listings/styles/customize-a-style.md#sold-out-effect), with proper screen-reader labels.
* **Prices** — templates that display prices show them in the shopper's local currency.
* **Tooltips** — hover tooltips stay within the screen edge automatically.
* **Performance** — widgets load lazily (cards only when scrolled into view) and product pages can paint the widget server-side; the base script is under 2 KB. See [How it works](/globo-combined-listings/reference/how-it-works.md).

## In this section

* [Product page block](/globo-combined-listings/storefront/product-page-block.md) — pin the widget's exact position.
* [Theme compatibility](/globo-combined-listings/storefront/theme-compatibility.md) — verified themes and fallbacks.