> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/features/product.md).

# Product page & quickview

How the product page, Featured product section, quickview drawer, quick add, upsells, and breadcrumbs work.

Analog can render a product on the product page, in a Featured product section, or in the quickview drawer. They use the same Media and Details blocks, but load and update independently.

## Three separate product views

The product page, each Featured product section, and quickview update separately. Changing a variant in one doesn't update another product form on the same page.

| Surface          | Lives on             | Product source             | Loads                  |
| ---------------- | -------------------- | -------------------------- | ---------------------- |
| Product page     | The product template | The page's product         | With the page          |
| Featured product | Any template         | Its own "Product" picker   | Inline, with the page  |
| Quickview drawer | One global instance  | The URL passed when opened | On demand, when opened |

## The product page

The product page re-renders when the variant, quantity, or selling plan changes. It writes the new state to the URL so browser history works. When the product changes to a [sibling](/features/variants.md), related and recently viewed sections update as they scroll into view.

The page contains a Media block and a Details block. Reorder price, selectors, buttons, and other child blocks inside Details. Use "Desktop columns" to set "Media placement" ("First" or "Second") and "Media width" ("Slim", "Even", "Wide", or "Fill"). "Fill" also shows a pixel "Details width" setting.

## Featured product

Featured product adds a gallery, price, options, and add-to-cart form to any page. Use it for a hero product or a buyable product inside a landing page.

Featured product uses its own "Product" setting and doesn't update the page URL. It has the same block structure as the product page, so its Details blocks can be changed without editing the product template. Multiple Featured product sections update independently. The section is disabled in header, overlay, and drawer groups.

## Quickview drawer

The store has one global quickview drawer. Every quick-view button opens the same drawer.

The drawer starts empty and fetches content when it opens. Quick-view buttons preload on hover or focus and cache the response. Featured product renders with the page instead.

|             | Featured product               | Quickview                         |
| ----------- | ------------------------------ | --------------------------------- |
| Render cost | Paid on page load, every visit | Deferred until open               |
| Instances   | One per placement              | One, shared by all triggers       |
| Best for    | Permanent merchandising        | Low-friction browsing from a grid |

The trigger is a link to the product page. JavaScript intercepts the click to open quickview. Without JavaScript, the link opens the product page.

Two details matter:

* The drawer only renders when "Enable quickview button" is on under theme settings › "Cards". When it is off, the card quick-view buttons hide themselves, so there are no orphaned buttons.
* A quickview opened from the cart drawer returns to the cart drawer on close, and the close icon flips from an ✕ to a chevron to signal it.

The "Product quickview" section in the Overlays group sets the drawer's "Color scheme", "Spacing top", and "Spacing bottom". To open it from your own markup, dispatch the events with a product or variant URL:

```html
<a href="{{ variant.url }}"
   @click.stop.prevent="$dispatch('theme:quickview:open', { url: '{{ variant.url }}' })"
   @mouseover.once="$dispatch('theme:quickview:preload', { url: '{{ variant.url }}' })">
  Quick view
</a>
```

## Quick add

Each product card selects one quick action based on the remaining product options. Enable the actions under Theme settings › Cards › "Product quick add":

| Toggle                    | When the card uses it                           | What the button does                                                  |
| ------------------------- | ----------------------------------------------- | --------------------------------------------------------------------- |
| "Enable one-click button" | Nothing is left to choose                       | Adds the product to the cart in one click                             |
| "Enable quick add button" | One short option remains (a size, a pack count) | Expands that option's values inside the card; picking a value adds it |
| "Enable quickview button" | More options than fit in a card                 | Opens the [quickview drawer](#quickview-drawer)                       |

A color option shown as card swatches doesn't count as a remaining choice. The shopper has already selected it on the card, so a color-and-size product can use quick add for the sizes. A long list or long value names fall back to quickview. Products with selling plans also use quickview because the plan is selected there.

With a mouse, the buttons appear when the pointer is over the card; on touch screens they are always visible.

## Upsell & complementary products

The Upsell and Complementary products blocks are under "Additional product info" in the Details block picker. Both render mini product cards. A single-variant product adds to cart in one click. A product with variants opens [quickview](#quickview-drawer). Sold-out products are removed automatically. Use single-variant products when possible since they have the shortest add-to-cart flow.

### Upsell

Start by selecting "Products" in the Upsell block. These products appear for every product that uses the template. Connect "Products" to a dynamic source when you want product-specific cross-sells in this block. "Product limit" caps the list at 3.

#### Paired product upsells

Use the shared upsell metafield for a product pairing that should also carry into the cart. Matching laces for a shoe or a matching leash for a surfboard are good examples.

1. In Shopify admin, create a Product metafield definition with the **List of products** type, for example `theme.upsell_list`.
2. Enter its `namespace.key` under Theme settings › Metafields › "Upsell metafield".
3. Leave "Products" empty in the Upsell block and turn on "Use paired upsells".

Products selected in the block take priority over the metafield. If both are empty, the block stays hidden on the live store. A Cart upsell block can [prioritize the same pairings](/features/cart.md#paired-product-upsells).

### Complementary products

The Complementary products block uses pairings from Shopify's [Search & Discovery](https://apps.shopify.com/search-and-discovery) app. Install the app and set the complementary products there. "Product limit" caps the list at 10. The block renders nothing on the live store when there are no pairings. The theme editor shows a loading skeleton so you can still select and style it. When a shopper switches to a sibling or combined-listing product, the block loads that product's pairings.

## Breadcrumbs

Breadcrumbs use a selected list of collections. Shopify doesn't define one parent collection for a product, so Analog can't build the trail automatically. The product title is added as the final unlinked item.

Turn on "Enable breadcrumbs" and select "Breadcrumb collections". For a different trail per product, connect the setting to a metafield as a dynamic source. See the [metafields reference](/reference/metafields.md) for the data shape. "Desktop position" places the trail "Above content" or "Above media" (mobile always renders above the media; the quickview has no position option). "Text style" and "Link style" cover typography and the link treatment.

With no collections set, the trail is hidden on the live store. The theme editor shows an "add collections" prompt.

## Recipes

### Hero product on the home page

Use a Featured product section to make the first screen buyable:

* Add section: Featured product
* Featured product › Product: pick the hero product
* Desktop columns › Media placement: "First"
* Desktop columns › Media width: "Even"

### Quickview from collection cards

Use the global toggle and style the one drawer every card shares:

* Theme settings › Cards › Product quick add › Enable quickview button: on
* Overlays group › Product quickview › Color scheme: match the storefront

### Curated breadcrumb trail

Use a fixed collection path to place the product in your navigation story:

* Product page › Breadcrumbs › Enable breadcrumbs: on
* Breadcrumbs › Breadcrumb collections: the collections, in trail order
* Breadcrumbs › Desktop position: "Above content"

## See also

* [Siblings & grouped variants](/features/variants.md): product swaps and option media
* [Cart page & drawer](/features/cart.md): add-to-cart behavior
* [Badges, ratings & preorder](/features/merchandising.md): labels on cards and product pages
* [Metafields reference](/reference/metafields.md): per-product data shapes