Product cards

Product cards are the tiles shown in every collection grid, featured collection section, and search result. Each card includes some combination of image, title, price, and optional extras.

Card content settings

The same card renders across your store — set once, applies everywhere.

Open the theme editor

Theme settings → Product cards

Toggle what appears on each card

Show vendor — small line above the title
Show product title (usually on)
Show price (usually on)
Show compare-at price — struck-through original price for sale items
Show color swatches — swatches below the card image; click to swap the image to that variant
Show quick-add button — adds to cart without navigating to the product page
Show second image on hover — second product photo swaps in on mouse hover (feels premium)

Save

Card image ratio

Same panel, find Image ratio

Adapt to image — uses the natural aspect ratio of the product’s first image (most flexible but grids look uneven)
Square (1:1) — all cards are square, uniform grid
Portrait (4:5) — taller than wide, fashion / apparel default
Landscape (3:2) — wider than tall, home decor / furniture

Pick one that matches how you shot your product photos. If your photos are mixed, Adapt to image looks unbalanced — pick a fixed ratio.

Sale badge

Same panel, find Show sale badge

Toggle to show a small “Sale” or “-20%” badge on the card image corner for products with a compare-at price.

Choose format

Text (“Sale”)
Percentage (“-20%”)
Amount saved (“Save $10”)

Sold-out styling

By default, sold-out products show a “Sold out” badge and slightly dim the image. You can hide sold-out products entirely at the collection level (via Shopify admin, but that’s usually not recommended — availability is often useful info).

Cards are consistent across the store. Because the settings are global, your product grid looks unified whether shoppers are on a collection page, a search results page, or a featured collection section on the homepage.