For the complete documentation index, see llms.txt. This page is also available as Markdown.

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.

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.

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 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.

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:

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.

Last updated