> For the complete documentation index, see [llms.txt](https://docs.smind.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.smind.io/sections/quick-add.md).

# Quick Add

## Overview

* The "**Quick add"** section in our app allows customers to add products directly to their cart from collection or category pages.
* The "**Quick add"** feature enhances the shopping experience for users.

## How To Install ?

{% embed url="<https://youtu.be/i4EcUkc1ETI>" %}

To install the **'Quick add'** section in our app. You can follow these steps and the images below:

1. From our app, click **Library**.
2. In the **Sections** tab, search for the keyword **Quick Add.**
3. Click the **Install** button to install the **Quick Add** sections.

<figure><img src="/files/rzoyvAyjCK4iiETdNlwn" alt=""><figcaption></figcaption></figure>

4. From the Shopify Editor sidebar, click **Add Section** in the **Global** tab.
5. Search for **Quick Add** section and click on it.

<figure><img src="/files/Jt4KUEBXRz5QTrrF9kHJ" alt=""><figcaption></figcaption></figure>

## How To Use ?

After adding the **'Quick add'** section to your theme, the button will appear on products with multiple variants on the collection page.

<figure><img src="/files/PPSoSRukGxiAOtFxyQD5" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}

* This section only displayed on our product card section. If you are not using our product cards, it will not be visible.
* This section only displayed on product when there's more than one variant, you can see it through the variant picker of product card.
  {% endhint %}

When user click to **"Quick add"** button, users can see these typically happens:

**Product Options Display**: A popup will appear, allowing you to select product options like size, color, or quantity.

1. Select the Product Color.
2. Select the Product Size.
3. Select the Product Quantity.
4. Click **Add To Cart** button.

<figure><img src="/files/iWer02hMYBSM3mwEO6hI" alt=""><figcaption></figcaption></figure>

**Cart Update**: Once you've made your selections, the item is added to your cart without leaving the current page.

<figure><img src="/files/uzrM7c7noSFWa1hIb1gS" alt=""><figcaption></figcaption></figure>

## The Display Position of The Quick Add&#x20;

The **Quick add** can be displayed on both desktop and mobile in the following locations.

1. **Collection Page**

<figure><img src="/files/Ruuha8g9Teekh8p1th3Z" alt=""><figcaption></figcaption></figure>

2. **Wishlist Page**

<figure><img src="/files/ThlvsmOf3jH0uz8FYUln" alt=""><figcaption></figcaption></figure>

3. **Compare Page**

<figure><img src="/files/20fL1Z8ernj1nhWIY1n7" alt=""><figcaption></figcaption></figure>