# Hover add-to-cart

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.

{% hint style="info" %}
To disable Hover add-to-cart, go to **Theme settings > Product listing**. Click to uncheck the **Enable hover add-to-cart** option.
{% endhint %}

![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-035f8d48efb567050616b0de8981f3af9dd2ac1d%2Fhover-atc.jpeg?alt=media)

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

![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-18df80c2c0ef88897b72b6cc0e0886459da87690%2Fhover-popup.jpeg?alt=media)

### **Set up Hover add-to-cart**

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

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

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-ef8046a69bbd1ff9a73c372d57786cd1fbba0080%2Fhover-settings.jpeg?alt=media)
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.

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-22a9ed67cdeed6fed2968788b399f72ebac43296%2Fhover-quantity.jpeg?alt=media)
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.

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-a5a3d52608af4457a1bb8105b041467462ed728e%2Fhover-fly-out.jpeg?alt=media)
5. Click **Save**.

</details>

<br>

***

> **Related links**\
> [Product listings](https://help.fluorescent.co/spark/products/product-listings)\
> [Fly-out cart](https://help.fluorescent.co/spark/cart/fly-out-cart)