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. |
| Play video on hover | If a product has a video added to its media, it plays automatically when a shopper hovers the card, instead of the second image. |
| 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. |
| Enable quick add | Adds a quick-add button to product cards, letting customers add a single-variant product to cart, or open the quick view for multi-variant products, without leaving the collection grid. |
| 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. |
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, an amount 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. |
| Show low-stock counter | Turns on the low-stock pill (a colored dot/badge with the remaining quantity) on cards and the product page. |
| Stock indicator style | Chooses how the stock count is displayed: Badge, Dot + text, or Text only. |
| Product page stock indicator placement | Controls whether the stock count appears inline with the sale/new badges, as its own separate line below, or both. Showing both at once displays the count twice, most stores should use "separate." |
| When to show it | "Always" shows the pill at every stock level, including plenty in stock. "Only when stock is low" hides the pill until stock drops to the medium threshold. |
| Medium stock threshold (orange) | At or below this quantity, the pill turns orange. |
| Low stock threshold (red) | At or below this quantity, the pill turns red. |
