Buttons
Controls the global typography, shape, animation, and hover colors for all buttons across your store.
Where to find it
- In your Shopify admin, go to Online Store → Themes → Customize
- Click the Theme settings (gear icon) in the left panel
- Click Buttons
Settings
Typography
| Setting | Type | Description | Default | Range / Options |
|---|---|---|---|---|
| `button_letter_spacing` | Range | Letter spacing | 0 | Min: -20, Max: 30, Step: 1 |
| `button_text_transform` | Select | Text transform | Uppercase | Unset, Capitalize, Uppercase, Lowercase |
| `button_font_weight` | Range | Font weight | 500 | Min: 100, Max: 900, Step: 100 |
Letter spacing adjusts the horizontal space between each letter in button text. Negative values bring letters closer together, and positive values spread them apart.
Text transform controls the capitalization style of button text. "Unset" leaves text as you typed it, "Capitalize" uppercases the first letter of each word, "Uppercase" makes all letters capital, and "Lowercase" makes all letters small.
Font weight sets how bold or thin the button text appears. Lower values like 100 produce very thin text, while higher values like 900 produce very bold text.
Shape
| Setting | Type | Description | Default | Range / Options |
|---|---|---|---|---|
| `button_shape` | Select | Shape | Capsule | Igloo, Leaf left, Leaf right, Capsule, Without radius, With radius, Full radius, Custom radius |
| `button_custom_radius_desktop` | Range | Custom radius (desktop) | 8 px | Min: 0, Max: 100, Step: 1, Unit: px |
| `button_custom_radius_mobile` | Range | Custom radius (mobile) | 8 px | Min: 0, Max: 100, Step: 1, Unit: px |
Shape determines the corner style of your buttons. Each option gives buttons a distinct silhouette, from sharp square corners ("Without radius") to fully rounded ends ("Full radius" or "Capsule"). Choosing "Custom radius" unlocks two additional controls for fine-tuning.
Custom radius (desktop) sets the corner roundness of buttons on desktop screens, in pixels. This setting is only visible when "Shape" is set to "Custom radius".
Custom radius (mobile) sets the corner roundness of buttons on mobile screens, in pixels. This setting is only visible when "Shape" is set to "Custom radius".
Animation
| Setting | Type | Description | Default | Options |
|---|---|---|---|---|
| `button_animation` | Select | Animation | Diagonal swipe | Swipe, Diagonal swipe, Double swipe, Diagonal close, Zooming in, 4 corners, Position aware, Blob, Collision, Alternate, Smoosh, Vertical overlap, Horizontal overlap, Fade in, Border animation, Scale, Shadow, Rotate, Underline |
Animation controls the hover effect that plays when a visitor moves their cursor over a button. Each option produces a different visual transition using the animation colors defined below.
Colors (light mode)
These colors apply when your store is displayed in light mode.
Animation Primary
| Setting | Type | Description | Default |
|---|---|---|---|
| `button_primary_light_animation_bg` | Color | Background color | #ffffff |
| `button_primary_light_animation_text` | Color | Text color | #000000 |
| `button_primary_light_animation_border` | Color | Border color | #000000 |
The primary animation colors are the starting state of your buttons in light mode. "Background color" fills the button, "Text color" sets the label color, and "Border color" outlines the button edge.
Animation Secondary
| Setting | Type | Description | Default |
|---|---|---|---|
| `button_secondary_light_animation_bg` | Color | Background color | #000000 |
| `button_secondary_light_animation_text` | Color | Text color | #ffffff |
| `button_secondary_light_animation_border` | Color | Border color | #000000 |
The secondary animation colors are what the button transitions to on hover in light mode. The animation effect (set above) moves between the primary and secondary colors.
Colors (dark mode)
These colors apply when your store is displayed in dark mode.
Animation Primary
| Setting | Type | Description | Default |
|---|---|---|---|
| `button_primary_dark_animation_bg` | Color | Background color | #000000 |
| `button_primary_dark_animation_text` | Color | Text color | #ffffff |
| `button_primary_dark_animation_border` | Color | Border color | #000000 |
The primary animation colors are the starting state of your buttons in dark mode. "Background color" fills the button, "Text color" sets the label color, and "Border color" outlines the button edge.
Animation Secondary
| Setting | Type | Description | Default |
|---|---|---|---|
| `button_secondary_dark_animation_bg` | Color | Background color | #ffffff |
| `button_secondary_dark_animation_text` | Color | Text color | #000000 |
| `button_secondary_dark_animation_border` | Color | Border color | #000000 |
The secondary animation colors are what the button transitions to on hover in dark mode. The animation effect (set above) moves between the primary and secondary colors.