Buttons & style
Primary button colour, padding, border, plus per-component radius and shadow.
Updated 2026-05-09
Theme settings → Buttons and Style.
Button settings
| Setting | Used for |
|---|---|
| Padding (Y / X) | Vertical and horizontal padding for primary buttons |
| Border width | Outline thickness (1px default, set 0 for fill-only style) |
Button colours now come from the active color scheme, not standalone settings — see Colors & presets.
.btn.btn--primary→ schemebutton_background+button_label.btn.btn--secondary→ scheme background fill +secondary_button_label.btn.btn--link→ schemelinkcolour, underline
Sections with button blocks expose this as a Button style select. Switch the section's color_scheme to recolour every button inside it.
Border radius
Eight independent radius tokens (Theme settings → Style → Radius):
| Token | Used for |
|---|---|
radius_button | Buttons (primary, secondary), input chips |
radius_input | Form inputs, <select> dropdowns, search, contact form, qty stepper |
radius_badge | Sale / New / custom badges |
radius_card | Product cards |
radius_collection_card | Collection cards (collection-list / list-collections) |
radius_blog_card | Blog cards (Journal section) |
radius_image | Image blocks (hero, content image with text) |
radius_drawer | Cart drawer top corners, quick view modal, dropdown panels, mega menu |
Each takes a px value. 0 = sharp corners (the default for the editorial preset). Try 4–8px for a softer look or 999px on radius_button for fully rounded pills.
Shadows
| Token | Used for |
|---|---|
shadow_card | Default card elevation |
shadow_card_hover | Card elevation while hovered (only kicks in when Lift cards on hover is on) |
shadow_drawer | Cart drawer, quick view, dropdown panels |
Each token has 4 levels: none / soft / medium / strong.
soft = 0 8px 24px rgba(0,0,0,0.06) — barely visible elevation.
strong = 0 20px 48px rgba(0,0,0,0.16) — clearly floating.
Card styling — per card type
Three independent card-style settings. Each controls a different surface:
| Setting | Controls |
|---|---|
card_style | Product cards |
collection_card_style | Collection cards (collection-list / list-collections) |
blog_card_style | Blog cards (Journal section) |
Each takes the same options:
- Flat — no shadow, no border (default editorial)
- Bordered — 1px divider border
- Shadowed — uses
shadow_card
Each also has its own text-align setting:
card_text_aligncollection_card_text_alignblog_card_text_align
These emit body classes you can target in custom CSS: style-card--<value>, style-collection-card--<value>, style-blog-card--<value> (plus the matching style-card-align--* classes).
Hover lift
Theme settings → Style → Lift cards on hover (shadow_hover_enabled). When on:
- Body gets the class
style-shadow-hover - Product / collection / blog cards animate from
--shadow-card→--shadow-card-hoveron hover
Turn on if your card style is Flat and you want a hover affordance without permanently weighting the design.
Form inputs
Theme settings → Form inputs → Style (input_style). One global setting that applies to every input site-wide (contact form, newsletter, search, account / address forms, qty steppers).
| Option | Look |
|---|---|
| Underline (default) | Single bottom border, transparent fill — editorial / minimal |
| Bordered | 1px outline on all sides, transparent fill |
| Filled | Solid background, no border |
| Filled pill | Solid background, fully rounded corners |
The chosen variant emits style-input--<variant> on <body>, so you can scope custom CSS to a specific input style.