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 dialog

Style the gift dialog without code as a quickview component in Discount Kit → Components: colours, corners, type, and the Gift selection text. Gift dialogs use your global default quickview, or the one picked in the Gift with purchase embed’s Quickview setting. See Gift dialogs.

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 in your theme’s CSS, for example its Custom CSS (Customize → Theme settings → 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 quickview component’s Gift selection text, and the labels win over it. The button’s text, the dialog’s heading, its add-all button and its Save changes button come from the embed’s settings.