Buttons & corners

This page covers two separate groups in the theme editor: Theme settings → Buttons and Theme settings → Corners. They sit next to each other in the sidebar, and they are documented together because between them they decide one thing. How hard or how soft the theme’s edges read.

Buttons

Found under Theme settings → Buttons, split into Primary button, Secondary button, and Filter and tag buttons.

Button colors are not here. Every button takes its fill, text and hover color from the primary button color of whichever color scheme the section is using, so a button always belongs to the surface it sits on. These settings control shape and type only. See Colors.

Primary button

The filled call to action. That is Add to cart, Checkout, Subscribe, and the first button in a section.

Setting	What it does	Default
Border thickness	Border drawn around the filled button (range 0–4px). At 0 the button is a plain filled block.	0px
Corner radius	Corner rounding (range 0–100px). At 100 a standard-height button reads as a full pill.	0px
Font	Which typographic role the button label uses: Body or Mono. The role’s weight and letter spacing travel with it.	Mono
Text case	Default keeps the label as you typed it. Uppercase sets it in capitals.	Uppercase

Secondary button

The outlined, quieter action. That is View all, Continue shopping, and the second button in a section.

Setting	What it does	Default
Border thickness	Border drawn around the transparent button (range 0–4px). This border is the button’s whole silhouette.	1px
Corner radius	Corner rounding (range 0–100px).	0px
Font	Body or Mono, as above.	Mono
Text case	Default or Uppercase.	Uppercase

Caution

Setting the secondary Border thickness to 0 leaves an outlined button with no outline at all, which is just a word floating on the page. The theme keeps a 1px floor on the plain submit buttons it cannot afford to lose, such as customer login and account activation. Ordinary section buttons will follow you down to 0.

Filter and tag buttons

The small chips a shopper can act on: the applied-filter chips on a collection or search page, and the tag chips on the blog and article pages.

Setting	What it does	Default
Corner radius	Corner rounding on those chips (range 0–40px). At 40 they are full pills.	40px

Corners

Found under Theme settings → Corners. Each control governs one family of surfaces, theme-wide, so you set a shape once rather than per section. The two that draw a rectangle, Inputs and Media, ship square. Cards ships at a 2px hairline round. The two that are round by design, Badges and Swatches, ship at the top of their range.

Setting	What it does	Default
Inputs	Form fields, selects, quantity steppers, the search field, and the customer account forms (range 0–32px).	0px
Media	Image and video frames, covering the product gallery, section imagery, promotional tiles and the lookbook rail. Range 0 to 32px.	0px
Cards	Cards, plates and panels, covering product cards, testimonial and column blocks, the pickup box, Custom Liquid blocks, and the sale and sold-out badges on a product card. Range 0 to 32px.	2px
Badges	The small counters and labels, covering the header cart count, the value chip on the price filter, the round icon medallions in Icon list, image captions on Scrolling promotion and Image comparison, the round buttons in the image viewer, and inline code in rich text. Range 0 to 100px, in steps of 2. At 100 they are fully round.	100px
Swatches	Color swatches on product cards, in the variant picker, and in the filter panel. Range 0 to 32px, in steps of 2. At the maximum they are circles. Drop it to 0 to draw them as squares.	32px

Note

The sale and sold-out badges on a product card follow Cards, not Badges. They are plates drawn over a photograph, and they are meant to match the card they sit on. Badges governs the round counters and chips instead.

A quick way to change the theme’s whole temperature. Leave the five where they ship for the tailored, ruled look, and drop Cards to 0 as well if you want it stricter still. For something softer and more contemporary, raise Cards and Media together to 8 or 12px. The two need to move as a pair, or a rounded card will frame a square photograph.

Related: Colors · Typography · Product cards · Lapels support replies within 12 hours.