Sticky add to cart

Questions

When does the bar appear?

It watches the element that matches the "Main buy form selector" setting, by default the first product form on the page that is not the bar's own, and appears once that form has scrolled completely above the screen. It hides again when you scroll back up to it. If nothing matches the selector, it appears after the fallback scroll distance instead (600px by default). "Always visible" shows it from the start.

Which product does it use?

The product picked in the section settings if there is one, otherwise the product of the product page it sits on. Outside the theme editor, with neither, the section outputs nothing; in the editor it shows a placeholder bar.

How are variants and sold-out items handled?

When a product has more than one variant, the bar shows a select with every variant. Sold-out variants are disabled and labelled with your sold-out text. Choosing a variant updates the price and compare-at price, and if the page's own buy form changes its variant, the bar follows. If the selected variant is sold out, the button is disabled and shows the sold-out label.

Does it use my theme's cart drawer?

No. It is a standard Shopify product form that posts to the cart, so it works without JavaScript and follows Shopify's default behaviour of taking the shopper to the cart page. It does not open a theme's cart drawer.

Will it cover the footer or other content?

In the bottom position it adds its own height to the page's bottom padding while it is visible and removes it when hidden, so the end of the page can always be scrolled into view. When hidden it is inert and aria-hidden, so keyboard and screen reader users never land in it.

Can I show it only on mobile?

Yes. "Show on" switches it between all devices, desktop only (750px and wider) and mobile only. Below 750px the product info sits above the variant select, quantity and button.