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.


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.


Show "Sale" badge

Display badges for products on sale.

Include discount in sale badge

Show the discount amount as a percentage.

Related links

Theme settings Swatches

Last updated