# Quick add drawer

## What is a Quick add drawer? <a href="#what-is-a-quick-view" id="what-is-a-quick-view"></a>

The **Product Quick add drawer** option offers several unbeatable benefits:

* Improved shopping experience: It's easier for your customers to select and add any items to cart without loading the whole product age and clicking back-and-forth between the product page and the item pages for details.
* Reduced server load: The product page is not reloaded when the shopper selects this feature.
* Display of discounted pricing and other details: You can utilize the Quick add drawer feature to show discounts before the cart page.

You can manage which elements are shown on the **Quick add drawer** - such as the buy buttons, variant picker, price, badges and tags, etc.

## How to enable the Quick add drawer <a href="#how-to-enable-the-cart-drawer-for-your-shopify-store" id="how-to-enable-the-cart-drawer-for-your-shopify-store"></a>

{% hint style="success" %}
Steps:

1. From the theme editor (Customize), navigate to **Theme settings** > **Product cards**.
2. Enable the **Show quick add** option or **Show quick add on mobile** option.
3. **Save** the changes.
   {% endhint %}

{% content-ref url="../theme-settings/product-cards" %}
[product-cards](https://docs.foxecom.com/pebble-theme/theme-settings/product-cards)
{% endcontent-ref %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FRseOmKETrterhlhfgflJ%2Fimage.png?alt=media&#x26;token=91b87203-54eb-400e-9a9b-5fdc6905c3a8" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

* If the product has only one variant, the item will be added to the cart directly.
* If the product has more variants, the **Quick add drawer** will display.
  {% endhint %}

## How to customize the Quick add drawer <a href="#how-to-customize-your-cart-drawer" id="how-to-customize-your-cart-drawer"></a>

{% hint style="success" %}
Steps:

1. In the theme editor (**Customize**), scroll down to the **Overlay group** area.
2. Select the **Quick add drawer** section.
3. Make necessary changes.
4. Click **Save**.
   {% endhint %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FrdM4t4HNCKJqYDHSyeeo%2Fimage.png?alt=media&#x26;token=999ba4d0-feb5-423a-a8b2-4592f43b1236" alt=""><figcaption></figcaption></figure>

### Section settings

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F7PaeJNjlGahT4e3hO0Ve%2Fimage.png?alt=media&#x26;token=0e9dcc4c-e0eb-4d90-bfb4-d7e4d4600734" alt=""><figcaption></figcaption></figure>

**Vertical gap** controls the amount of space between the individual blocks inside the Quick add drawer.

* Range: 0px - 100px.

### Block settings

For the quick add drawer, we recommend using **Product blocks** to display your product information inside the quick view drawer.

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FiC97ncMRQU6zoEYlkX7b%2Fimage.png?alt=media&#x26;token=8a193fda-dd78-47dd-a0b0-4a89796a4589" alt=""><figcaption></figcaption></figure>

{% content-ref url="../theme-blocks/product" %}
[product](https://docs.foxecom.com/pebble-theme/theme-blocks/product)
{% endcontent-ref %}

#### Nested dynamic blocks

You can add multiple dynamic blocks within this section. *Learn more about each block type here:*

{% content-ref url="../theme-blocks" %}
[theme-blocks](https://docs.foxecom.com/pebble-theme/theme-blocks)
{% endcontent-ref %}