Product cards appear in collections, search, featured collections, recommendations and the menu. Their look is set once, in Theme settings.
Style
In Theme settings > Style > Product cards, choose Minimal (photo and text, nothing else), Framed (a soft card around each product) or Centered caption.
Images
In Theme settings > Product cards:
| Setting | What it does |
|---|---|
| Image ratio | Portrait (3:4), Tall (2:3), Classic (4:5) or Square (1:1). Match your photography |
| Image fit | Fill crops to the ratio; Fit shows the whole photo on a plain background |
| Show second image on hover | The product's second photo appears when the pointer rests on the card |
| Play product video on hover | Products with an uploaded video play it, muted, on hover. It loads only on hover, never on touch screens or with reduced motion |
Colors and sizes
- Show color swatches and Maximum swatches show the colors a product comes in. Tapping a swatch changes the card's photo.
- Swatch colors sets colors for option values that have no Shopify swatch, one per line:
Raw Indigo: #1f2a44. Swatches set in Shopify's product categories are used first. - Show available sizes lists the sizes in stock; sold-out sizes are crossed out.
Badges
| Setting | What it does |
|---|---|
| Badge position | Top left or bottom left of the photo |
| Sale badge | Percentage off, the word Sale, or hidden |
| Show new badge for | Days after publishing a product is marked New. 0 hides it |
| Low stock threshold | "Only 3 left" when stock falls to this number. 0 hides it |
Badge colors are in Theme settings > Colors > Badges, and their shape (square, pill or underline) in Theme settings > Style > Badges.
Quick add
Enable quick add puts an add button on each card. For products with sizes, it opens a small sheet to choose the size (the shopper's remembered size is already selected) and adds to the cart without leaving the page.
Was this guide helpful?
Still need help?Write to us with your shop's address and a screenshot. We reply within two business days, Monday to Friday, usually sooner.
Contact support