Layout, shape and buttons
Three theme settings groups shape the whole store: Layout sets page widths, side padding, gaps and section spacing; Shape sets corner radius and line thickness; Buttons sets button shape, size and hover effects.
How to set it up
Step 1: Layout
- Open Theme settings > Layout and set the Standard, Narrow and Wide widths (1), side padding, grid gaps and the Section spacing scale.
Step 2: Shape
- In Shape, set the media, card and input corner radius, the line thickness and section dividers.
Step 3: Buttons
- In Buttons, set the shape (square, soft or pill), size, the arrow on primary buttons, the hover and label animations, the link hover and the add to cart button.
Settings reference
Layout
| Standard width | The page width most sections use. |
|---|---|
| Narrow width | Slider. |
| Wide width | Slider. |
| Boxed corner radius | Slider. |
| Drawer and pop-up corner radius | Slider. |
| Rounded section side spacing | 0: a rounded section overlaps the sections around it, so its corners show them. Above 0: it floats as a card on the page background. |
| Side padding (desktop) | Slider. |
| Side padding (mobile) | Slider. |
| Grid gap (desktop) | Slider. |
| Grid gap (mobile) | Slider. |
| Section spacing scale | Multiplies the top and bottom padding of every section. |
Shape
| Media corner radius | Slider. |
|---|---|
| Card corner radius | Slider. |
| Input corner radius | Slider. |
| Line thickness | Options: Hairline (1px), Bold (2px). |
| Show section dividers | Thin rules between stacked sections that share a color scheme. |
Buttons
| Shape | Options: Square, Soft, Pill. |
|---|---|
| Size | Options: Small, Medium, Large. |
| Show arrow on primary buttons | Turns this on or off. |
| Background hover | Options: Curved fill, Slide fill, Light sweeps across, Lift, None. |
| Fill direction | Options: From bottom, From top, From left, From right. |
| Label animation | Rolling: the label rolls out as a copy rolls in. Cascade: the letters drop in one after another. Options: None, Rolling, Cascade. |
| Rolling direction | Options: From bottom, From top, From left, From right. |
| Link hover | Menus, footer links, text links and link-style buttons. Options: Underline draws in, Underline slides through, Marker highlight, Fade. |
| Animate arrows and chevrons | Arrows lean the way they point on hover. Chevrons turn when their menu opens. |
| Close button animation | On hover. Close buttons of drawers and panels also turn in as they open. Options: Draw the cross, Fill and turn, None. |
| Magnetic buttons | Buttons follow the cursor slightly on desktop. |
| Add to cart button | |
| Background hover | Options: Same as buttons, Curved fill, Slide fill, Light sweeps across, Lift, None. |
| Label animation | Options: Same as buttons, None, Rolling, Cascade. |
Logo and favicon
| Logo | An image from your files. |
|---|---|
| Mobile logo | Optional. Replaces the logo on phones. |
| Logo for dark backgrounds | Used on color schemes with a dark background. |
| Logo width (desktop) | Slider. |
| Logo width (mobile) | Slider. |
| Favicon | 32 × 32px .png recommended. |