> 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     │  │
│  └──────────────────┘  └──────────────────┘  │
└──────────────────────────────────────────────┘
```

![Quick View overlay](/files/Y1C8fh7QrjCqtUoQdMDq)

[**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 %}