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

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

Left — the image and details sit side by side.

Quick Add — media left

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

Product media — The product image, with position, layout, and zoom controls.

Details — 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.

The overlay's colors and general appearance are set in Theme settings → Overlay, so they stay consistent everywhere Quick Add is used.

---

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