Buttons
Buttons are one of the most important UI elements in your Shopify store.
They influence clicks, navigation — and ultimately conversions.
In this section, you’ll learn how to control:
- Spacing (padding)
- Hover animations
- Outline button behavior
Tip: Keep buttons consistent across the store to create trust and improve usability.
🧩 Button Spacing
This group controls the internal spacing inside your buttons.
Vertical padding
Controls space top + bottom.
- Smaller padding → compact, minimal buttons
- Larger padding → bold, CTA-style buttons
Horizontal padding
Controls space left + right.
- Smaller padding → short labels fit better
- Larger padding → makes CTAs stand out
Best practice: Test spacing on both desktop and mobile to keep buttons readable without crowding the layout.
✨ Hover Effects
This setting defines how the button reacts when users hover over it.
| Setting | Description |
|---|---|
None | No visual change. Useful for simple secondary buttons. |
Simple | Background color changes — no animation. Clean and minimal. |
From Top | Animated background slides in from the top. |
From Right | Animated background slides in from the right. |
From Bottom | Animated background slides in from the bottom. |
From Left | Animated background slides in from the left. |
🖼 Outline Buttons
Outline buttons are usually used for:
- Secondary CTAs
- Less important actions
- Subtle UI elements
Stay outline on hover
When enabled:
- Only border + text color change
- No background color is added
- Button stays “outlined” — even on hover
Perfect for secondary actions like:
- “Learn more”
- “View details”
- “Cancel”
✅ Summary
With the Buttons Theme Settings, you can:
- Control button spacing for better readability
- Add engaging (but not distracting) hover animations
- Keep outline buttons clean and minimal
Configured correctly, these settings help your Shopify store feel premium, fast, and conversion-focused.