Buttons variants
Theme settings: Buttons variants.
Buttons variants
At a glance
Define global button styles — default, primary, secondary, outline, and ghost — including borders and type treatment.
Where to find it
- Theme editor path: Online Store → Customize → Theme settings → Buttons variants
Settings
Default style
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Border thickness | Controls “Border thickness” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Pattern | Controls “Pattern” on the storefront. Open the theme editor to preview live. | solid | Always |
| Font | Controls “Font” on the storefront. Open the theme editor to preview live. | body | Always |
| Text case | Controls “Text case” on the storefront. Open the theme editor to preview live. | default | Always |
Primary style
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Border thickness | Controls “Border thickness” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Font | Controls “Font” on the storefront. Open the theme editor to preview live. | body | Always |
| Text case | Controls “Text case” on the storefront. Open the theme editor to preview live. | default | Always |
Secondary style
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Border thickness | Controls “Border thickness” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Font | Controls “Font” on the storefront. Open the theme editor to preview live. | body | Always |
| Text case | Controls “Text case” on the storefront. Open the theme editor to preview live. | default | Always |
Outline styles
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Border thickness | Controls “Border thickness” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Pattern | Controls “Pattern” on the storefront. Open the theme editor to preview live. | solid | Always |
| Font | Controls “Font” on the storefront. Open the theme editor to preview live. | body | Always |
| Text case | Controls “Text case” on the storefront. Open the theme editor to preview live. | default | Always |
Ghost style
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Font | Controls “Font” on the storefront. Open the theme editor to preview live. | body | Always |
| Text case | Controls “Text case” on the storefront. Open the theme editor to preview live. | default | Always |
Setting details
Each control from the tables above, explained simply:
Border thickness
Controls “Border thickness” on the storefront. Open the theme editor to preview live. Default: 1.
Pattern
Controls “Pattern” on the storefront. Open the theme editor to preview live. Default: solid.
Font
Controls “Font” on the storefront. Open the theme editor to preview live. Default: body.
Text case
Controls “Text case” on the storefront. Open the theme editor to preview live. Default: default.
Border thickness
Controls “Border thickness” on the storefront. Open the theme editor to preview live. Default: 1.
Font
Controls “Font” on the storefront. Open the theme editor to preview live. Default: body.
Text case
Controls “Text case” on the storefront. Open the theme editor to preview live. Default: default.
Border thickness
Controls “Border thickness” on the storefront. Open the theme editor to preview live. Default: 1.
Font
Controls “Font” on the storefront. Open the theme editor to preview live. Default: body.
Text case
Controls “Text case” on the storefront. Open the theme editor to preview live. Default: default.
Border thickness
Controls “Border thickness” on the storefront. Open the theme editor to preview live. Default: 1.
Pattern
Controls “Pattern” on the storefront. Open the theme editor to preview live. Default: solid.
Font
Controls “Font” on the storefront. Open the theme editor to preview live. Default: body.
Text case
Controls “Text case” on the storefront. Open the theme editor to preview live. Default: default.
Font
Controls “Font” on the storefront. Open the theme editor to preview live. Default: body.
Text case
Controls “Text case” on the storefront. Open the theme editor to preview live. Default: default.
Tips
- Changes apply store-wide — check home, product, and collection pages after saving.
- Pair with section-level color schemes for page-specific overrides.
- Read How theme settings work for how globals connect to sections.