Buy buttons and sticky add to cart
Three parts of the Product information section drive purchases. Buy buttons holds the add to cart and dynamic checkout buttons, Quantity selector sets how many to add, and Sticky add to cart is a floating bar that follows the customer as they scroll. The first two are blocks you add inside Details. The third is one of the section's fixed blocks, already there. All three read the product on the page, so there is nothing to pick or connect.
Buy buttons
The add to cart button, with optional express checkout buttons below it. The button label follows the variant: Add to cart, Sold out, Pre-order, or Unavailable.
Add or find it
- Open the theme editor and select a product template from the top bar.
- In the Product information section, select the Details block.
- Add Buy buttons under it, in the Products group. If it is already there, select it to open its settings.
Settings
- Button style: the look of the add to cart button. Primary (the default), Secondary, Primary outline, or Secondary outline.
- Show dynamic checkout: adds the express payment buttons under the add to cart button (Shop Pay, Apple Pay, Google Pay, and more). The set a customer sees depends on their device and your payment providers. On by default.
- Show price next to "Add to cart": prints the current variant price inside the button, after the label. On by default.
This block also uses the standard Margin controls. See Common section settings.
Quantity selector
The minus, number, and plus controls for the amount the customer adds. It follows any quantity rules set on the product's variants, so the minimum, maximum, and step come from the product, not from this block.
Add or find it
- In the Product information section, select the Details block.
- Add Quantity selector under it, in the Products group, or select the existing block to edit it.
Settings
- Show "Quantity" label: shows the word Quantity above the controls. On by default. Turn it off for a tighter layout.
This block also uses the standard Margin controls. See Common section settings.
Sticky add to cart
A floating bar that appears when customers scroll past the product details. It shows the product image, title, price, and an add to cart button, so a customer can buy without scrolling back up. It submits to the same form as the main Buy buttons block, so keep both on the page.
Find it
Sticky add to cart is one of the Product information section's fixed blocks, not one you add. It is always in the section's block list on a product page. Select it there to open its settings. Its position in that list does not change where the bar appears, since the bar floats over the page. It renders on product pages only, so it is absent when the section is used as Featured product on another page.
Settings
- Visibility: where the bar shows. All (the default) shows it everywhere, Desktop shows it on desktop only, and Mobile shows it on phones only. If the bar never appears, check this first. To remove the bar altogether, hide the block in the section's block list.
- Button style: the look of the bar's button. Primary (the default), Secondary, Primary outline, or Secondary outline.
- Show "Choose options": only for a product with more than one variant. When the selected variant cannot be added (sold out or unavailable), the disabled add to cart button in the bar is replaced by a Choose options button that scrolls the page to the Variant picker. Off by default.
This block also uses the standard Color controls. See Common section settings.
Keep the purchase path working
- Keep Buy buttons on the page even when Sticky add to cart is on. The bar reuses the same form, so it needs the main button it scrolls past.
- Match Button style across Buy buttons and Sticky add to cart so the floating bar reads as the same action.
- The bar's button mirrors the main one: it goes into its loading state, and it disables itself, whenever the main add to cart button does.