Styling

The dialog itself is the quickview, so its brand tokens and CSS parts apply unchanged. This page covers what the gift selector adds: the change-gifts button and the selection tray.

The Change gifts button

The embed’s Change gifts button style setting picks how the automatic button dresses:

• Match the theme’s checkout button (default) — it borrows the checkout control’s own classes, so it looks like the button it sits under.
• Discount Kit button — a secondary button drawn in your brand tokens (accent colour, radius, font), independent of the theme’s button styles. This is also what an empty <dkl-change-gifts> tag renders.

Either way the button carries .dk-change-gifts, and the element wrapping it is <dkl-change-gifts>, for your own CSS:

dkl-change-gifts { margin-top: 1rem; }
.dk-change-gifts { text-transform: uppercase; }

A trigger with your own markup inside is styled by your theme; nothing below applies to it.

Tokens

The Discount Kit button reads these. Set them on :root, or in the Global styles Custom CSS:

Token	Default	What it styles
--dkl-change-gifts-margin	0.75rem 0 0	space above the button
--dkl-change-gifts-width	100%	button width
--dkl-change-gifts-min-height	2.75rem	button height
--dkl-change-gifts-padding	0.75rem 1.25rem	button padding
--dkl-change-gifts-border	1px solid var(--dkl-color-accent)	border
--dkl-change-gifts-radius	var(--dkl-radius)	corners
--dkl-change-gifts-background	transparent	background
--dkl-change-gifts-background-hover	an 8% accent tint	hover background
--dkl-change-gifts-color	var(--dkl-color-accent)	text colour
--dkl-change-gifts-font-size	14px, scaled to the browser’s font size	text size
--dkl-change-gifts-font-weight	600	text weight

:root {
  --dkl-change-gifts-background: var(--dkl-color-accent);
  --dkl-change-gifts-color: #fff;
  --dkl-change-gifts-border: none;
}

The selection tray

For structural restyling, the dialog host exposes these ::part() hooks in selection mode, alongside the quickview’s own:

dkl-quickview[data-dkl-dialog-host]::part(tray) { background: #fafafa; }
dkl-quickview[data-dkl-dialog-host]::part(slot-target) { outline: 2px solid currentColor; }

tray

CSSPart

The tray under the panels: heading, count and slot cells. tray-heading and tray-count for its pieces.

slots / slot-group / slot-group-heading

CSSPart

The cell row, one section per tier, and a section’s caption (shown with two or more tiers).

slot

CSSPart

One cell. Also carries slot-empty or slot-filled, and slot-target on the cell the product screen’s action will fill. slot-open is its button, slot-remove the × on a filled cell.

selection-actions / add-all

CSSPart

The pinned bar under the tray and its add-all button (which also carries add-to-cart).

product-card-chosen

CSSPart

A picker card already filling a slot.

Wording

The dialog’s text for the gift flow comes from the labels; the button’s text, the dialog’s heading and its add-all button come from the embed’s settings.