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.
Last updated
Was this helpful?
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:
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

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.
Individual sections can override the global color scheme. If a specific section's buttons look different from the rest of the store:
Open the section in Theme Editor
Check if a Color scheme is set to a custom value
Switch it to Base to inherit the global Buttons and links colors

To change whether buttons are sharp, rounded, or pill-shaped:
Go to Theme settings → Shapes → Buttons and adjust the corner radius slider.

Colors — full color system reference
Typography — button label font is controlled under the Custom typography preset
Last updated
Was this helpful?
Was this helpful?
