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

<br>

***

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/spark/products/hover-add-to-cart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.