Corners, borders, and depth

These settings decide whether your store reads sharp and technical or soft and friendly. They are shape rules rather than colors, and because every card, button, input, and panel follows them, one small change repeats across every page. That makes this group one of the quickest ways to shift the whole mood of a store.

You will find them in the theme editor under Theme settings (the gear icon at the bottom of the editor sidebar) in the Corners, borders, and depth group. Everything here applies store-wide. Options that affect only one part of a page live on the individual section instead.

Shape your corners

• Card corner radius sets how rounded cards, media, and surface panels are, from 0 to 24px. Defaults to 0, which gives crisp square corners and a confident, editorial feel. Raising it to around 8px softens the store without making it look playful; the higher end suits friendly, approachable brands. Check a collection page after changing it, since that is where the most corners appear at once.
• Button and input corners controls the corner shape of buttons and form fields, separately from cards. Choose Sharp, Rounded, or Pill, which makes fully rounded ends. Defaults to Sharp. Pill buttons feel warm and modern, and pair well with a rounded card radius.
• Tag and filter corners applies to small labels such as filter tags and applied filter chips. Choose Sharp or Pill. Defaults to Pill, which keeps chips reading as removable tags rather than as buttons. Look at a collection page with filters applied to see it.
• Cut corners slices the top-right and bottom-left corners of buttons for a cut, technical look. Choose None or Angled cut. Defaults to None. This one is a strong signature, so use it when your brand leans industrial or utilitarian, and leave it off otherwise.

Set your line weight

• Border thickness sets the weight of borders, dividers, and outlines, from 0.5 to 3px. Defaults to 0.5px, a fine hairline that keeps pages calm. Move toward 1.5px or higher when you want structure to be part of the design and lines to feel deliberate rather than quiet.
• Divider style sets the line style for dividers and rules, such as the hairline under a price and the borders in accordion rows. Choose Solid or Dashed. Defaults to Solid. Dashed adds craft and hand-made character, and it reads best when border thickness stays low.

Keep the focus ring clear

The focus ring is the outline that appears when someone moves through your store with a keyboard. It matters for accessibility, so the goal is always visibility first, styling second.

• Thickness ranges from 2 to 4px and defaults to 2px. Go thicker if your store uses busy imagery behind links.
• Gap is the space between the ring and the element, from 0 to 6px. Defaults to 2px, which keeps the outline readable without crowding.
• Color draws the ring in either the Text color or the Accent color from the active scheme. Defaults to Text color, the safest choice on most backgrounds. Switch to accent when your accent is strong and clearly visible against every scheme you use.
• Glow adds an extra soft edge behind the ring: None, Soft halo, or Glow. Defaults to None.

Tip

To check your focus ring, open your storefront and press Tab a few times. The outline should be obvious at a glance on every background you use, including your header and any dark section. If it is hard to spot, raise the thickness or switch the color.

Add depth where you want it

• Shadow sets the depth of cards and raised panels. Flat (no shadow) keeps surfaces clean and is the default. Soft drop shadow adds a tinted shadow that lifts cards off the page and helps them read as separate items on busy grids. Accent glow adds a colored halo drawn from your accent color, which suits darker schemes and bolder brands.

Depth works best in one direction. If you choose a shadow, keep the border thickness low so cards are not both outlined and lifted, and check a product grid and the cart drawer to see the result in context.

Note

Every theme style arrives with these values already tuned to its look, so the starting point is a considered one. Change a single setting at a time and preview it, and you will always know which choice made the difference. See Theme styles for the starting points, and Colors for the schemes these shapes are drawn in.