Button

Placement and available controls for the 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.

Editor controls

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

Label: Edit the text shown by this component.
Link: Choose the destination for this link or button.
Open link in new tab: Enable or disable this option and preview the result.
Style: Tertiary uses Theme settings > Buttons > Tertiary button. Custom colors & hover gives this button its own colors and advanced controls.Options: Primary · Secondary · Tertiary (sliding highlight) · Custom colors & hover · Link
Color sourceConditional: Primary and Secondary follow this source. Local palette overrides this button's colors and creates its hover colors automatically. Tertiary keeps its global gradient and effects.Options: Theme colors · Color scheme · Local palette
Color schemeConditional: Choose an available Shopify color scheme.
Button backgroundConditional: 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 borderConditional: Choose a local color when the relevant custom source is enabled.
BackgroundConditional: Choose a local color when the relevant custom source is enabled.
TextConditional: Choose a local color when the relevant custom source is enabled.
BorderConditional: Choose a local color when the relevant custom source is enabled.
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.
ShadowConditional: 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.
Sliding highlightConditional: Adds a hover shine without changing your colors. Respects reduced motion.
Highlight durationConditional: Adjust within the range offered by the theme editor.
Desktop width: Choose the presentation or source that fits this component.Options: Fit · Custom
Custom widthConditional: Adjust within the range offered by the theme editor.
Mobile width: Choose the presentation or source that fits this component.Options: Fit · Custom
Custom widthConditional: Adjust within the range offered by the theme editor.