discountkit live componentsBeta

Discount Components, assembled.

Six storefront components that read your live discounts and render them in your theme's style. No rebuilt logic, no flicker and no code unless you want it.

Try it live Read the docs →

Server-rendered, zero flicker
Zero config functionality
Speaks standard storefront events

01 · Building Blocks for any UI

Six components. Infinite options. Zero hassle.

Pick a tier, change the quantity, swap the colour, add to cart. Watch the magic.

kitsupply

Kit Supply Co.

The Kit Tee

Colour — Ink

Volume pricing

This panel runs the production component code, the same bundles your storefront loads, fed with a demo discount and a simulated cart.

02 · Gift with purchase

Gifting becomes effortless.

The gift selector is the quickview in selection mode: each tier becomes a group, each gift a slot. The Gift with purchase embed opens it the moment the cart qualifies. Try each moment below. It runs on the same cart as the store above.

01
Unlock
Cross $100 and the selector opens by itself, over whatever the shopper is doing, even another quickview.
02
Choose
A tier with a choice shows a picker; a one-product tier opens straight on it. The tray fills slot by slot ("Add gift 1 of 2") and the lot goes in one write.
03
Change
<dkl-change-gifts> reopens it pre-filled. Drop below a tier and its gifts leave with it.
Embed settings

Cart subtotal$0.00

$100 a free cap or tote$150 two free pairs of socks

In the cart

openQuickview(request)waiting

// the embed's selection-mode
// request appears here when a
// tier unlocks

events0

Gift events land here: adjustments, selection changes, the add.

03 · Make it yours

Your brand, not ours.

Every colour, radius, typeface and line of copy is a styling token or a string. Pick a look, then make it yours.

Preset

Accent

Corner radius12px

Typeface

Title

<dkl-volume-picker-radio-groups>

04 · The kit

Every scenario, covered.

Each component reads the same live discount data, so what shoppers see always matches what checkout applies.

Volume picker

Tiered quantity pricing as cards or buttons, kept in sync with the theme's quantity stepper and <dkl-price> component.

<dkl-volume-picker-radio-groups>

Price

A discount-aware price that follows the selected tier and variant.

<dkl-price>

Sale badge

Your sale's reward in its own units, whether that's 20% or $10 off.

<dkl-sale-badge>

Order goal

Progress to the next spend tier, updated on every cart change.

<dkl-order-goal>

Choose your options

Quickview

A product dialog with variants and live discounts, opened from any trigger. Variant support for 2000+ variants is included out the box.

<dkl-quickview>

Volume table

Every tier at a glance. The row the shopper has unlocked lights up.

<dkl-volume-table>

05 · For developers

Full control where you need it.

Merchants place app blocks from the theme editor. Developers can drop the same elements into Liquid, then style them and listen to them like any other part of the theme. Three steps:

product.liquid

your-store.com/products/kit-tee

</>Nothing on the page yet.

App blocks vs web components →Global styling →Events reference →

Ready when you are

Put them on your storefront.

Turn on the Discount Kit Live app embed, build a component under Discount Kit → Components and place it with the DK: Component block.

Get started ↗Read the docs →