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

# Quick add

Quick Add lets a shopper pick a variant and add a product to the cart from an overlay, without opening the full product page. It opens from a product card and shows just enough to complete the purchase.

***

## Structure

The overlay layout depends on the **Desktop position** setting.

**Top** — the image sits full width above the details.

![Quick Add — media top](/files/ZAvxeElLWtmMOdi2Ledb)

```
┌──────────────────────────────────────────────┐
│  Quick Add Overlay                           │
│  ┌────────────────────────────────────────┐  │
│  │              Media                     │  │
│  └────────────────────────────────────────┘  │
│  ┌────────────────────────────────────────┐  │
│  │  Title                                 │  │
│  │  Price                                 │  │
│  │  Variant Picker                        │  │
│  │  Buy Buttons                           │  │
│  └────────────────────────────────────────┘  │
└──────────────────────────────────────────────┘
```

**Left** — the image and details sit side by side.

![Quick Add — media left](/files/QDXj02thXR9UtN6PPfQj)

```
┌──────────────────────────────────────────────┐
│  Quick Add Overlay                           │
│  ┌──────────────────┐  ┌──────────────────┐  │
│  │                  │  │  Title           │  │
│  │      Media       │  │  Price           │  │
│  │                  │  │  Variant Picker  │  │
│  │                  │  │  Buy Buttons     │  │
│  └──────────────────┘  └──────────────────┘  │
└──────────────────────────────────────────────┘
```

[**Product media**](/helix/overlay-group/quick-add/product-media.md) — The product image, with position, layout, and zoom controls.

[**Details**](/helix/overlay-group/quick-add/details.md) — The purchase area, built from the blocks you add.

***

## Style

| Setting                | Description                                                                                    |
| ---------------------- | ---------------------------------------------------------------------------------------------- |
| Desktop layout         | How the overlay opens on desktop — a centered popup, or a drawer that slides in from the side. |
| Width                  | The widest the overlay can be.                                                                 |
| Mobile layout          | How the overlay opens on mobile — a sheet from the bottom, or a drawer from the side.          |
| Gap — Desktop / Mobile | Space between the media and details panels.                                                    |

{% hint style="info" %}
The overlay's colors and general appearance are set in [**Theme settings → Overlay**](/helix/theme-settings/overlay.md), so they stay consistent everywhere Quick Add is used.
{% endhint %}