Sticky Quick Add

A pill-shaped bar that slides up from the bottom of the screen once the visitor scrolls past the main product form’s add-to-cart button. It shows a product thumbnail, variant dropdown selectors (one per option), and an Add to Cart button — everything needed to purchase without scrolling back up. The bar syncs bidirectionally with the main product form through the shared productVariant Alpine store, so changing a variant in either place updates the other.

The bar is limited to one per template and only available on product templates.

Settings

This section has no configurable settings. It reads everything from the current product object and the Alpine variant store. Padding, colours, and layout are fixed by design to maintain a consistent sticky bar experience.

Blocks

This section has no blocks. The variant dropdowns are generated automatically from the product’s options.

Behaviour details

The bar uses an IntersectionObserver on the #product-form element. It only appears when the form has scrolled above the viewport — not when it’s below the fold on initial page load. This prevents the bar from flashing on arrival before the visitor has seen the product.

Single-value options (like a “Plug Type” with only one choice) are hidden automatically, matching the same logic as the main variant options block. For products with no variants at all, the bar shows the product title instead of dropdowns.

The product thumbnail updates reactively to show the selected variant’s featured image, falling back to the product’s featured image when the variant has none. Plug Type options show a swatch image beside the dropdown when swatch data is available.

Where it’s used

All product templates. Add it once to each product template — it handles single-variant and multi-variant products automatically.

Tips

• Place it after the main product section in the template. The observer targets #product-form, which is rendered by the Product Form Submit block. If that block isn’t present, the sticky bar never appears.
• Don’t worry about the initial flash. The section uses x-cloak and a translate-y transition, so it’s invisible until the observer triggers.
• Variant sync is two-way. Changing the sticky bar dropdown updates the main form’s radio buttons, and changing the main form fires a variantChange event that updates the sticky bar. There’s a guard against infinite loops.
• The bar adds to cart independently. It posts directly to /cart/add.js and dispatches a cart:add event to open the mini-cart drawer. It does not submit the main product form.
• It slides, it doesn’t fade. The enter/leave animation is a vertical translate so it feels like a tray rising from the bottom edge rather than materializing in place.