Sticky add-to-cart

The buy button follows the shopper down the product page.

Once someone has scrolled past the real add-to-cart button, this section brings it back — as a bar across the bottom of a phone, or a small floating dock on a very wide screen. Both carry the product's photo, its name, the live price, and a button that adds the variant they have selected.

• It only appears when it is needed — while the page's own buy button is on screen, there is nothing there.
• It follows the page — switch variant and the price in the bar changes with it; a sold-out variant disables the button and relabels it.
• It gets out of the way — both surfaces step aside while the cart drawer is open, and the desktop dock can be dismissed.

Try it

Switch between the phone and desktop icons in the preview header to see each surface, turn the quantity stepper off, and turn the whole section off to see that it renders nothing at all.

←Sticky add-to-cart

Color scheme

Enable sticky bar

Show a persistent add-to-cart bar at the bottom of mobile screens after the primary buttons scroll out of view.

Show quantity selector

Storefront preview 375px

Kitchen design consultation€450.00

Both surfaces are pinned to the bottom of the real page. Here they sit inside the frame so you can see them — everything else, down to the quantity stepper and the dock's close control, is the shipped component.

How it works

The section lives on the product template and nowhere else — it is not offered on any other template, and it renders nothing at all while Enable sticky bar is off. It uses no blocks.

It renders two surfaces from one set of settings:

Surface	Where	What it carries
Mobile bar	Screens under 750px	Thumbnail, title, live price, an optional quantity stepper, and the add-to-cart button.
Desktop dock	Screens 1400px and wider	Thumbnail, title, live price, the button, and a close control so a shopper can dismiss it.

Between those widths — the ordinary laptop and tablet range — neither appears. At those widths the theme instead keeps the product page's own info column sticky, so the real buy button is still on screen and a second one would be noise.

Composition

Mobile bar (bottom of the screen)
┌──────────────────────────────────────────────────────┐
│ ┌──┐ Kitchen design consultation                     │
│ │▨ │ €450.00              [− 1 +]  [  Add to cart  ] │
│ └──┘                                                 │
└──────────────────────────────────────────────────────┘

Desktop dock (bottom-right)          ┌───────────────────┐
                                     │                 × │
                                     │ ┌──┐ Kitchen des… │
                                     │ │▨ │ €450.00      │
                                     │ └──┘              │
                                     │ [  Add to cart  ] │
                                     └───────────────────┘

When it appears

The theme watches the product page's own buy-buttons block. While that block is on screen, both surfaces stay hidden. As soon as it scrolls away, the relevant surface slides in; scroll back up and it slides out again.

That is why Product form section exists: it names the section whose buy buttons are being watched — the section this bar mirrors. On a standard product page that is main, which is the default, and you never need to touch it. On a custom product template where the main product section has a different ID, set it to match, or the bar will never know when to appear.

Settings

Setting	What it does
Color scheme	Paints the bar and the dock — their ground, ink, hairlines and the button.
Enable sticky bar	Turns the whole section on or off. Off means it renders nothing at all — no markup, no CSS, no JavaScript. On by default.
Show quantity selector	Adds a −/+ stepper to the mobile bar. On by default. The desktop dock never shows a stepper; it always adds one.
Product form section	The ID of the section this bar mirrors — usually the main product section. Leave it as main unless you have built a custom product template.

What "Add to cart" does here

The button adds the variant currently selected on the page, through the theme's cart API — the bar at its stepper's quantity, the dock always at one. It does not submit the main product form, so anything filled in there that is not a variant choice — a subscription plan, a custom engraving field, a line-item property from an app — is not carried over.

That matters for one case in particular: a shopper buying a subscription should use the main buy buttons, because the selling-plan choice lives in that form. Everything else — a plain variant, a preorder — behaves identically either way.

With the cart drawer

Both surfaces step aside while the cart drawer is open, so nothing sits on top of the drawer or competes with its checkout button. They come back when the drawer closes.

Presets

Available in every preset, painted entirely from the colour scheme you choose. It carries no per-preset styling of its own.

Responsive & accessibility

• Each surface is a labelled landmark — the bar is a region and the dock a complementary, both named "Add to cart bar", so a screen-reader user can find or skip them.
• The quantity stepper is a labelled group with real −/+ buttons, each carrying its own label, and a numeric input a keyboard user can type into.
• The dock has a close control at 44 × 44px, so a shopper on a wide screen can dismiss it and get their page back — and Escape dismisses it too, from anywhere on the page.
• The bar clears the phone's home indicator — its bottom padding adds the device's own safe-area inset, so the button is never half under the gesture bar.
• The button state is real, not painted: on a sold-out variant it is genuinely disabled and relabelled "Sold out", so assistive technology reports it correctly.
• Respects reduced motion — the slide-in becomes an instant appearance; nothing else changes.
• Right-to-left ready — the dock sits on the correct side and the bar's layout mirrors in Arabic, Hebrew, Persian and Urdu.

Tips

• Leave it on. It is the single cheapest conversion improvement on a long product page, and it costs nothing on pages where the buy button is already in view.
• Turn Show quantity selector off for products people buy one of — a service, a made-to-order piece. The stepper is width on a phone bar that the title could use instead.
• Leave Product form section alone unless you have genuinely built a custom product template. A wrong value here doesn't break anything visible; it just means the bar never appears.
• If you sell subscriptions, keep the main buy buttons prominent — the bar is a shortcut for the simple case.

Related sections

• Product page — the buy buttons this section watches.
• Cart — the drawer both surfaces step aside for.