Buy Buttons Block
The Buy buttons block owns the product form purchase stack. It can include quantity, add-to-cart, accelerated checkout, selling plan choices, gift-card recipient fields, and pickup availability.
Setup Order
- Place after variantsKeep Buy buttons after Variant picker and Price so customers understand the selected product state before purchase.
- Choose layoutUse vertical stacking for compact product forms or horizontal side-by-side when the section has enough width.
- Review purchase optionsCheck selling plans, gift-card recipient fields, quantity rules, and pickup availability only on products that support those states.
- Test cart behaviorAdd an available variant to cart and confirm the cart drawer or cart page behavior matches Theme settings.
- Check accelerated checkoutConfirm accelerated checkout appears only when Shopify can render payment buttons for the current product, market, and payment setup.
Included Child Blocks
| Child block | Use |
|---|---|
| Quantity | Lets customers choose quantity and follows Shopify quantity rules. |
| Add to cart | Main product form submit action. |
| Accelerated checkout | Renders Shopify payment buttons such as Shop Pay when available. |
Key Settings
| Setting | Description |
|---|---|
| Layout | Stack purchase controls vertically or place them horizontally. |
| Show pickup availability | Shows local pickup details when the selected variant has pickup locations. |
| Gift card form | Shows recipient fields for gift card products. |
| Text color | Sets shared text color for supporting purchase content. |
| Quantity selector background | Adjusts the quantity control background. |
| Override global font settings | Changes button typography for this block instance. |
| Selling plan styles | Adjusts subscription option card radius, border, gap, padding, active state, badge, typography, and width. |
| Padding | Spaces the full purchase stack in the product form. |
Add-To-Cart Button
The Add to cart child block uses the selected variant, availability, selling plan state, and quantity rule state. It supports primary, secondary, alternative, and custom button styling.
Use a custom Add-to-cart style only when the surrounding product form needs a different visual emphasis than the global button system. For normal product pages, use the global button styles for consistency.
Accelerated Checkout
The Accelerated checkout child block renders Shopify payment buttons from the product form. Availability depends on Shopify payments, the customer’s environment, the product state, and market/payment eligibility.
Keep accelerated checkout visually secondary to the main add-to-cart flow unless your store intentionally prioritizes direct checkout.
Selling Plans
When a product has subscription plans, the block displays one-time purchase and plan options. Test both paths:
| Flow | What to confirm |
|---|---|
| One-time purchase | Add-to-cart text and cart line match the one-time purchase. |
| Subscription purchase | Plan choice remains selected, price updates, and the cart line shows the selling plan. |
| Required plan | Add-to-cart remains unavailable until a valid selling plan is selected. |
QA Checklist
| State | What to confirm |
|---|---|
| No product selected | The editor does not publish an unusable purchase form without a selected product. |
| Available variant | Quantity and add-to-cart are enabled. |
| Sold-out variant | Add-to-cart is disabled or shows sold-out text. |
| Quantity rules | Minimum, maximum, and increment messages appear when Shopify provides them. |
| Volume pricing | Price-break rows appear only for variants with configured quantity price breaks. |
| Gift card | Recipient fields appear only for gift card products when enabled. |
| Pickup availability | Pickup details update when variants change. |