> 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-view.md).
# Quick view
Quick View lets a shopper open a product in an overlay and see its full image gallery next to the price, options, and buy buttons — without leaving the page they are on. It opens from a product card.
***
## Structure
```
┌──────────────────────────────────────────────┐
│ Quick View Overlay │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ │ │ Title │ │
│ │ Product media │ │ Price │ │
│ │ │ │ Variant Picker │ │
│ │ │ │ Buy Buttons │ │
│ └──────────────────┘ └──────────────────┘ │
└──────────────────────────────────────────────┘
```
[**Product media**](/helix/overlay-group/quick-view/product-media.md) — The product's image gallery, with layout, zoom, and video controls.
[**Details**](/helix/overlay-group/quick-view/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 View 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 %}