How do I change button colors and hover style?

Button colors, hover state, and shape are controlled in Theme settings — here's where to find each setting.

Button colors are controlled globally in one place — the Colors settings panel.

Go to Theme Editor → Theme settings → Colors → Buttons and links.

Three settings control all buttons across your store:

Setting	What it controls
Base	Text color on Solid buttons (typically white or dark neutral)
Accent	Background of Solid buttons, outline and text of Outlined buttons, and all UI accent highlights (star ratings, swatch outlines, filter tags)
Hover	The button appearance when a customer mouses over it

---

Tips

A tight relationship between Accent and Hover — one shade darker or lighter — feels polished. A dramatic shift (e.g. black to brand red) creates high energy. Either works; the key is consistency.

Accent is the single most impactful color in the theme. Changing it updates buttons, links, star ratings, swatch outlines, and selected filter tags across the entire store.

---

Per-section button styles

Individual sections can override the global color scheme. If a specific section's buttons look different from the rest of the store:

1. Open the section in Theme Editor
2. Check if a Color scheme is set to a custom value
3. Switch it to Base to inherit the global Buttons and links colors

---

Button shape (corner radius)

To change whether buttons are sharp, rounded, or pill-shaped:

Go to Theme settings → Shapes → Buttons and adjust the corner radius slider.

---

Related

• Colors — full color system reference
• Typography — button label font is controlled under the Custom typography preset