Border radius
How rounded corners are across the store. Separate sliders cover cards, buttons, form fields, badges and pop-ups, so you can make the whole design sharp, soft or a mix of both.
Where to find it: In the theme editor, click the gear icon (Theme settings) in the left sidebar, then open Border radius.
Good for
- Switching the whole store between a sharp and a soft look
- Making pill-shaped buttons while keeping cards square
Settings
| Cards | Corner rounding for product, collection and blog cards, image blocks and card-style panels. 0 gives square corners.
Adjustable from 0px to 40px (default 8px). |
| Buttons | Corner rounding for buttons, including slider arrows and the small buttons on product cards. Set it high (around 40px) for pill-shaped buttons.
Adjustable from 0px to 40px (default 4px). |
| Input fields | Corner rounding for text fields, dropdowns and quantity selectors.
Adjustable from 0px to 40px (default 4px). |
| Badges | Corner rounding for product badges, icon-list badges and other small labels.
Adjustable from 0px to 40px (default 4px). |
| Modals | Corner rounding for pop-ups and panels that open on top of the page, such as the promo pop-up, quick-add options and quiz results.
Adjustable from 0px to 40px (default 8px). |
Tips
- Use one or two values. Rounding cards, buttons and fields the same way looks deliberate. Many different values look random.
- Pill buttons need a high value. Around 40px turns standard buttons into pills. Anything above half the button's height looks the same.
- Square swatches stay square. Color swatches follow Color swatches, not these sliders.