Button sizes
Theme settings: Button sizes.
Button sizes
At a glance
Configure padding, font sizes, and radius for button size presets and icon buttons.
Where to find it
- Theme editor path: Online Store → Customize → Theme settings → Button sizes
Settings
Default size
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Vertical padding | Adds empty space (vertical padding) around the section content. | 10 | Always |
| Horizontal padding | Adds empty space (horizontal padding) around the section content. | 20 | Always |
| Font size - Mobile | Sets font size - mobile in pixels for the matching screen size. | 14 | Always |
| Font size - Tablet | Sets font size - tablet in pixels for the matching screen size. | 14 | Always |
| Font size - Desktop | Sets font size - desktop in pixels for the matching screen size. | 14 | Always |
| Border radius | Rounds the corners. Higher values look more pill-shaped. | 14 | Always |
Small size
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Vertical padding | Adds empty space (vertical padding) around the section content. | 6 | Always |
| Horizontal padding | Adds empty space (horizontal padding) around the section content. | 12 | Always |
| Font size - Mobile | Sets font size - mobile in pixels for the matching screen size. | 12 | Always |
| Font size - Tablet | Sets font size - tablet in pixels for the matching screen size. | 12 | Always |
| Font size - Desktop | Sets font size - desktop in pixels for the matching screen size. | 12 | Always |
| Border radius | Rounds the corners. Higher values look more pill-shaped. | 12 | Always |
Medium size
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Vertical padding | Adds empty space (vertical padding) around the section content. | 12 | Always |
| Horizontal padding | Adds empty space (horizontal padding) around the section content. | 24 | Always |
| Font size - Mobile | Sets font size - mobile in pixels for the matching screen size. | 14 | Always |
| Font size - Tablet | Sets font size - tablet in pixels for the matching screen size. | 14 | Always |
| Font size - Desktop | Sets font size - desktop in pixels for the matching screen size. | 14 | Always |
| Border radius | Rounds the corners. Higher values look more pill-shaped. | 14 | Always |
Large size
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Vertical padding | Adds empty space (vertical padding) around the section content. | 14 | Always |
| Horizontal padding | Adds empty space (horizontal padding) around the section content. | 28 | Always |
| Font size - Mobile | Sets font size - mobile in pixels for the matching screen size. | 16 | Always |
| Font size - Tablet | Sets font size - tablet in pixels for the matching screen size. | 16 | Always |
| Font size - Desktop | Sets font size - desktop in pixels for the matching screen size. | 16 | Always |
| Border radius | Rounds the corners. Higher values look more pill-shaped. | 16 | Always |
Icon buttons
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Icon size | Controls “Icon size” on the storefront. Open the theme editor to preview live. | 16 | Always |
| Padding | Adds empty space (padding) around the section content. | 6 | Always |
| Border radius | Rounds the corners. Higher values look more pill-shaped. | 50 | Always |
Icon buttons - Small
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Icon size | Controls “Icon size” on the storefront. Open the theme editor to preview live. | 12 | Always |
| Padding | Adds empty space (padding) around the section content. | 4 | Always |
| Border radius | Rounds the corners. Higher values look more pill-shaped. | 50 | Always |
Icon buttons - Medium
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Icon size | Controls “Icon size” on the storefront. Open the theme editor to preview live. | 20 | Always |
| Padding | Adds empty space (padding) around the section content. | 8 | Always |
| Border radius | Rounds the corners. Higher values look more pill-shaped. | 50 | Always |
Icon buttons - Large
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Icon size | Controls “Icon size” on the storefront. Open the theme editor to preview live. | 24 | Always |
| Padding | Adds empty space (padding) around the section content. | 10 | Always |
| Border radius | Rounds the corners. Higher values look more pill-shaped. | 50 | Always |
Setting details
Each control from the tables above, explained simply:
Vertical padding
Adds empty space (vertical padding) around the section content. Default: 10.
Horizontal padding
Adds empty space (horizontal padding) around the section content. Default: 20.
Font size - Mobile
Sets font size - mobile in pixels for the matching screen size. Default: 14.
Font size - Tablet
Sets font size - tablet in pixels for the matching screen size. Default: 14.
Font size - Desktop
Sets font size - desktop in pixels for the matching screen size. Default: 14.
Border radius
Rounds the corners. Higher values look more pill-shaped. Default: 14.
Vertical padding
Adds empty space (vertical padding) around the section content. Default: 6.
Horizontal padding
Adds empty space (horizontal padding) around the section content. Default: 12.
Font size - Mobile
Sets font size - mobile in pixels for the matching screen size. Default: 12.
Font size - Tablet
Sets font size - tablet in pixels for the matching screen size. Default: 12.
Font size - Desktop
Sets font size - desktop in pixels for the matching screen size. Default: 12.
Border radius
Rounds the corners. Higher values look more pill-shaped. Default: 12.
Vertical padding
Adds empty space (vertical padding) around the section content. Default: 12.
Horizontal padding
Adds empty space (horizontal padding) around the section content. Default: 24.
Font size - Mobile
Sets font size - mobile in pixels for the matching screen size. Default: 14.
Font size - Tablet
Sets font size - tablet in pixels for the matching screen size. Default: 14.
Font size - Desktop
Sets font size - desktop in pixels for the matching screen size. Default: 14.
Border radius
Rounds the corners. Higher values look more pill-shaped. Default: 14.
Vertical padding
Adds empty space (vertical padding) around the section content. Default: 14.
Horizontal padding
Adds empty space (horizontal padding) around the section content. Default: 28.
Font size - Mobile
Sets font size - mobile in pixels for the matching screen size. Default: 16.
Font size - Tablet
Sets font size - tablet in pixels for the matching screen size. Default: 16.
Font size - Desktop
Sets font size - desktop in pixels for the matching screen size. Default: 16.
Border radius
Rounds the corners. Higher values look more pill-shaped. Default: 16.
Icon size
Controls “Icon size” on the storefront. Open the theme editor to preview live. Default: 16.
Padding
Adds empty space (padding) around the section content. Default: 6.
Border radius
Rounds the corners. Higher values look more pill-shaped. Default: 50.
Icon size
Controls “Icon size” on the storefront. Open the theme editor to preview live. Default: 12.
Padding
Adds empty space (padding) around the section content. Default: 4.
Border radius
Rounds the corners. Higher values look more pill-shaped. Default: 50.
Icon size
Controls “Icon size” on the storefront. Open the theme editor to preview live. Default: 20.
Padding
Adds empty space (padding) around the section content. Default: 8.
Border radius
Rounds the corners. Higher values look more pill-shaped. Default: 50.
Icon size
Controls “Icon size” on the storefront. Open the theme editor to preview live. Default: 24.
Padding
Adds empty space (padding) around the section content. Default: 10.
Border radius
Rounds the corners. Higher values look more pill-shaped. Default: 50.
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.