Layout & spacing
These are the theme-wide settings that shape how every page feels: how wide the page is, how much space sits above and below each section, how rounded cards and buttons look, and how product cards display information.
Page-wide layout
| Setting | What it does |
|---|---|
| Page width | Sets the maximum width, in pixels, of the main content area across the theme. Sections wider than this are centered with equal space on either side. |
| Section padding | Sets the default top and bottom padding, in pixels, applied to sections that don't override it themselves. |
| Card corner radius | Sets how rounded the corners are on product cards, images, and buttons throughout the theme. |
| Card shadow | Controls whether product cards display a drop shadow, and how strong it is. |
| Animations enabled | Turns scroll and hover animations on or off across the entire theme. |
| Animation speed | Sets how fast those animations play, in milliseconds. |
The section padding setting here is a theme-wide default, but it's worth knowing that most individual sections also include their own top and bottom padding range sliders, measured in pixels. A section's own padding setting always overrides this default, so use the theme-wide setting to establish a consistent baseline, then adjust individual sections only where needed.
Tip: If your homepage feels cramped or sections run together, check the theme-wide section padding first before adjusting every section individually. It's the fastest way to add breathing room across the whole page.
Product card display
Product cards appear throughout the store, in collections, featured product sections, and search results. Their behavior is controlled globally rather than per section:
| Setting | What it does |
|---|---|
| Image ratio | Sets the aspect ratio used for the primary product image on every card (for example, portrait or square). |
| Secondary image | Shows a product's second image on hover, letting customers preview an alternate angle without opening the product page. |
| Show swatches | Displays color swatches on the card when a product has color variants. |
| Add-to-cart button style | Controls how the add-to-cart action appears on a card, for example only on hover or always visible. |
| Show quantity selector on card | Adds a quantity control next to the add-to-cart button. Applies to single-variant products only. |
| Show vendor | Displays the product vendor name on the card, above or below the title depending on the card layout. |
The old quick add checkbox is deprecated in favor of the add-to-cart button style setting above, which covers the same behavior with more options.
Sale, new, and stock badges
Badges are small labels that appear on product cards to flag sale pricing, new arrivals, or stock status. All badge behavior is set globally here rather than per product or per section.
| Setting | What it does |
|---|---|
| Show sale badge | Displays a badge on any product currently on sale. |
| Sale badge style | Chooses whether the badge shows a percentage off or a custom text label. |
| Sale badge custom text | Sets the text used when the sale badge style is set to custom text. |
| Show new badge | Displays a badge on products published within the number of days set below. |
| New badge days | Sets how many days after publishing a product still counts as new. |
| New badge text | Sets the label text shown on the new badge. |
| Show sold out badge | Displays a badge when a product or its selected variant is out of stock. |
| Stock indicator style | Chooses how low stock is communicated, for example as a badge. |
| Show stock counter | Displays the exact number of items left once stock falls below the threshold. |
| Stock counter threshold | Sets the inventory count at which the low stock counter starts showing. |