Advanced styling
The Advanced section of the style editor exposes every detail of a style: borders, hover effects, button colours, text, spacing and tooltips. Everything is optional; anything you leave alone follows the style's defaults.
Open Advanced
- 1
Open the style
In Styles, click Customize on the style.
- 2
Expand Advanced
Scroll to Advanced and open it if it's collapsed. Settings are grouped as described below.
The Advanced section of the style editor - 3
Adjust and watch the preview
The preview updates as you type. A value outside its range is flagged until you fix it.
- 4
Save
Click Save. Every option using the style updates.
Note
The settings shown depend on the display type: Button colors only appear for button styles, Dropdown chip shape only for dropdowns, and so on.
Colours take a hex code such as #303030. Starting values below are the general defaults; some styles start differently, for example pill styles start fully rounded.
Size & spacing
| Setting | Range | Starting value |
|---|---|---|
| Swatch size | 16 to 80 px | 40 px |
| Spacing between items | 0 to 40 px | 10 px |
| Button padding (horizontal) | 0 to 40 px | 18 px |
| Button padding (vertical) | 0 to 24 px | 12 px |
Border & corners
| Setting | Options | Starting value |
|---|---|---|
| Border width | 0 to 8 px | 1 px |
| Border color | Any colour | #b8b8b8 |
| Border style | Single, Double (inner ring) | Single |
| Corner radius | 0 to 999 px (999 makes a pill) | 0 px |
| Dual colour split | Diagonal, Horizontal, Vertical | Diagonal |
Selected & hover
| Setting | Options | Starting value |
|---|---|---|
| Selected color | Any colour | #303030 |
| Selected border width | 1 to 8 px | 2 px |
| Hover border color | Any colour | #666666 |
| Hover shadow | None, Soft, Medium, Strong | None |
| Hover zoom | 100 to 150 % | 100 % |
| Hover lift | None, Lift up | None |
Shadow, zoom and lift can be combined.
Button colors
Swatches take their fill from your mapped colours, so these only apply to button styles.
| Setting | Starting value |
|---|---|
| Background | #ffffff |
| Background (hover) | #f5f5f5 |
| Background (selected) | #303030 |
| Text (hover) | #303030 |
| Text (selected) | #ffffff |
Text
| Setting | Options | Starting value |
|---|---|---|
| Label font size | 8 to 24 px | 14 px |
| Text color | Any colour | #303030 |
| Text case | Normal, UPPERCASE | Normal |
| Text weight | Normal, Medium, Bold | Normal |
Layout
| Setting | Options | Starting value |
|---|---|---|
| Alignment | Left, Center, Right | Left |
| Space above | 0 to 40 px | 0 px |
| Space below | 0 to 40 px | 0 px |
| Max values shown | 0 to 20 | 5 |
| +N style, +N border color, +N text color | See Compact +N settings | Dashed border |
| Dropdown chip shape | Circle, Rounded square, Sharp square | Circle |
| Photo sharpness | Standard (120px), Sharp (240px), Very sharp (480px) | Standard |
Tooltip
| Setting | Options | Starting value |
|---|---|---|
| Tooltip background | Any colour | #303030 |
| Tooltip text | Any colour | #ffffff |
| Tooltip text size | 8 to 18 px | 12 px |
| Tooltip corner radius | 0 to 20 px | 4 px |
Note
Sold-out colours and fading are shop-wide, not per style. See Sold-out and unavailable values.
Tip
Need something Advanced can't do? Use Custom CSS, or ask us through Chat with us.
Need help?
Open the app and click Chat with us on the Dashboard for free setup assistance, or contact us with your store address and what you are stuck on.