Buttons and corners

Corners

Choice · default Pill

Buttons, fields, panels, the notice, the scrollbar, color swatches and Shopify's payment buttons.

Options: Square, Rounded, Pill

Show text in capitals

Checkbox · off by default

At the small size with letter spacing. Shopify's branded payment buttons keep their own look.

Hover

Choice · default Draw in

How a button answers the pointer. Draw in: its fill draws in from the edge. Soften: the fill turns a step lighter (an outlined button takes a faint fill). Lift: the button rises 2px. Underline: its words underline. Pressing always shows the fill drawing in.

Options: Draw in, Soften, Lift, Underline, None

Show a bag icon on Add to bag

Checkbox · on by default

Shown before the words on Add to bag, and on the buy bar's button unless the buy bar's Button is Icon only or Text only.

First button

Choice · default Outlined

In every section, on images and everywhere else. Filled is the solid button, Outlined a hairline one, Underline words over a rule, Link words and an arrow. On an image, Filled and Outlined take the words' color. Add to bag, Checkout and form buttons keep the filled button.

Options: Filled, Outlined, Underline, Link

Second button and after

Choice · default Underline

A section's second button, and every button after the first in a Buttons block.

Options: Filled, Outlined, Underline, Link

Alignment

Choice · default Match the content

Match the content lines the buttons up with the words around them.

Options: Match the content, Left, Center, Right

Two or more

Choice · default Side by side

Options: Side by side, Stacked

Stretch to full width on phones

Checkbox · on by default

Filled and Outlined buttons take the width of the screen on phones; Underline and Link stay their own width.

Close button

Choice · default Round icon

In sheets and the navigation drawer.

Options: Round icon, Word and icon

Close button place

Choice · default Beside the panel, halfway down

From 768px, for drawers, the navigation drawer included: beside the panel on the dimmed page, or in the panel's top corner.

Options: Beside the panel, halfway down, Beside the panel, level with its title, Inside the panel

Close button on hover

Color scheme

The circle takes this scheme's background and the icon its text color.

Enable custom tooltips

Checkbox · on by default

Names shown on hover, such as a swatch's color, appear in the theme's own tooltip: in the page's colors, rounded with the buttons, following the cursor. When off, the browser shows its own.

Enable Liquid glass

Checkbox · on by default

A frosted, see-through background that lets the page show softly behind the tooltip. When off, it is solid.

When removing an item

Text

When editing an item

Text