> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick Add to Cart Drawer

> Configure the quick add drawer that appears when customers click quick add buttons on product cards.

The Quick Add to Cart Drawer section controls the drawer that displays product options when customers click "Quick Add" buttons on product cards throughout the site.

<img src="https://mintcdn.com/digifist/xTP8GR7P2EIs5bKM/images/theme/release/sections/quick-cart-drawer/quick-cart-overview.png?fit=max&auto=format&n=xTP8GR7P2EIs5bKM&q=85&s=f18fb1badc20e1486bed7cc41e864b3a" alt="Quick add to cart drawer overview" width="3280" height="2186" data-path="images/theme/release/sections/quick-cart-drawer/quick-cart-overview.png" />

## What this section controls

* Quick add drawer appearance
* Product option selection interface
* Color scheme for drawer
* Empty state messaging

## How it works

When quick add buttons are enabled in theme settings:

1. Customer clicks "Quick Add" on a product card
2. Drawer opens showing product options (variants, quantity)
3. Customer selects options and adds to cart
4. Drawer closes automatically after adding

## Section settings

### Color scheme

Background and text colors for the drawer.

* Shopify color scheme selector
* **Default:** Scheme 1

<Note>
  This section only appears when "Enable quick add to cart button" is enabled in Theme Settings > Products.
</Note>

<img src="https://mintcdn.com/digifist/xTP8GR7P2EIs5bKM/images/theme/release/sections/quick-cart-drawer/settings.png?fit=max&auto=format&n=xTP8GR7P2EIs5bKM&q=85&s=4d86531fc6d4d437fbf6a8aff77e871c" alt="Quick add drawer settings" width="3280" height="2186" data-path="images/theme/release/sections/quick-cart-drawer/settings.png" />

## Empty state

When drawer is opened without product data:

**Title:** "Choose your options"

**Empty message:** Displayed when no product is loaded

<Tip>
  Empty state messages can be customized in theme locales under product translations.
</Tip>

## Best practices

* Match color scheme with your cart drawer for consistency
* Ensure product media aspect ratio is set in theme settings
* Test quick add functionality on product grids
* Verify variant selection works correctly
* Check mobile experience for smooth interactions

## Common use cases

* **Collection pages** - Quick add from product grids
* **Search results** - Fast add to cart from search
* **Related products** - Quick add from recommendations
* **Featured products sections** - Homepage quick purchases

## Related guides

<Card title="Product Settings" icon="box" href="/themes/release/theme-settings/products">
  Enable and configure quick add buttons
</Card>

<Card title="Cart Drawer" icon="cart-shopping" href="/themes/release/sections/cart-drawer">
  Learn about the main cart drawer
</Card>