Checkout button

Placement and available controls for the Checkout button block.

Scale Theme · v1.9.3 · 1 min read

Where to find it

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

Usage notes

These options apply only when Style is set to 'Custom'.

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.
Guarantee textConditional: Choose a local color when the relevant custom source is enabled.
Button and iconConditional: Choose a local color when the relevant custom source is enabled.
Button textConditional: Choose a local color when the relevant custom source is enabled.
Button text: Edit the text shown by this component.
Show lock icon: Enable or disable this option and preview the result.
Lock icon size: Adjust within the range offered by the theme editor.
Font size: Adjust within the range offered by the theme editor.
Button font: Choose the presentation or source that fits this component.Options: Heading font · Body font
Font weight: Choose the presentation or source that fits this component.Options: Medium · Semi Bold · Bold · Extra Bold
Text transform: Choose the presentation or source that fits this component.Options: None · Uppercase
Button style: Primary, Secondary and Tertiary inherit Theme settings > Buttons. Pick Custom only to override this checkout button locally.Options: Primary · Secondary · Tertiary · Custom (per-block)
BackgroundConditional: Choose a local color when the relevant custom source is enabled.
Gradient (optional)Conditional: Use the matching control in the theme editor and preview the component before publishing.
Hover backgroundConditional: Choose a local color when the relevant custom source is enabled.
Text colorConditional: Choose a local color when the relevant custom source is enabled.
Hover 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.
Hover border colorConditional: Choose a local color when the relevant custom source is enabled.
Shadow 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: Set to 50 for a pill-shaped button.
Vertical padding: Adjust within the range offered by the theme editor.
Horizontal padding: Adjust within the range offered by the theme editor.
Show guarantee text: Enable or disable this option and preview the result.
Google icon name: Google Material Icon name (e.g., verified, check_circle, shield). Find icons at fonts.google.com/icons
Icon color: Choose a local color when the relevant custom source is enabled.
Guarantee text: Edit the text shown by this component.
Guarantee font size: Adjust within the range offered by the theme editor.
Button to guarantee spacing: Adjust within the range offered by the theme editor.
Guarantee text color: Choose a local color when the relevant custom source is enabled.
Top margin: Adjust within the range offered by the theme editor.
Bottom margin: Adjust within the range offered by the theme editor.