> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/drift-shopify-theme/drift-starter/sections-and-features/product-stack.md).

# Product Stack (PDP)

DRIFT's product page (PDP) layout — a vertical media gallery with the product info panel anchored alongside.

## How to access

The **DRIFT Product Stack** section appears on the product template. Edit it in the customizer by opening any product page.

## Settings

### Media navigation style

How customers navigate between product images:

* **Thumbnails** — Small preview images.
* **Dots** — Simple dot indicators.
* **Counter** — Numeric count (1/5).

### Media aspect ratio

Constrains product media to a consistent ratio:

* **Square (1:1)**
* **Portrait (3:4)**

### Video playback

How product videos behave:

* **Autoplay on scroll** — Videos start when swiped into view.
* **Manual play** — Customer must press play.

### Desktop layout

Controls vertical positioning of the info panel and media nav on desktop:

* **Bottom-aligned**
* **Center-aligned**

### Image zoom (Desktop)

Choose **None** or **Magnifying Glass**. Defaults to **Magnifying Glass** — a zoom is expected on a product page, so it ships on. The magnifier shows a 2× zoomed lens on hover. Desktop only — on touch devices the **Tap to zoom** setting below handles it instead.

### Tap to zoom (mobile)

On by default. Tapping a product image on mobile opens it fullscreen, where shoppers can pinch to zoom, drag to pan, and double-tap to toggle between fitted and close-up.

The image opens slightly zoomed in rather than fitted, so the gesture is discoverable — it already looks like something you can move around.

Turn it off if your product images are flat graphics where zooming adds nothing.

{% hint style="info" %}
This is separate from **Image zoom (Desktop)** above. That one is a hover magnifier for mouse users; this one is a fullscreen touch viewer. They never both apply to the same shopper.
{% endhint %}

### Variant selector

Choose **Buttons** or **Dropdown**.

* **Buttons** — every option value is its own tappable button. Best when there are only a handful of values.
* **Dropdown** — option values collapse into a native select menu. Best for products with many options or long value names, where buttons would stack into an unwieldy block.

Sold-out values are still marked as unavailable in both modes.

### Show social icons below buy buttons

Off by default. Adds your social account icons underneath the Add to Cart area.

The links come from **Theme settings → Social media** — you set the URLs once and every surface that shows socials uses them.

## Sold-out products

### The price is hidden on sold-out buttons

Not a setting. When a product or the selected variant is unavailable, the button drops the price and centres the label, because **SOLD OUT $142** reads like a live offer.

Selecting an available variant brings the price straight back.

### Custom sold-out wording

You can replace the words "Sold Out" on individual products — usually with **Coming Soon** — using the [`custom.sold_out_text`](/drift-shopify-theme/drift-starter/metafields/sold-out-text.md) metafield. Nothing to configure in this section.