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. |
| Show theme subscription picker | Enabled by default. Turn off only when a subscription app supplies and connects its own purchase options. |
| Show subscription headings | Enabled by default. Turn off to visually hide the subscription group and shared option headings while keeping those labels available to screen readers. The purchase choices remain visible. |
| Subscription labels | Choose Plan name (default) or Option details. Option details shows every app-provided option name and value while retaining savings badges. Incomplete details or detected configuration data fall back to the full plan name. |
| 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 the available plan options. One-time purchase is offered only when the product and selected variant allow it.
If a subscription app supplies its own selector, add its app block and follow the app’s product-form setup instructions. Then turn off Show theme subscription picker in Buy buttons to avoid duplicate selectors. Turning off the theme picker does not install or configure an app. Required subscriptions still need a selected plan before Add to cart succeeds. Check the app’s price display, variant changes, cart line, and accelerated checkout before using this setup with customers.
In versions with Subscription labels, choose Option details to show structured option names and values instead of the full plan title. Savings badges stay visible. When all available plans in a group share one readable option name, that name appears once above the choices; each choice shows its value. Multiple or differing option names stay beside their values. Review the result with your subscription app: option text can contain discounts or additional terms, and the theme does not remove words from it. If any option name or value is missing, or values contain JSON or assignment syntax, the full plan name appears. Cart and checkout continue to use the original plan name.
Turn off Show subscription headings when the surrounding product design already provides enough purchase context and the extra group headings are visually repetitive. This affects presentation only: the headings remain available to assistive technology, and the plan choices, prices, savings badges, selection behavior, and cart submission remain unchanged.
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 | Submitting without a selected plan shows an error and does not add the item. |
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. |