In the theme editor: Customize›Theme settings›Product cards
Product cards
How products look everywhere they appear in a grid: the image, the name and price, the coin for a quick add, and the badges.
A product’s own “Badge” field shows its own word on the card, such as “New”. Sale and sold-out badges come automatically.
Settings
Image
- Image ratio
- Choice: Square, Portrait, Landscape, Match the product imageDefault: Portrait
- Image corners
- Slider, 0 to 40 pxDefault: 12 pxFrom 0 (square corners) to fully rounded. 12 matches the button corners.
- Show second image on hover
- On or offDefault: OnOnly on devices with a mouse.
Content
- Show vendor
- On or offDefault: Off
- Color dots
- On or offDefault: OnTiny dots under the price when a product has a color option, from Shopify's color swatches or the color name.
Coin on the card
- What the coin on the card does
- Choice: Smart, with peek on every card (recommended), Smart only, Always open the quick view, No coin: the whole card opens the productDefault: Smart, with peek on every card (recommended)Smart: a product without options goes straight to the cart. A product with one choice (size, color or material) opens a fan of its values on the card itself, and a tap adds it. A product with several options opens quick view. "Peek" adds a small glass button in the top corner that always opens quick view.
- Plus button color
- ColorThe plus on product images. Blank: the dark color of the page. A color fills the plus.
- Plus icon color
- ColorBlank: chosen automatically, dark on a light plus and light on a dark one.
- Add button when ready
- ColorDefault: #2563EBThe plus on a product card, once its short fan is open and another tap adds the product to the cart. If it is the same as the plus color, the plus swaps its colors, so it always changes.
- Plus on the add button
- ColorDefault: #FFFFFF
Details
- Sale percentage on the badge
- Choice: Shown price (recommended), Up to: the highest discount, Hide when percentages differDefault: Shown price (recommended)For products whose variants have different prices. Shown price: the percentage and the compare-at price belong to the variant whose price the card shows. If it is not on sale there is no sale badge. Up to: the highest discount on the product, worded "up to". Hide: a sale badge only when every available variant has the same percentage. Products with a single price are not affected. On the product page and in quick view the shopper picks a variant and the price and percentage always belong to it, so this setting does not apply there.
- Card price weight
- Choice: Regular, BoldDefault: RegularThe price on product cards in collections, search and product rows. Bold matches the product page.
- Badge on discounted products
- Choice: Sale, Percentage (23% off)Default: SaleWhat the pill on the image says when a product is on sale. For your own text on any product (New, Bestseller), fill in the product metafield custom.badge.
- Shine on the button
- On or offDefault: OnA light sweep every few seconds, only while the button is on screen.
Something here doesn’t match what you see in your editor? Tell us and we will fix the guide.