Quickview

Panel: Add to cart

DKL Quickview component - panel: add to cart

Panel: Product selection

DKL Quickview component - panel: product selection

<dkl-quickview> is a product quickview dialog. Wrap any content — a button, a product-card overlay, a text link — in a <dkl-quickview> trigger, and clicking it opens a modal for that product: image, title, description, option pickers, a quantity stepper, and an Add to cart button with the price inside it. Shoppers pick a variant and add it to the cart without leaving the page they’re on.

Unlike the other Live Components, the quickview doesn’t need a product page. A trigger can sit in a collection grid, a search result, a recommendation carousel, the cart page — anywhere. The dialog fetches the product itself when it opens (or reads it from your Liquid, with no request at all), so it works for any product on any page.

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

What the dialog does

• One dialog per page. However many triggers you place, there’s a single native <dialog>, created on first open. Its contents are built when it opens and discarded when it closes, so a page of a hundred triggers costs nothing until one is clicked.
• Instant opens. Triggers prefetch their product in the background as they scroll into view, so the first open renders as if it were server-side. A product card can also embed the product as a Liquid seed for a zero-request open.
• Real variant selection. Options render as radio-pill groups, or swatch chips for options connected to a colour metaobject. Combinations that don’t exist are hidden; sold-out combinations are struck through. Products with more than 250 variants are supported — every selection resolves to an exact price, availability, and image.
• Price in the button. The add-to-cart button carries the resolved price (“Add to cart · £33.00”), with the compare-at price struck through when the variant is on sale.
• The product’s discounts, inside the dialog. The Discount Badge and a Volume Picker per eligible volume discount mount inside the dialog automatically — both on by default, and nothing renders when the product has no eligible discount. Selecting a tier sets the quantity and discounts the button’s price.
• Multi-product picker. Give a trigger several products and the dialog opens on a product picker screen first; choosing one slides to that product’s options. Going back restores whatever the shopper had already selected.
• Adds through the theme. Cart adds go through Shopify’s standard cart action when the theme supports it, so the theme’s own cart drawer or cart count updates as it normally would. Themes without it fall back to the Ajax cart API automatically.
• Desktop modal, mobile drawer. On small screens the dialog becomes a bottom sheet.

Ways to open it

How	Example
Trigger element	<dkl-quickview data-product-handle="tee"><button>Quick view</button></dkl-quickview>
Any existing element	<a href="/products/tee" data-dkl-quickview="tee">Quick view</a> — no wrapping
JavaScript	await DiscountKitLive.openQuickview({ productHandle: 'tee' })
Command event	document.dispatchEvent(new CustomEvent('discount-kit-live:quickview:open', …))

All four end in the same dialog. See Web Component for the first two and JavaScript API for the rest.

On this component

Web ComponentPlace dkl-quickview triggers in your theme — product cards, delegated links, Liquid seeding, multiple products.

JavaScript APIOpen and close the dialog from code, the command events, and translating its labels.

Styling & Data AttributesEvery data-* attribute, the --dkl-* tokens it inherits, and the ::part() surface for restyling the dialog.

EventsThe lifecycle, variant-change, and add-to-cart events the dialog emits, and the Shopify standard events it speaks.

No app block

The quickview is placed as a web component or opened from JavaScript only — there’s no theme-editor app block. The trigger’s content is your own markup (the button, the card overlay), so it belongs in the theme’s Liquid rather than an editor setting. It still needs the Discount Kit Live app embed enabled. See App blocks vs. Web Components for the general model.

Prerequisites

• The Discount Kit Live app embed — as for every Live Component. It loads the dialog’s runtime and styles on every page (the trigger can appear anywhere, so unlike the product-page components its stylesheet is never deferred). See Enable the app embed.
• Product data. By default the dialog reads products through Shopify’s Storefront API using the app’s own storefront access token, which the embed exposes automatically. This gives swatches, market-correct pricing, and exact resolution for high-variant products. If the token isn’t available, the dialog falls back to the theme’s Ajax product endpoint.
• In-dialog discounts. The badge and volume picker inside the dialog read the same Discount Kit Live data as the page components, over the Storefront API. This needs Discount Kit’s storefront metaobject permission. Stores that installed the app before this permission was added are asked to approve it the next time they open Discount Kit in the admin; until then the dialog simply renders without discount widgets.
• Discounts tagged dk:live. The in-dialog widgets only show discounts synced to your storefront, exactly like the page components.

Theme events

The quickview publishes Shopify’s Standard Storefront Events and uses the Standard Actions for cart adds when the theme provides them. It doesn’t require either — a theme without them still gets a working dialog and cart add, just without the theme’s own cart-drawer refresh. See Events.

Accessibility

• A native modal. The dialog opens with showModal(), so the page behind it is inert, Esc closes it, and a click on the backdrop closes it. Focus moves into the dialog on open and returns to the trigger on close.
• Focus stays inside. Tab on the last control wraps to the first and Shift+Tab wraps the other way, so focus never escapes to the browser chrome while the dialog is open. Each radio-pill group counts as one tab stop; hidden and disabled controls are skipped.
• Real form controls. Every option is a <fieldset>/<legend> radio group, never collapsed to a <select>, however many values it has. The selected value is rendered inside the legend (“Size: 24”), so the group’s accessible name always carries the current selection.
• Announcements. Variant resolutions (title, price, sold-out state) are announced through an in-dialog aria-live region — the page’s own live regions are inert behind a modal.
• Triggers are keyboard-operable. A trigger with no interactive child (say, a bare <div> overlay) is given role="button" and tabindex="0" and opens on Enter or Space. A trigger that already wraps a <button> keeps the button’s own semantics. Either way the opener is marked aria-haspopup="dialog".
• Multi-product screens. Only the visible screen is reachable — inactive panels are inert — and the dialog’s accessible name follows the visible screen’s heading.
• Reduced motion. All transitions (fade, slide, drawer) are disabled under prefers-reduced-motion.