Product card

The product card used in collection grids, search results, related products and product carousels. These settings control the image, which details are shown (vendor, rating, stock, swatches), and how shoppers can add to cart or open quick view straight from the card.

Where to find it: In the theme editor, click the gear icon (Theme settings) in the left sidebar, then open Product card.

Good for

Letting shoppers add to cart or pick a size without opening the product page
Showing color swatches, ratings and low-stock hints right on the grid
Adding small feature badges (for example Vegan, Free returns) to every card

Set up the icon list

In Shopify admin, go to Settings → Custom data → Metaobjects and add a definition, for example Product icon.
Give it a field with the key icon (a File for your own image, or Single line text holding an icon name from the theme's icon set), and a Single line text field with the key text.
Under Settings → Custom data → Products, add a product metafield that is a list of references to that metaobject, for example custom.icons.
On each product, pick the icon entries to show.
Back here, turn on Enable icon list and enter the metafield's namespace and key (for example custom.icons) in Metafield key.

Settings

Media

Image ratio	The shape product images are cropped to on cards. Adapt to image keeps each image's own shape, which can make a grid uneven if your photos differ. Choose Portrait (3:4) (default), Square (1:1), Landscape (4:3) or Adapt to image.
Show additional images on desktop	Lets cards on desktop show the product's other images, not just the first one. Only products with more than one image are affected. Mobile cards show the first image only. On by default.
Images to show	How many of the product's images a card can show, counting the first one. Adjustable from 1 to 4 (default 4). Only appears when Show additional images on desktop* is on.*
Image navigation	How shoppers move between those images. Dots adds small dots under the image that change it when clicked, Hover cycles through the images while the pointer is over the card, and Both does both. Choose Dots, Hover or Both (default). Only appears when Show additional images on desktop* is on.*

Swatches and variants

Show color swatches	Up to four are shown. On by default.
Desktop swatch size	The size of the color swatches on cards on desktop. Adjustable from 24px to 44px (default 30px).
Mobile swatch size	The size of the color swatches on cards on phones. Adjustable from 20px to 32px (default 30px).
Show variant option	For products with more than one variant, adds a View options bar to the card. It opens a panel where shoppers pick a size or color and add to cart without leaving the page. It also makes card swatches clickable. On by default.
Show swatches	Shows color swatches inside the variant options panel. On by default. Only appears when Show variant option* is on.*

Actions

Show vendor name	Shows the product's vendor above the title. Hidden on products with no vendor set. On by default.
Show product rating	Shows star ratings under the title. You need a reviews app that saves ratings to Shopify's standard product rating field. Products with no rating show nothing. On by default.
Show stock alert	Shows a small stock line such as 3 left when the first available variant has between 1 and 10 units in stock. Shopify must be tracking that variant's inventory. On by default.
Show unit price	Shows the price per unit (for example $2.50 / 100ml) under the price, for variants that have unit pricing set in Shopify admin. On by default.
Show cart discount text	Uses the cart discount bar value to display a discount message on product cards. Off by default.

Add to cart button

Position	Overlay puts a small + button on the image. It only appears on single-variant products that are in stock; products with options use View options instead. Bottom adds a full-width button under the price. None removes the buy button from cards. Choose Overlay (Quick add) (default), Bottom (Add to cart) or None.
Style	Which button colors the add-to-cart button uses, as set in the card's color scheme. Choose Primary button (default) or Secondary button.
Align to the bottom of the card	Keeps bottom add-to-cart buttons in a straight line along the bottom of a row, even when titles wrap to different lengths. Only works when Position is Bottom (Add to cart). Off by default. Only appears when Position* is Bottom (Add to cart).*

Quick view button (Default)

Enable on desktop	Shows the quick-view (magnifier) button on standard product cards on desktop. On by default.
Enable on mobile	Shows the quick-view button on standard product cards on phones. Off by default.
Style	Which button colors the quick-view button uses: the scheme's primary or secondary button colors. Choose Primary button (default) or Secondary button.

Quick view button (Mini)

Enable on desktop	Shows the quick-view button on mini cards, the small side-by-side cards in search results, Image with product cards, Discovery, Sales countdown and shoppable videos, on desktop. On by default.
Enable on mobile	Shows the quick-view button on mini cards on phones. On by default.

Price

Show offer text	Shows next to the compare-at price. Off by default.
Discount format	What the discount label next to a sale price says. Sale shows the word Sale, Saved amount shows Save $10 and Percentage off shows 20% off. The label only appears when Show offer text is on. Choose Sale (default), Saved amount or Percentage off.

Icon list

Enable icon list	Shows a row of small icon badges (for example Vegan or Free returns) at the bottom of each card. The badges come from the product metafield named in Metafield key. Off by default.
Badge style	Filled icon badges use the scheme's Accent color as a background; Outline badges have only a border. Choose Filled (default) or Outline. Only appears when Enable icon list* is on.*
Metafield key	Enter the namespace and key of the metafield holding the value, for example custom.icons. Only appears when Enable icon list* is on.*

Tips

Use one image shape for your whole catalog. A fixed ratio like Portrait (3:4) keeps every row the same height. Auto only looks tidy if all your product photos share a shape.
Put your best second photo in position two. Hovering on desktop shows the product's other images in order, so a lifestyle or back view works well there.
Turn on Show variant option for products with sizes. Without it, the overlay + button only appears on single-variant products, so shoppers have to open the product page to choose a size.
Sale prices need the offer text. Discount format only shows when Show offer text is on.

Troubleshooting

The + (quick add) button doesn't show on some cards

The overlay + only appears on products with a single variant that are in stock. Products with options show View options instead (turn on Show variant option), and sold-out products show no button. It also disappears when Position is None.

Color swatches don't appear on cards

Swatches only appear for options whose values have a swatch color or image in Shopify admin. An option that is just called Color isn't enough. See Color swatches. Cards show up to 4 swatches on large screens and 3 on smaller ones, plus a +N count.

Star ratings aren't showing

Ratings come from Shopify's standard product rating fields, which your reviews app has to fill in. Products without a rating show nothing, even with Show product rating on.

Hovering doesn't change the image

The product needs at least two images, and the effect only runs on desktop. Phones always show the first image.

The stock alert doesn't appear

It only shows when Shopify tracks inventory for the variant and between 1 and 10 units are left. Sold-out products and products without tracked inventory show nothing.