# 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="/pages/reUyzfr46bMJKCfSkgcc" %}
[Product cards](/pebble-theme/theme-settings/product-cards.md)
{% endcontent-ref %}

<figure><img src="/files/DVyPRmbjvKQvHq6nnP7r" 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="/files/WWQRKJtOnuRZ0LAcjT0X" alt=""><figcaption></figcaption></figure>

### Section settings

<figure><img src="/files/ss3iTY2bX8bYiA31F8Xs" 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="/files/wirdILvd0KmutiwQ653i" alt=""><figcaption></figcaption></figure>

{% content-ref url="/pages/HVkXnp8DHK7S5fFGOVPo" %}
[Product](/pebble-theme/theme-blocks/product.md)
{% endcontent-ref %}

#### Nested dynamic blocks

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

{% content-ref url="/pages/kDPTtLq1SGRul34JEndy" %}
[Theme blocks](/pebble-theme/theme-blocks/overview.md)
{% endcontent-ref %}


---

# 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://docs.foxecom.com/pebble-theme/global-sections/quick-add-drawer.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.