Radian 3.0 is here — bundles, category showcase and cinematic motion.See what's new

Docs Try Theme free

Product cards

Updated 2 min read

Product cards show your products in collections, search, recommendations and most product sections. Their look is set once in Theme settings > Product cards, so every grid stays consistent.

A product card with spec line and swatches.
A product card with spec line and swatches.

How to set it up

Step 1: Style the cards

  1. Open Theme settings > Product cards.
  2. Pick a Style (1): plain, framed, studio tint or info over image, the Image ratio and Image fit (contain suits packshots).
  3. Choose an Image hover (2): a lens that reveals the next image, thumbnails, tilt, fade to the second image, zoom or none.
Theme settings > Product cards.
Theme settings > Product cards.

Step 2: Choose what cards show

  1. Title: size, weight, case, number of lines, vendor, and the spec line from custom.spec_line (for example "40h · ANC · 250g").
  2. Highlights: the product's key specs from custom.key_specs, compact or full, and where they sit.
  3. Color swatches, quick add and product rating.

Step 3: Set up badges

  1. Choose the badge position, how the sale badge reads (Sale, percentage or amount saved), and show New (products tagged new) and Sold out badges.

Settings reference

Product cards

Style Options: Plain, Framed, Studio tint, Info over image.
Image ratio Options: Adapt to image, Square, Portrait (4:5), Landscape (4:3).
Image fit Options: Contain (packshots), Cover.
Image hover Lens magnifies the image when a product has only one. Options: Lens reveals the next image, Thumbnails to preview images, Tilt toward the pointer, Fade to the second image, Zoom, None.
Title
Size Slider.
Weight Options: Regular, Medium, Bold.
Case Options: Default, Uppercase.
Lines Options: No limit, 1, 2, 3.
Text alignment Options: Left, Center.
Show vendor Turns this on or off.
Show spec line Uses the product metafield custom.spec_line, for example "40h · ANC · 250g".
Highlights
Show highlights The product's key specs, the same list as the Key specs block on the product page (custom.key_specs).
Key specs to show Slider.
Style Options: Compact: icon and value, Full: icon, name and value.
Position Options: Above the title, Below the title and price, At the bottom of the card.
When they don't fit Options: Wrap onto another line, One line, scrolling sideways.
Scroll on their own Back and forth, pausing while pointed at. Off: they follow the pointer across the card, and swipe on touch screens.
Show color swatches Turns this on or off.
Show quick add Products without options are added to the cart right away. Products with options open a quick view with media, options and buy buttons.
Show product rating Requires a reviews app that writes to the standard reviews.rating metafield.
Badges
Position Options: Top left, Top right.
Sale badge Options: Sale, Percentage, Amount saved.
Show "New" badge For products tagged "new".
Show sold out badge Turns this on or off.

How it works

  • Quick add adds products without options right away; products with options open Quick view.
  • Product rating needs a reviews app that writes to the standard reviews.rating metafield.

Related

Still stuck?

Include your store URL and theme version — we'll get back to you.

Contact support