Styling & Data Attributes

This is the shared reference for <dkl-tiered-rewards> — the data-* attributes that drive its behaviour, the --dkl-tr-* tokens that style it, and the Light-DOM classes you can target. A component writes these for you; on a web component you set them directly.

Using this reference with a component

A component built in the admin renders its own <dkl-tiered-rewards> and writes these values for you, so what applies depends on the kind of override.

Data attributes — No. The component sets every data-* itself, from its settings and the resolved discount. Adding them to your own markup has no effect on a component instance; they’re the configuration surface for the web component only. To change how a placed component behaves, edit it in Discount Kit → Components.

CSS styling tokens — Yes. They’re custom properties that inherit through the light DOM, so they style a component instance exactly like a bare tag. The component’s editor just writes the matching tokens into a scoped <style> rule. Any token the editor doesn’t expose you can still set from your own CSS — :root, the Custom CSS in Components → Styles, or a rule targeting the element.

Token precedence

A token the block writes from a chosen setting is scoped to the block’s id (#dkl-tr-{block.id}), which is more specific than a :root rule — so to override that token, either change the editor setting or match the specificity (target the block element). Tokens the block leaves unset fall back to your CSS or the built-in default as normal.

Data attributes

All optional. The tiers, the cart total, the money format and whether the goal counts items come from the carrier, so only the attributes you set are listed.

data-discount-id

metaobject handle · default: first eligible

Pick a specific tiered rewards discount’s carrier. The discount- prefix is optional; place one tag per discount to show several.

data-component

component handle · default: none (built-in styling)

Use a component built in Discount Kit → Components: its discount, colours, text and icons come with it.

Each tier gives one reward — an order discount, a shipping discount or a free gift — and each kind has its own message and tier label. In every message, [amount] is how much more to spend (or how many more items to add, for a goal measured in items) and [discount] is the reward’s percent or amount.

data-spend-more-message

string · default: Add [amount] more to save [discount] on your order!

The next-goal message when the next tier is an order discount.

data-shipping-more-message

string · default: Add [amount] more to save [discount] on shipping!

The next-goal message when the next tier is a shipping discount.

data-free-shipping-more-message

string · default: Add [amount] more to get free shipping!

The next-goal message when the next tier is free shipping.

data-gift-more-message

string · default: Add [amount] more to get a free gift!

The next-goal message when the next tier is a free gift.

data-success-heading

string · default: Winner Winner 🎉

Heading shown once every tier is met.

data-success-message

string · default: You've unlocked all available savings

Content shown once every tier is met.

data-tier-save-label

string · default: Save [discount]

Tier label for an order discount; [discount] is the placeholder.

data-tier-shipping-label

string · default: [discount] off shipping

Tier label for a shipping discount; [discount] is the placeholder.

data-tier-free-shipping-label

string · default: Free shipping

Tier label for free shipping.

data-tier-gift-label

string · default: Free gift

Tier label for a free gift.

data-tier-spend-label

string · default: [amount]+

Per-tier spend line, e.g. $75.00+; [amount] is the placeholder.

data-tier-quantity-label

string · default: [amount]+ items

Per-tier line for a goal measured in items, e.g. 3+ items; [amount] is the item count.

data-layout

"horizontal" | "stacked" · default: horizontal

Layout variant. stacked arranges markers in a column with the progress bar rotated. A discount with more than 3 tiers is stacked, because the horizontal layout’s markers share one row. Set data-keep-layout to override that.

data-keep-layout

"true" · default: unset

Keep data-layout whatever the tier count, so a discount with more than 3 tiers can still be shown horizontally. Its labels get narrow, so check it at your theme’s widths.

<dkl-tiered-rewards data-layout="horizontal" data-keep-layout="true"></dkl-tiered-rewards>

CSS styling tokens

<dkl-tiered-rewards> is styled by a stylesheet loaded site-wide by the embed. Set any token above the element (:root, the Custom CSS in Components → Styles, an inline style, or the block’s scoped rule).

--dkl-tr-margin-top

default: 0

Space above the widget (block Margin top).

--dkl-tr-margin-bottom

default: 0

Space below the widget (block Margin bottom).

--dkl-tr-background

default: var(--dkl-color-background-soft)

Card background (block Background color).

--dkl-tr-padding

default: 1rem

Card padding (block Padding).

--dkl-tr-radius

default: var(--dkl-radius)

Card corners (block Border radius).

--dkl-tr-message-font-size

default: 16px

Progress message (first line).

--dkl-tr-message-detail-font-size

default: 14px

Second line of the message (the success message under its heading).

--dkl-tr-tier-label-font-size

default: 14px

Tier save label.

--dkl-tr-tier-spend-font-size

default: 12px

Tier spend label.

Each text element has its own size token and a fixed pixel default — there is no shared base size. To vary one per breakpoint, set its token inside your own media query.

--dkl-tr-text-color

default: var(--dkl-color-text)

Card text colour (block Text color).

--dkl-tr-tier-label-color

default: inherit

The “Save [discount]” tier label (block Tier label color).

--dkl-tr-tier-spend-color

default: inherit

The “[amount]+” tier line (block Tier spend label color).

--dkl-tr-track-color

default: var(--dkl-color-border)

Progress track (unfilled bar) colour (block Track color).

--dkl-tr-progress-color

default: var(--dkl-color-accent)

Progress fill colour (block Progress bar color).

--dkl-tr-marker-size

default: 2rem

Tier marker size.

--dkl-tr-marker-border-color

default: var(--dkl-color-border)

Inactive marker border colour.

--dkl-tr-marker-bg

default: var(--dkl-color-background)

Inactive marker fill (block Icon background (not met)).

--dkl-tr-marker-active-color

default: var(--dkl-color-accent)

Active (met) marker fill (block Icon background (met)).

--dkl-tr-marker-icon-active-color

default: #ffffff

Active marker check-icon colour.

Icons

Each marker shows the icon for its reward, and a met tier shows a check. Replace any of them with an image: a component’s Icons settings pick one from your store’s Files (square, 128 × 128 px, SVG or transparent PNG), and on a web component you set the token to a url(). An image is drawn in full colour; unset, the built-in icon is drawn in the marker icon colour.

dkl-tiered-rewards {
  --dkl-tr-icon-gift: url("https://cdn.shopify.com/s/files/1/0000/0001/files/gift.png");
}

--dkl-tr-icon-percent

A percentage order discount. Default: a % sign.

--dkl-tr-icon-fixed

A fixed-amount order discount. Default: a banknote.

--dkl-tr-icon-shipping

A shipping discount, free or not. Default: a delivery van.

--dkl-tr-icon-gift

A free gift. Default: a gift box.

--dkl-tr-icon-reached

Any tier that’s been met. Default: a check.

Caution

Two further properties are runtime-internal, not theming knobs: --dkl-tr-progress (the 0–1 fill fraction the component sets on the track) and --dkl-tr-icon / --dkl-tr-icon-fill (the marker’s current icon, picked from the tokens above). Don’t author them.

Light-DOM classes

<dkl-tiered-rewards> is all light DOM — no parts. Target these classes directly.

dkl-tiered-rewards

host

The card (host element).

.dkl-tiered-rewards__message

class

The headline / progress message.

.dkl-tiered-rewards__progress

class

The progress bar (with .dkl-tiered-rewards__progress-track; the fill is the track’s ::before).

.dkl-tiered-rewards__tiers

class

The tier row/column.

.dkl-tiered-rewards__tier

class

The wrapper for each tier.

.dkl-tiered-rewards__tier-marker

class

The marker dot (met: .dkl-tiered-rewards__tier-marker--active; the icon glyph is its ::before).

.dkl-tiered-rewards__tier-label

class

The wrapper for the tier label.

.dkl-tiered-rewards__tier-text

class

The “Save [discount]” text in the tier label.

.dkl-tiered-rewards__tier-amount

class

The “[amount]+” text in the tier label.

Examples

Restyle the progress fill and markers

:root {
  --dkl-tr-progress-color: #6d28d9;
  --dkl-tr-marker-active-color: #6d28d9;
  --dkl-tr-track-color: #ede9fe;
}

.dkl-tiered-rewards__tier-marker--active {
  box-shadow: 0 0 0 3px #ede9fe;
}

Custom messaging

<dkl-tiered-rewards
  data-spend-more-message="Add [amount] more for [discount] off!"
  data-success-heading="You did it! 🎉"
  data-success-message="Every reward unlocked"
  data-tier-save-label="[discount] off"
  data-tier-spend-label="at [amount]+"
></dkl-tiered-rewards>

Next steps

App blockConfigure these via theme-editor settings.

Web ComponentsSet these directly on the tag.