> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/spark/products/hover-add-to-cart.md).

# 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 %}

![](/files/zdTSF0UhhTKsWsel960A)

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

![](/files/RuhZfaIlzpA6mpnLH5eA)

### **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.

   ![](/files/QVrbWTFvFUmpPHw6zojo)
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.

   ![](/files/9K7mb2BtfbvzPzMf4Ud5)
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.

   ![](/files/tebIJ9ZRffOxot9hCLlm)
5. Click **Save**.

</details>

\\

***

> **Related links**\
> [Product listings](/spark/products/product-listings.md)\
> [Fly-out cart](/spark/cart/fly-out-cart.md)