Size, shape and layout
These settings decide how an option's values sit on the page: how big they are, what shape a swatch has, and what happens when there are too many to fit on one line. You find them in the style editor: Styles, then Customize on a style.
Overall size
Overall size changes the item size, the spacing and the text size together, so the style stays balanced:
| Setting | Result |
|---|---|
| Compact | Smaller items and tighter spacing, for busy product pages. |
| Standard | The default. |
| Large | Bigger items with more room around them. |
| Extra large | The largest items, for image-led stores. |
Product card styles use the same four steps with smaller values throughout, so cards stay tidy. If you change a single value in Advanced styling afterwards, Overall size shows Custom.
Shape
Color swatch, Image swatch and Variant image come in six shapes:
| Shape | Looks like |
|---|---|
| Sharp square | A square with crisp corners. The starting shape for built-in styles. |
| Rounded square | A square with softened corners. |
| Circle | A round chip. |
| Rounded | A rounded tile. |
| Hexagon | A six-sided tile. |
| Diamond | A square turned on its corner. |
Buttons, pills, polaroids and dropdowns don't use Shape. Round them off with Corner radius in Advanced instead.
When there are many values
For product page styles built on swatches, pills, polaroids or buttons, choose how a long row behaves:
| Setting | Behaviour |
|---|---|
| Wrap | Values flow onto as many lines as needed. Fine for up to about a dozen values. |
| Compact +N | Shows the first few values, then a +N button that reveals the rest when clicked. |
| Scroll | One line that scrolls sideways, with arrows at each end. |
Compact +N settings
- Max swatches per product: how many values show before the +N (3 to 20, 5 by default).
- +N button style: Match the style, Solid border or Dashed border. For solid and dashed you can also set the +N border and text colours.
- If the shopper's selected value sits beyond the limit, the row opens by itself so the selection is always visible.
Note
Product card styles always work this way: they show up to Max swatches per product, then a +N that opens the product page. See Limit swatches per card.
Colour split direction
For Color swatch, Swatch in pill and Dropdown with swatches, choose how two-colour values such as Black / White are split: Diagonal (either way), Horizontal or Vertical.
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.