> 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 Overlay │
│ ┌────────────────────────────────────────┐ │
│ │ Media │ │
│ └────────────────────────────────────────┘ │
│ ┌────────────────────────────────────────┐ │
│ │ Title │ │
│ │ Price │ │
│ │ Variant Picker │ │
│ │ Buy Buttons │ │
│ └────────────────────────────────────────┘ │
└──────────────────────────────────────────────┘
```
**Left** — the image and details sit side by side.
```
┌──────────────────────────────────────────────┐
│ 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 %}
***
{% hint style="info" icon="headset" %}
**Need help?**
Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.
Chat with us Submit a ticket
{% endhint %}