Shape and corners
Theme settings > Shape sets the corners and borders of buttons, form fields, product cards, badges and arrow buttons. One Corner style setting changes them all together.
How to set it up
Step 1: Choose a corner style
- Go to Theme settings > Shape.
- Pick a Corner style (1): Sharp for square corners, Soft for slightly rounded ones, or Round for pill buttons and round corners.
- The style sets the corner radius of buttons, form fields, product cards, badges, variant options, swatches, upsell cards, the filter panel and the scroll to top button.
Step 2: Set each radius yourself (optional)
- Choose Custom, the default. The Corner radius settings appear.
- Set the radius of buttons, form fields (with the Outline field style), product cards, badges and the round arrow buttons, one by one.
Step 3: Shape the quantity selectors
- In Quantity selector corners, choose Square, Match buttons or Match form fields for the quantity selectors on the product page, quick view, cart drawer and cart page.
Step 4: Set the borders
- Under Borders, set the Border thickness of buttons and of form fields.
Settings reference
Shape
| Corner style | Sharp, Soft and Round set every corner radius at once. Custom keeps the individual radius settings. Options: Custom, Sharp, Soft, Round. |
|---|---|
| Corner radius | |
| Corner radius | Buttons. |
| Quantity selector corners | For the quantity selectors on the product page, quick view, cart drawer and cart page. Options: Square, Match buttons, Match form fields. |
| Corner radius | Form fields, with the Outline field style. |
| Corner radius | Product cards. |
| Badge corner radius | Slider. |
| Corner radius | Round arrow (chevron) buttons. |
| Borders | |
| Border thickness | Buttons. |
| Border thickness | Form fields. |
How it works
- Custom keeps every radius you set before. Switching back to Custom after trying Sharp, Soft or Round brings your own values back.
- Sections with images have their own Corner radius setting for media, and every section can be rounded with Make section rounded. See Section layout and spacing.