Product cards

Set the default look and behavior of product cards everywhere they appear — collections, featured products, search results, and more.

Last updated About 4 hours ago

Find these settings in the theme editor under Theme settings > Product cards. They're your store-wide defaults; many sections have a Card settings group that can override them for that section only.

Set the card look

  • Aspect ratio (and a separate mobile one) — the shape of the card image. Default uses each image's natural shape.
  • Product details column count — whether the title, price, and other details sit in one column or two below the image.
  • Image styleSingle image shows one photo; Slideshow lets visitors swipe through the product's images right on the card, with its own animation, autoplay, and arrow settings.

Show a second image on hover

Under Hover settings, pick which media appears when someone hovers over a card: the product's last image, second image, second-to-last, or a custom image (or video) per product via a metafield. For the metafield option, set Hover media to Use metafield and enter the full namespace and key in Hover media metafield — e.g. custom.hover_media. See How to set up metafields for how to create the metafield and add images to your products.

Set up quick view

Quick view lets visitors open a product preview and add to cart without leaving the page. Show quick view button is on by default — the button appears when hovering a card on desktop. You can:

  • Change the icon (pick from the icon library or upload your own) and its size.
  • Enable Show quick view button on mobile, where it's always visible since there's no hover.

Show variant swatches on cards

Turn on Show variant selector to let visitors pick a variant directly on the card. By default it shows all options; to limit it to just one (usually color), type that option's name into Enabled variant option — e.g. Color.

Badges

  • Sale badge — shown on discounted products. The Type setting controls what it says: plain text ("Sale"), the percentage off, or the amount off.
  • Collection badges — pick collections, and any product in them gets the collection's name as a corner badge. Useful for "New", "Bestseller", or similar — just create a collection for it.

Badge colors are set in Theme settings > Colors, and badge typography in Theme settings > Fonts.

Other settings

Show price toggles the price on cards. The card heading font has its own settings under Theme settings > Fonts > Card headings.