Hover add-to-cart

Product listings

The Hover add-to-cart feature lets customers add products to their cart directly from collection pages and sections with products. Hovering over a product reveals an Add to cart button below the product image.

To disable Hover add-to-cart, go to Theme settings > Product listing. Click to uncheck the Enable hover add-to-cart option.

If the product has multiple product options, clicking Add to cart opens a popup modal with the product's variant and quantity selectors.

Set up Hover add-to-cart

STEPS

In your theme editor (Customize):

  1. Click on the Theme settings tab and open the Product listing settings.

  2. Under Add to cart, check the Enable hover add-to-cart checkbox.

    By default, a success checkmark will appear when the customer clicks Add to cart and the shopping cart icon quantity will be updated.

  3. To let customers buy multiple products at once, check the Enable hover add-to-cart quantity selector.

    The Add to cart button will appear as a square button with a plus sign (+) symbol.

  4. To display the updated products in the cart after they add a new item, check the Show fly-out cart after product added to cart checkbox.

  5. Click Save.

Related links Product listings Fly-out cart

Last updated

Was this helpful?