02GENERAL
Buttons
This page explains how “Buttons” actually behaves, which data it depends on, and what its settings change.
Buttons
This page explains how “Buttons” actually behaves, which data it depends on, and what its settings change.
What the theme does automatically
This section only displays elements that have content. Empty elements are ignored to preserve the layout.
Understand the settings
Common Settings
Minimum height
Default: 50 · Range: 40–64px button_min_heightRounded
Default: 40 · Range: 0–40px button_corner_radiusText size
Default: 14 · Range: 12–18px button_font_sizeText thickness
Default: 700 · Options: Average, Semi-oily, Oily button_font_weightShadow intensity
Default: 18 · Range: 0–40% button_shadow_opacityMain button
Background
Default: #FFF9F6 button_primary_backgroundText
Default: #171214 button_primary_textBorder
Default: #FFF9F6 button_primary_borderBackground on hover
Default: #D39A84 button_primary_hover_backgroundText on hover
Default: #171214 button_primary_hover_textBorder on hover
Default: #E5B09A button_primary_hover_borderSecondary button
Background
Default: #71575B button_secondary_backgroundText
Default: #FFF9F6 button_secondary_textBorder
Default: #FFFFFF button_secondary_borderBackground on hover
Default: #FFFFFF button_secondary_hover_backgroundText on hover
Default: #171214 button_secondary_hover_textBorder on hover
Default: #FFFFFF button_secondary_hover_borderGlass button
Used for arrows, close buttons, compact actions and carousel controls.
Background color
Default: #71575B button_glass_backgroundBackground Opacity
Default: 22 · Range: 0–80% button_glass_background_opacityIcon or text
Default: #FFF9F6 button_glass_textBorder
Default: #FFF9F6 button_glass_borderBorder Opacity
Default: 24 · Range: 0–80% button_glass_border_opacitySize of square buttons
Default: 50 · Range: 36–64px button_glass_sizeGlass button SVG shadow
Show a shadow on glass button SVGs
Default: disabled button_glass_svg_shadow_enabledShadow intensity
Default: 100 · Range: 0–100% button_glass_svg_shadow_intensityShadow Blur
Default: 8 · Range: 0–30px button_glass_svg_shadow_blurHorizontal position
Default: 4 · Range: -12–12px button_glass_svg_shadow_xVertical position
Default: 4 · Range: -12–12px button_glass_svg_shadow_yShadow color
Default: #000000 button_glass_svg_shadow_colorAvailable blocks
This section has no reorderable blocks. Its content is controlled by its settings and related Shopify data.
Before publishing
- ✓
Content remains readable in every color scheme.
- ✓
Labels match the storefront language.
- ✓
Displayed promotions match Shopify rules.
- ✓
Interactions remain accessible by keyboard and touch.