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 style — Single 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.