App block

The Component app block renders <dkl-tiered-rewards> with no code. You build the progress bar once in the Shopify admin — layout, colours, icons, messages — then pick it in the block.

Add it

1. Create the component

   In the Shopify admin, go to Discount Kit → Components and choose Create component, then Discount component. Pick the tiered rewards discount, then Horizontal or Stacked. Customise it against the live preview and save it. A discount with more than 3 tiers only offers Stacked: the horizontal layout fits up to 3.

2. Open the theme editor

   Online Store → Themes → Customize. Make sure the Components app embed is enabled.

3. Add the Component block

   In the section where you want the progress bar — a product page, the cart page, anywhere that takes app blocks — click Add block and choose Component, then position it. For a cart drawer, use the web component.

4. Pick your component

   Set the block’s Component setting to the one you created.

What you can configure

Everything below is set on the component in the admin, not on the block. Each control maps to a data-* attribute or a --dkl-* token underneath — see Styling & Data Attributes for the equivalents.

Group	What’s in it
Layout	The variant (Horizontal or Stacked), margins, card padding, corner radius, marker size
Colours	The track, marker fill and marker icon — each not reached and reached — plus the card background, text, tier labels and marker border
Typography	Message, message detail, tier label and tier spend sizes, heading and body font families
Icons	An image for each marker — percentage and fixed-amount order discounts, shipping, gift, and the reached check — picked from your store’s Files in Shopify’s file picker (you can upload there too). Square, 128 × 128 px, SVG or transparent PNG. Remove goes back to the built-in icon.
Text	A next-goal message for each reward — order discount, shipping discount, free shipping and free gift ([amount], [discount]) — the success heading and message, a tier label for each reward, and the tier’s spend or quantity line

Note

A block with no component picked renders nothing. Placing a component somewhere it can’t find what it needs — a product, or its discount — renders nothing too.

Next steps

Components & the app blockThe full flow: create a component, place it, and where global styles come from.

Web ComponentsThe same component placed by hand, configured with data-*.

Styling & Data AttributesThe tokens, parts, and attributes behind these settings.