Web Component

A <dkl-quickview> element is a trigger: its content is your own markup, and clicking it opens the shared dialog for the product named in data-product-handle. The dialog itself is created once, on first use, and every trigger on the page opens it.

Usage

Wrap whatever should open the dialog — a button, a link, an overlay — in a <dkl-quickview> with the product’s handle:

<dkl-quickview data-product-handle="awesome-tee">
  <button type="button">Quick view</button>
</dkl-quickview>

The trigger doesn’t need to be on the product’s page, or on a product page at all. Placed on a collection, in search results, in a recommendations section, or on the cart page, it opens the same dialog and fetches the product itself.

What happens to clicks inside the trigger

• If the trigger wraps an <a href> (a product-card link, say), clicking it opens the dialog instead of navigating — the quickview replaces the navigation.
• Anything inside the trigger marked data-dkl-quickview-ignore is exempt: clicks there behave normally and don’t open the dialog.
• If the trigger has no interactive child of its own, it becomes keyboard-operable itself (role="button", tabindex="0", Enter/Space to open).

Open from any existing element

You don’t have to wrap. Add data-dkl-quickview="<handle>" to any element and a click on it opens the dialog:

<a href="/products/awesome-tee" data-dkl-quickview="awesome-tee">Quick view</a>

Use data-dkl-quickview-id="<id>" to address the product by id instead. The other options are available as data-dkl-quickview-* attributes on the same element — see Delegated opener attributes.

Address a product by id

