Product cards
How product cards look across the store, from swatches to quick add.
Product cards appear in collections, search, the bestsellers slider, kits and the cart. Their look is set once, in Theme settings › Product cards.
What a card shows
- Image, with a second image on hover when the product has one.
- Shade swatches, up to six, with the rest counted behind a plus.
- Name, short description and price, with the saving shown on sale.
- Quick add, a round plus button that adds the product without leaving the page.
Settings
| Setting | What it changes |
|---|---|
| Image shape | Square, portrait or the image's own shape |
| Image background | Uses the scheme's surface colour behind cut out photos |
| Show swatches | Turns the shade swatches on or off |
| Hover | Second image, a gentle zoom, or nothing |
| Quick add | Plus button, full button, or hidden |
Motion on cards
When a shopper hovers a swatch, the card image changes to that shade and slides back when the pointer leaves. With Reduce motion on in the shopper's device settings, the image swaps without the slide.