Quickview components

A quickview component is a saved look for the quickview dialog: its colours, corners and type, every line of its text, and the defaults it opens with. You build it in Discount Kit → Components against a live preview of the real dialog, with no code.

A shop can keep several. One of them is the global default: every quickview on the store uses it, and so does the Gift Selector. A quickview button, a script or the Gift with purchase app embed can name another one.

The quickview has no app block, so a quickview component is never placed with the Component block. It reaches your storefront by being the default, or by being named.

Create one

1. Open Discount Kit → Components

   Choose Create component, then Static component, then Quickview.

2. Customise it

   Colours, corners, type, text and behaviour, against a preview of the real dialog on desktop or mobile. Preview as switches between the states the dialog has:

   • Product — the add-to-cart screen.
   • Gift: one gift, Gift: several of one product, Gift: choose a product (one of the choices is sold out) and Gift: two tiers — the gift selector.
   • Gift: changing gifts — the dialog the cart’s Change gifts button opens.

   Adding to cart is simulated in the preview. Colours you leave unset follow the Styles page.

3. Save

   Give it a name. A new quickview starts with Set as global default on when your store doesn’t have a default yet.

What you can configure

Each control maps to a --dkl-qv-* token or a data-* attribute underneath. See Styling & Data Attributes for the equivalents.

Group	What’s in it
Layout	Dialog max width, dialog corners, button and option corners, swatch size, swatch corners
Colours	Background, text, border, accent (the selected option, and the button unless you set one), button background, button text
Typography	Title size (with its own mobile size) and weight, button size and weight, body font family
Text	Every line of the dialog’s text, in three panels: Product, Volume discounts and Gift selection
Behaviour	Show quantity selector, show volume discounts, Volume discount style, close after adding to cart, hide sold-out options

Clearing the product page link or a heading hides it. Clearing a button’s text brings back its default.

Volume discount style

While Show volume discounts is on, Volume discount style picks one of your volume picker or volume table components to show the product’s volume discounts in the dialog with: its layout, colours, sizes and text.

• The dialog still sets the price and the quantity itself, so a volume picker’s price and quantity sync isn’t used.
• A volume table highlights the row the dialog’s quantity has unlocked.
• With a component picked, the Volume discounts text is marked Overwritten and locked, because its text comes from that component.

Left empty, the dialog draws its built-in volume picker with the Volume discounts text.

Hide sold-out options

When on, sold-out colours and sizes are left out instead of crossed out. A product with nothing in stock still shows them crossed out.

The global default

Set as global default is in the component’s Add to storefront section, and saves with the rest of the page. One quickview is the default at a time: setting another moves it. The Components list marks the default with a Default badge.

The Components app embed applies the default on every page. Its colours, corners and type style the dialog, and its text and behaviour are what the dialog opens with. That covers <dkl-quickview> buttons, data-dkl-quickview links, openQuickview() calls and gift dialogs, unless one of them names another quickview.

With no default (none set yet, or the default was deleted), the dialog uses its built-in look.

Use another quickview somewhere

Name it by its handle, quickview-2 for example. Copy it from the component’s Add to storefront → Implementation options, which also shows a ready-made tag.

A quickview button

<dkl-quickview
  data-product-handle="{{ product.handle }}"
  data-component="quickview-2"
>
  <button type="button">Quick view</button>
</dkl-quickview>

An existing link or button

<a
  href="{{ product.url }}"
  data-dkl-quickview="{{ product.handle }}"
  data-dkl-quickview-component="quickview-2"
>
  Quick view
</a>

From a script

window.DiscountKitLive.openQuickview({
  productHandle: 'awesome-tee',
  component: 'quickview-2',
})

The first open that names a quickview fetches it, with the volume component it picks, over the Storefront API. The page keeps it, and a trigger’s prefetch fetches it early, so the dialog doesn’t wait.

A named quickview replaces the default for that open. Whatever it leaves unset falls back to the built-in value and your Styles page, never to the default quickview’s. A handle that isn’t a quickview component (a typo, a deleted one, or another component’s) opens with the global default.

Deleting a quickview sends the buttons that name it back to the global default.

Gift dialogs

1. Open the theme editor and go to App embeds.

2. Open the Gift with purchase embed. Use the Discount Kit quickview (beta) must be on.

3. In its Quickview setting, pick the component.

Left empty, gift dialogs use your global default quickview. The component’s Gift selection text dresses the selection tray and its buttons.

A few embed settings cover the same ground, and win when they’re filled in: Message text, Add to cart button label and Save changes button text (Change gifts dialog). They come pre-filled, so clear one to use the component’s text instead. Hide sold-out gifts and options wins when it’s ticked; unticked, the component’s Hide sold-out options decides.

Which setting wins

From strongest to weakest:

1. What one open asks for. A trigger’s data-* attributes, an openQuickview() call’s options, and the Gift with purchase embed’s settings for gift dialogs. A button with data-close-on-add="true" closes after adding whatever its quickview says.
2. Your theme’s labels. Text you set in window.DklContext.quickviewLabels wins over the component’s text.
3. The quickview the open uses. The named one, else the global default.
4. The built-in defaults. For colours, corners and the font, your Styles page comes first.

Next steps

Web ComponentPlace quickview buttons in your theme, and name a quickview component on them.

Styling & Data AttributesThe --dkl-qv-* tokens behind these controls, and every data-* attribute.

Gift SelectorThe gift dialog these components also style.