Product listings
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.
Display elements
You can choose to show swatches, vendors, and a border when customers hover over the products.
| Setting | Description |
|---|---|
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. |
Hover add-to-cart
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.
Sale badge
Choose whether to show sale badges on product cards.
| Setting | Description |
|---|---|
Show "Sale" badge | Display badges for products on sale. |
Include discount in sale badge | Show the discount amount as a percentage. |
Related links
Last updated