Sticky product details

Product page

The product overview section has two columns for the product media and product details.

When the product media column has more content, visitors may need to scroll down to view the entire column. As a result, the product details — including the buy button — may scroll out of view.

You can enable sticky product details to keep the product details visible when scrolling down to view a longer product media column.

The product details column will "stick" to the top of the window until visitors have scrolled to the bottom of the product overview.

Why aren't the product details sticking?

The product details will stick when the product media column is taller and has more content. More compact media gallery layouts (like thumbnails) may make the product media column shorter than the product details and will not trigger the sticky effect.

I want to show the buy button when scrolling down the entire page

To display an "add to cart" button when scrolling down the entire product page, consider enabling the Sticky add-to-cart bar.

---

Steps

1. In the product template, click the Product overview section to open the settings.

2. Toggle on Enable sticky product details.

   We recommend turning off this option when the product details is longer than the column with the product media.

3. Click Save.

---

Related links

Breadcrumbs Product media gallery Navigation buttons