Product card style
Go to Theme settings > Product listing to customize the appearance of product cards.
Product card images
Change the shape (aspect ratio) and fit of product images, and enable a secondary image on hover.
Go to Theme settings > Product listing to find settings
Show second image on hover
Display the second product image when a cursor hovers over a product card.
Image aspect ratio
Choose to crop all product images to be a single uniform shape. Select Portrait (2:3), Square (1:1), or Landscape (3:2). Select Natural to display images in their original shape (without cropping). Learn more about aspect ratios in our Image settings guide.
Media fit
Make product images Cover the full product card or Fit within the card with its original shape.
Product card details
Choose which product details to display on product cards. You can choose to show swatches, chips, vendors, and a border when customers hover over the products.
Go to Theme settings > Product listing to find settings
Show vendor
Display vendor name beneath the product information.
Show swatches
Show product swatches on hover. Learn how to set up swatches.
Swatch size
Change the size of swatches on products cards. Select Small, Medium, or Large.
Show sibling swatches
Display sibling products as swatches below the product. Learn how to set up sibling product swatches.
Swatch source
Use the Product color or Product image as the swatch.
Show chips
Show product chips (variant boxes) on hover. Learn how to set up variant chips.
Show border on hover
Show a border line around the product cards when hovered over.
Product rating
If you have a product reviews app, display ratings with either stars. Learn about using product review apps.
Show discount
Display the discount price on the product card. You can change the discount format and choose how to display $0 prices and sold-out prices.
Last updated