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

Setting	Description
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

Setting	Description
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.