Hi Shopify Devs,
I’m trying to build a professional two-column scroll behavior on my Shopify product page, similar to what big marketplaces do.
Goal:
On desktop viewports, when the user scrolls down:
The right column (product info: title, price, variants, shipping badges, guarantee, etc.) scrolls exclusively first.
The left column (media gallery images) remains visually frozen initially.
ONLY AFTER the right column’s content is fully visible (including the last badges like “Fast shipping / Ship within / 15 days return”), the left column should start scrolling.
On scroll-up: reverse the order smoothly.
On mobile/tablet: normal single-column behavior (no special scroll).
Current Setup:
Shopify custom theme with a two-column .grid layout.
Right column has a wrapper .product__info-wrapper.
Left column .product__media-wrapper for images.
Sticky header at the top (~80px height).
Added a
at the very end of the right column.
Issue:
Even with the sentinel approach, scroll hand-off sometimes happens too early, especially on zoomed browsers (125%, 150%) or when quick-view modals are open.
Question:
How can I properly calculate “when the right column is finished” in a zoom-proof, dynamic-content-proof way?
How should I handle scroll clamping (prevent overshoot on fast wheel flicks)?
Should I base it on scrollY + window.innerHeight - headerHeight >= sentinelBottom?
Best practice to detect dynamic height changes when variants are selected?
Tech Stack:
Custom ScrollDirector.js file.
ResizeObserver on .product__info-wrapper for height change detection.
Shopify Liquid edits for the sentinel insertion.