What it is

A sticky product image on one side, a column of benefits on the other. As each benefit scrolls into the centre of the screen, the image changes to match it: a close-up of the detail, or a different product entirely. The last block is a buy panel — one product with its variants, or the whole set at a bundle discount. Switch demos in the top bar: Extrême kettlebell, Tech Flow Harmony headphones, Inova Embrace lounge chair.

How it works

• Each block = one benefit = one image. The merchant uploads a frame per block (a detail shot) or picks a product (its featured image is used).
• The section sits in the page container by default (setting: contained / full-bleed; full-bleed spans the screen with equal side gutters) and top/bottom padding; the sticky image is the viewport height minus that padding. The buy block ends flush with the bottom of the image, so it lands on the image’s bottom edge and only then the whole section scrolls away. Blocks are half a frame tall, so the next benefit is always in view. The active block is the one whose centre is nearest the image centre — the column has quarter-frame padding on top, so the first block is active on load; the buy block becomes active once its top passes the image centre. The previous block fades and drifts up; the matching image cross-fades in.
• Buy block, two modes: product — variant chips, price, Add to cart; set — every step product with its variant select, set total with discount, “Add the set”.
• Variant chips inside a step and in the set panel share one state.

Section settings

• Width: contained (default) / full-bleed · media position: left / right · section padding top / bottom
• Blocks: step (image, product, eyebrow, heading, text, CTA none / link)
• Block: buy (mode product | set, product, label, set discount %)
• Color scheme

Reference

• Apple — AirPods Pro, “Take a closer look”

Implementation notes

• No apps. Images of all blocks are rendered in the sticky column (first eager, rest lazy); a ~40-line script toggles .is-active on scroll via requestAnimationFrame.
• Variant picker uses product.variants | json; Add to cart = /cart/add.js + the theme cart drawer, same as quick-add.
• Mobile: media sticky on top at 45vh, blocks below. Reduced motion: no cross-fade.