> For the complete documentation index, see [llms.txt](https://developers.discountninja.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.discountninja.io/discount-ninja-developer-hub/theme-edits/code-edits/product-list-page-plp-and-collections/quick-view.md).

# Quick View

## Definition

A Quick View is a popup that provides a form to add a product variant to the cart. It is usually accessible from a PLP or the home page.

## QuickView section

Mark the Quick View section with a `data-la-dn-quickview` attribute.

## Product and variant

Mark the same section that was marked `data-la-dn-quickview` with a `data-la-dn-product-handle` attribute to indicate the product it displays. Also, add the `data-la-dn-product-variant` attribute to indicate which variant is displayed. When a different variant is selected, this attribute must be updated. 

Example:

```html
data-la-dn-product-handle="my-product" data-la-dn-product-variant="123456" data-la-dn-product-dynamic
```

## Price section

Use the following snippet to add the `data-la-dn-price` attribute to the price section. Also, add a `data-la-dn-product-dynamic` attribute to indicate the price should be updated when the `data-la-dn-product-variant` attribute changes.

```css
data-la-dn-price data-la-dn-product-dynamic
```

## Example

The following example shows how all the elements come together:

```html
<div data-la-dn-quickview 
     data-la-dn-product-handle="my-product" 
     data-la-dn-product-variant="123456">
    ...
    <div class="price" data-la-dn-price data-la-dn-product-dynamic>
        ...
        <span class="money">{{ variant.price }}</span>
        <s class="money">{{ variant.compare_at_price }}</s>
        ...
    </div>
    ...
</div>
```