> 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-studio/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-studio/metafields/sold-out-text.md) metafield. Nothing to configure in this section.

## Sold Out Behavior (Studio only)

### When an item is sold out

Choose what a sold-out product does instead of showing a dead button.

* **Disabled Sold Out button** — the default. The button reads "Sold Out" and can't be clicked.
* **Notify Me button (captures emails)** — the button becomes clickable and opens an email capture popup.

Notify Me turns your highest-intent dead end into a mailing list. Someone looking at a sold-out product has already decided they want it.

#### How the shopper experiences it

1. They land on a sold-out product and see your Notify button instead of a dead one
2. Tapping it opens a popup naming the product they were looking at, so it doesn't read as a generic newsletter signup
3. They enter their email and submit

#### How you find these people later

Signups become **Shopify customers**, tagged twice:

* `back-in-stock` — everyone who has ever used the Notify button
* `bis-[product-handle]` — everyone waiting on that specific product

Before a restock, go to **Customers**, filter by the `bis-` tag for that product, and you have exactly the list to email.

No app, no subscription — this runs on Shopify's own customer form.

{% hint style="warning" %}
The theme collects the emails and tags them. It does **not** send the restock email for you — that's a campaign you send from Shopify Email, Klaviyo, or whatever you already use.
{% endhint %}

#### The remaining settings

These only appear once you've picked **Notify Me button**.

| Setting                | Default                                                                      |
| ---------------------- | ---------------------------------------------------------------------------- |
| **Button label**       | Sold Out - Notify Me When Available                                          |
| **Popup heading**      | Back in stock alert                                                          |
| **Popup message**      | Drop your email and we will let you know the moment this is available again. |
| **Popup submit label** | Notify Me                                                                    |
| **Success heading**    | You are on the list                                                          |
| **Success message**    | We will email you as soon as it is back.                                     |

Button labels are uppercased automatically, so write them in normal sentence case. Long labels wrap to two centred lines on narrow screens.

#### Products this doesn't apply to

Two kinds of product deliberately keep their own behaviour instead of becoming a Notify button:

* Products using the [`custom.sold_out_text`](/drift-shopify-theme/drift-studio/metafields/sold-out-text.md) metafield — they keep your custom wording on a disabled button
* Products using the [pre-order metafields](/drift-shopify-theme/drift-studio/metafields/preorder.md) — they stay purchasable

Clear those metafields on a product if you'd rather it collected emails.

## Low stock indicator (Studio only)

### Enable low stock indicator

Shows a pulsing indicator above the Add to Cart button when the selected variant is running low.

### Low stock threshold

Range from 1 to 20. The indicator appears when variant inventory is at or below this number.