Skip to main content

Product Cards

Product cards appear in collection grids, featured collections, and recommendations.

Features​

  • Primary image — The product's first image
  • Secondary image — Shown on hover for a quick preview
  • Vendor name — Optional, displayed above the title
  • Title — Links to the product page
  • Price — Current price with sale/compare-at support
  • Sale badge — Automatic when compare-at price is set
  • Sold out badge — Automatic when inventory is zero

Image Ratios​

RatioBest For
Portrait (3:4)Fashion, clothing, accessories
Square (1:1)Beauty, skincare, packaged goods
Landscape (4:3)Electronics, home goods

Tips​

  • Portrait ratio is the most common in fashion themes
  • Enable "Show secondary image" for an interactive hover effect
  • Product card styling adapts to the section's color scheme