data-product-id (a numeric id or a gid://shopify/Product/…) is a stable alternative to the handle — useful when the handle can change, or when you’re rendering from data that only carries the id:

<dkl-quickview data-product-id="9265883611348">
  <button type="button">Quick view</button>
</dkl-quickview>

Ids resolve through the Storefront API source. If your store is on the Ajax fallback (no storefront token), pair the id with a handle.

Preselect a variant

data-variant-id opens the dialog with that variant already selected:

<dkl-quickview data-product-handle="awesome-tee" data-variant-id="41200000000001">
  <button type="button">Quick view — Blue / M</button>
</dkl-quickview>

Product cards

The quickview’s canonical home is the product card. The card is already rendered from a product object, so embed that product as a JSON seed inside the trigger and the dialog opens with no product request at all:

card-product.liquid

{%- comment -%} card_product is already in context {%- endcomment -%}
<div class="card">
  …card media / title / price…
  <dkl-quickview>
    <button type="button">Quick view</button>
    <script type="application/json" data-dkl-quickview-product>
      {{ card_product | json }}
    </script>
  </dkl-quickview>
</div>

The seed stands in for data-product-handle, so the attribute isn’t needed. One seed per product is enough — later triggers for the same handle reuse it. A malformed or variant-less seed is ignored and the normal fetch path takes over.

Without a seed

Triggers still prefetch their product in the background as they scroll into view (data-prefetch="visible", the default), so even an unseeded collection grid opens instantly — and only fetches the products the shopper can actually reach. The seed just gets there with zero requests. See data-prefetch in Styling & Data Attributes.

Swatches without the Storefront API

Colour and image swatches come from the Storefront API automatically. If your store is on the Ajax fallback, a sibling data-dkl-quickview-swatches script supplies them from Liquid — a map of option name → value name → { color?, image? }:

<script type="application/json" data-dkl-quickview-swatches>
{
  {% for option in card_product.options_with_values %}
    {{ option.name | json }}: {
      {%- assign separator = '' -%}
      {% for value in option.values %}{% if value.swatch %}
        {{ separator }}{{ value.name | json }}: {
          {%- if value.swatch.color %}"color": {{ value.swatch.color | json }}{% endif -%}
          {%- if value.swatch.image %}{% if value.swatch.color %},{% endif %}"image": {{ value.swatch.image | image_url: width: 80 | json }}{% endif -%}
        }{%- assign separator = ',' -%}
      {% endif %}{% endfor %}
    }{% unless forloop.last %},{% endunless %}
  {% endfor %}
}
</script>

Quantity

The footer’s quantity stepper is configurable per trigger:

<!-- Fixed quantity of 2: stepper hidden, 2 is what gets added -->
<dkl-quickview data-product-handle="awesome-tee" data-show-qty="false" data-qty="2">
  <button type="button">Quick view</button>
</dkl-quickview>

<!-- Bounded: never below 2, never above 10, starts at 2 -->
<dkl-quickview data-product-handle="awesome-tee" data-min-qty="2" data-max-qty="10">
  <button type="button">Quick view</button>
</dkl-quickview>

<!-- Visible but locked: the shopper sees the quantity but can't change it -->
<dkl-quickview data-product-handle="awesome-tee" data-qty="3" data-allow-qty-change="false">
  <button type="button">Quick view</button>
</dkl-quickview>

When the product has an eligible volume discount, the stepper and the in-dialog volume picker stay in sync both ways: selecting a tier sets the quantity, and changing the quantity selects the closest tier at or below it. A preset data-qty starts on its matching tier.

Line-item properties

Attach a line-item property to every cart add from a trigger:

<dkl-quickview
  data-product-handle="awesome-tee"
  data-line-prop-namespace="_dkl"
  data-line-prop-key="source"
  data-line-prop-value="quickview"
>
  <button type="button">Quick view</button>
</dkl-quickview>

The namespace and key join as namespace.key (here _dkl.source). Prefix the namespace or key with _ to keep the property hidden in most themes’ cart display. For more than one property, use the JavaScript API’s lineProperties map.

Multiple products

A comma-separated data-product-handle (or data-product-id) opens the dialog on a product picker first. Each product is a card with its image, title, and price; choosing one slides to that product’s options, and a Back button in the header returns to the picker with the shopper’s earlier selections intact:

<dkl-quickview
  data-product-handle="awesome-tee,awesome-hoodie,awesome-cap"
  data-picker-heading="Pick a style"
  data-options-heading="Choose your size"
>
  <button type="button">Shop the look</button>
</dkl-quickview>

data-picker-heading and data-options-heading replace the default screen headings (“Choose a product” / “Choose your options”). Every other option — quantity bounds, data-close-on-add, line-item properties — applies to whichever product the shopper picks.

In-dialog discounts

The product’s Discount Badge and a Volume Picker per eligible volume discount mount inside the dialog automatically. Both are on by default; when the product has no eligible discount, nothing renders. Opt out per trigger:

<dkl-quickview data-product-handle="awesome-tee" data-show-badge="false" data-show-volume="false">
  <button type="button">Quick view</button>
</dkl-quickview>

Reacting to the dialog

Every open, load, variant change, and cart add is announced as a bubbling discount-kit-live:quickview:* event on document. See Events for the full list and payloads, and the JavaScript API for opening the dialog from code.

Examples

For the full list of data-* attributes you can set, see Styling & Data Attributes.

Close after adding, with a prefetch on hover only

<dkl-quickview
  data-product-handle="awesome-tee"
  data-close-on-add="true"
  data-prefetch="hover"
>
  <button type="button">Quick view</button>
</dkl-quickview>

A card overlay as the trigger

<!-- No interactive child: the element itself becomes a keyboard-operable button -->
<dkl-quickview class="card__overlay" data-product-handle="awesome-tee">
  Quick view
</dkl-quickview>

Listen for cart adds from the dialog

document.addEventListener('discount-kit-live:quickview:add-to-cart', (event) => {
  const { productHandle, variantId, quantity } = event.detail.resource
  console.log(`Added ${quantity} × variant ${variantId} of ${productHandle}`)
})

Next steps

Styling & Data AttributesEvery data-* attribute, delegated attribute, --dkl-* token, and ::part().

JavaScript APIOpen the dialog from code and translate its labels.