Product listings
Last updated
Last updated
Product listings are grids or rows of products displayed on collection pages and theme sections. Each product card displays the product's image, title, and price.
In the theme settings, you can customize the appearance of product cards and choose to show additional elements, like the Hover add-to-cart button that allows customers to add products directly to their cart.
You can choose to show swatches, vendors, and a border when customers hover over the products.
| Setting | Description |
|---|---|
Choose to Enable hover add-to-cart button that opens a popup with product details and form to let customers learn more and buy products on the same page. See the Hover add-to-cart guide to learn more.
Choose whether to show sale badges on product cards.
| Setting | Description |
|---|---|
Related links
Show discount
Display the sale percentage next to the listed sale price and crossed-out original price. When enabled, the sale price and percentage uses the Sale badge color set in Theme settings.
Show swatches and chips
By default, when swatches are enabled, they will appear on all products across your site when hovered over, including on collection pages and feature sections. In your theme editor, click on Theme settings and open the Product listing tab. Choose whether to Show swatches and chips on hover by checking or unchecking this option.
Show second image on hover
Display the second product image when hovered over.
Show "Sale" badge
Display badges for products on sale.
Include discount in sale badge
Show the discount amount as a percentage.