Buy buttons

Placement and available controls for the Buy buttons block.

Scale Theme · v1.9.3 · 2 min read

Where to find it

Open the parent section and use Add block where this block is offered.

Usage notes

Auto connects to parent product

IMPORTANT: Variant selectors in Quantity breaks, gifts & preselected upsells do NOT work with dynamic checkout buttons.

Customers can send gift cards to a recipient's email with a personal message. [Learn more](https://help.shopify.com/manual/products/gift-card-products)

This is a secondary add to cart button which goes straight to checkout. It's a replica of the unbranded "Buy It Now" button.

Since dynamic checkout buttons don't work with multiple variants, this is meant to be a substitute for it.

Editor controls

Conditional controls appear after choosing the relevant source, style or option. Saved values may differ from new defaults.

Color source: Theme colors use Color DNA, Color scheme uses a shared Shopify preset, and Custom affects only this block.Options: Theme colors · Color scheme · Custom
Color schemeConditional: Choose an available Shopify color scheme.
Supporting textConditional: Choose a local color when the relevant custom source is enabled.
Primary actionConditional: Choose a local color when the relevant custom source is enabled.
Action textConditional: Choose a local color when the relevant custom source is enabled.
BorderConditional: Choose a local color when the relevant custom source is enabled.
Volume pricing backgroundConditional: Choose a local color when the relevant custom source is enabled.
Show dynamic checkout buttons: Using the payment methods available on your store, customers see their preferred option, like PayPal or Apple Pay.
Skip cart: Your customers will be sent directly to checkout after click the Add to Cart button.
Show pickup availability: Enable or disable this option and preview the result.
Gift card form: Enable or disable this option and preview the result.
Always stack buttons: Enable or disable this option and preview the result.
Uppercase button labels: Enable or disable this option and preview the result.
Icons scale: Related to button label font size
Icons spacing: Empty space between the button label & the icons
Button border width: Set to 0 to hide the border.
Button border color: Choose a local color when the relevant custom source is enabled.
Custom button label: If empty, the default Add to Cart label from theme language settings will be displayed.
Button style: Primary, Secondary and Tertiary inherit colors, border, radius & font from Theme Settings > Buttons. Custom lets you override everything for this block only.Options: Primary · Secondary · Tertiary · Custom (per-block override)
Display price inside the button: Enable or disable this option and preview the result.
Price in a separate pillConditional: Enable or disable this option and preview the result.
Show selected quantity offer totalConditional: Uses the Quantity block total for this product form. When a selling plan is selected, its native button price is preserved.
Show compare-at price inside buttonConditional: Enable or disable this option and preview the result.
Price pill backgroundConditional: Choose a local color when the relevant custom source is enabled.
Price pill textConditional: Choose a local color when the relevant custom source is enabled.
Price pill corner radiusConditional: Adjust within the range offered by the theme editor.
Show text below main button: Enable or disable this option and preview the result.
Text below main buttonConditional: Edit the formatted text for this component.
Background colorConditional: Choose a local color when the relevant custom source is enabled.
Text colorConditional: Choose a local color when the relevant custom source is enabled.
Border colorConditional: Choose a local color when the relevant custom source is enabled.
Border widthConditional: Adjust within the range offered by the theme editor.
Border radiusConditional: Adjust within the range offered by the theme editor.
Hover backgroundConditional: Choose a local color when the relevant custom source is enabled.
Hover textConditional: Choose a local color when the relevant custom source is enabled.
Hover borderConditional: Choose a local color when the relevant custom source is enabled.
Label prefix icon: Choose an image from your shop. Preview its crop on desktop and mobile.
Label suffix icon: Choose an image from your shop. Preview its crop on desktop and mobile.
Display secondary Skip cart ATC button: Enable or disable this option and preview the result.
Button labelConditional: Edit the text shown by this component.
Button styleConditional: Primary, Secondary and Tertiary inherit colors, border, radius & font from Theme Settings > Buttons. Custom lets you override everything for this block only.Options: Primary · Secondary · Tertiary · Custom (per-block override)
Background colorConditional: Choose a local color when the relevant custom source is enabled.
Text colorConditional: Choose a local color when the relevant custom source is enabled.
Border colorConditional: Choose a local color when the relevant custom source is enabled.
Border widthConditional: Adjust within the range offered by the theme editor.
Border radiusConditional: Adjust within the range offered by the theme editor.
Label prefix iconConditional: Choose an image from your shop. Preview its crop on desktop and mobile.
Label suffix iconConditional: Choose an image from your shop. Preview its crop on desktop and mobile.
Top: Adjust within the range offered by the theme editor.
Bottom: Adjust within the range offered by the theme editor.
Left: Adjust within the range offered by the theme editor.
Right: Adjust within the range offered by the theme editor.