Use data-next-display on any element to bind it to a live cart value. The element updates automatically whenever the cart changes.
Attribute value Description Example output cart.isEmptyCart has no items "true" / "false"cart.isCalculatingTotals are being recalculated "true" / "false"cart.itemCountNumber of distinct line items "3"cart.totalQuantityTotal quantity across all items "5"cart.currencyActive currency code "USD"cart.currencyCodeAlias for cart.currency "USD"cart.currencySymbolCurrency symbol "$"
Attribute value Description Example output cart.subtotalSubtotal before shipping and discounts "$89.99"cart.totalCart total "$99.99"cart.shippingShipping cost "$5.00"cart.shippingOriginalOriginal shipping before discount — empty when no shipping discount "$9.99"cart.shippingDiscountAmountMonetary reduction on shipping "$4.99"cart.shippingDiscountPercentageShipping discount as a percentage "50"cart.shippingNameDisplay name of the active shipping method "Standard Shipping"cart.shippingCodeCode of the active shipping method "standard"cart.isFreeShippingShipping cost is zero "true" / "false"cart.hasShippingDiscountA shipping discount is applied "true" / "false"cart.totalDiscountTotal discount amount (offers + coupons) "$9.00"cart.hasDiscountsAny discounts are applied "true" / "false"
Deprecated: cart.discounts
cart.discounts is deprecated. Use cart.totalDiscount instead.
Append .raw for unformatted numbers. Use in expressions or with data-format.
Attribute value Description cart.subtotal.rawNumeric subtotal cart.total.rawNumeric total cart.shipping.rawNumeric shipping cost cart.totalDiscount.rawNumeric total discount
Attribute value Description Example cart.items[2].quantityQuantity of package ID 2 in cart "2"
Show or hide blocks based on cart state using data-next-show or data-next-hide.
Expression When true cart.isEmptyCart has no items cart.hasItemsCart has one or more items cart.hasItem(2)Package ID 2 is in cart cart.hasDiscountsAny discounts are applied cart.isFreeShippingShipping cost is zero cart.total > 50Cart total greater than 50 cart.total >= 100Cart total ≥ 100 cart.shipping > 0Shipping cost > 0 cart.totalQuantity >= 3Total quantity ≥ 3
Use on the same element as data-next-display.
Attribute Description Example data-formatOutput format currency, number, integer, percentagedata-hide-zero-centsHide .00 for whole numbers "true" → $99data-hide-if-zeroHide element when value is 0 "true"data-hide-if-falseHide element when value is false "true"data-divide-byDivide displayed value "2"data-multiply-byMultiply displayed value "0.1"
Use data-next-cart-items on a container to render cart line items from a template.
Attribute Description Example data-next-cart-itemsContainer where cart line items are rendered On wrapper <div> data-item-template-idID of <template> used for each item "cart-item-template"data-item-template-selectorCSS selector for template node "#custom-template"data-item-templateInline HTML template string '<div>{item.name}</div>'data-empty-templateHTML shown when cart is empty '<p>Your cart is empty</p>'data-title-mapJSON: package ID → custom title '{"2": "Premium", "3": "Starter"}'data-group-itemsGroup identical items into one line Present = on
Used inside the template referenced by data-next-cart-items. Replace {item.xyz} with the value for each cart line.
Variable Description Example {item.id}Unique cart item ID Auto-generated {item.packageId}Package ID "123"{item.name}Package display name "Grounded Sheets"{item.title}Alias for {item.name} Same as name {item.quantity}Quantity in cart "2"{item.image}Product image URL "https://..."{item.sku}Product SKU "GRS-001"{item.frequency}Purchase frequency "One time" / "Every month"
Variable Description Example {item.productName}Base product name "Grounded Sheets"{item.variantName}Full variant name "Grounded Sheets - Obsidian Grey / Twin"{item.variantSku}Variant SKU "BE-GRS-TWN-GR"{item.variantAttributesFormatted}Comma-separated attributes "Color: Obsidian Grey, Size: Twin"{item.variantAttributesList}HTML <span> elements per attribute <span class="variant-attr">...</span>{item.variantColor}Color attribute value "Obsidian Grey"{item.variantSize}Size attribute value "Twin"
Variable Description Type {item.price}Package price Currency {item.unitPrice}Price per unit Currency {item.comparePrice}Original package price Currency {item.unitComparePrice}Original unit price Currency {item.lineTotal}price × quantity Currency {item.lineCompare}Original line total Currency {item.recurringPrice}Recurring price (subscriptions) Currency
Variable Description Type {item.savingsAmount}Total savings vs retail Currency {item.unitSavings}Per-unit savings Currency {item.savingsPct}Savings percentage "50%"
Variable Description Type {item.discountAmount}Coupon discount for this item Currency {item.discountedPrice}Price after coupon Currency {item.discountedLineTotal}Line total after coupon Currency {item.finalPrice}Final price to display Currency {item.finalLineTotal}Final line total Currency
Variable Values Use when {item.showCompare}"show" / "hide"Compare price exists {item.showSavings}"show" / "hide"Item has savings {item.showRecurring}"show" / "hide"Recurring product {item.showDiscount}"show" / "hide"Coupon applied {item.showOriginalPrice}"show" / "hide"Price is discounted
Use on buttons inside an item template to control quantity or remove an item.
Attribute Description Example data-next-quantityChange quantity "increase" or "decrease"data-next-remove-itemRemove this package from cart No value data-package-idPackage ID for the action "{item.packageId}"data-cart-item-idCart line ID "{item.id}"
Used inside the <template> of a data-summary-lines container. Replace {line.xyz} with the value for each cart line.
Variable Description {line.packageId}Package ref_id {line.quantity}Number of packages on this line (integer) {line.qty}Alias for {line.quantity} — preferred in templates {line.name}Package display name {line.image}Product image URL {line.productName}Product name {line.variantName}Variant name (e.g. "Black / Small") {line.sku}Product SKU
Variable Description {line.price}Per-unit price as configured in the campaign {line.priceTotal}{line.price} × quantity for this line{line.priceRetail}Full retail (compare-at) price per unit {line.priceRetailTotal}Retail price × quantity {line.priceRecurring}Per-unit recurring billing price (subscriptions only) {line.priceRecurringTotal}Recurring price × quantity (subscriptions only) {line.isRecurring}"true" if this line bills on a recurring schedule
Variable Description {line.unitPrice}Per-unit price after all discounts {line.originalUnitPrice}Per-unit price before discounts — pair with {line.unitPrice} for before/after display {line.packagePrice}Line total after discounts (unit price × quantity) {line.originalPackagePrice}Line total before discounts {line.subtotal}Line subtotal as calculated by the API {line.totalDiscount}Total discount applied to this line {line.total}Final line amount after all discounts
Variable Values Description {line.hasDiscount}"show" / "hide""show" when any promotion reduces this line's price{line.hasSavings}"show" / "hide""show" when the unit price is below the retail (compare-at) price
<!-- Show a "Sale" badge only when a discount is applied to this line --> < span class = "badge {line.hasDiscount}" >Sale</ span > A complete cart UI wiring up display attributes, cart items list, and totals:
< div class = "cart-summary" data-next-show = "cart.hasItems" > < h3 >Cart Summary</ h3 > <!-- Cart item list --> < template id = "cart-item-full-template" > < div class = "cart-item" data-cart-item-id = "{item.id}" data-package-id = "{item.packageId}" > < img src = "{item.image}" alt = "{item.name}" > < h4 >{item.name}</ h4 > < p >{item.productName} – {item.variantName}</ p > < p >{item.variantAttributesFormatted}</ p > < p class = "price" >{item.price} × {item.quantity} = {item.lineTotal}</ p > < s class = "{item.showCompare}" >{item.comparePrice}</ s > < span class = "{item.showSavings}" >Save {item.savingsAmount} ({item.savingsPct})</ span > < span class = "{item.showDiscount}" >Coupon: -{item.discountAmount}</ span > < span class = "{item.showRecurring}" >{item.recurringPrice}</ span > < button data-next-quantity = "decrease" data-package-id = "{item.packageId}" >−</ button > < span >{item.quantity}</ span > < button data-next-quantity = "increase" data-package-id = "{item.packageId}" >+</ button > < button data-next-remove-item data-package-id = "{item.packageId}" >Remove</ button > </ div > </ template > < div data-next-cart-items data-item-template-id = "cart-item-full-template" data-empty-template = ' < p class="empty-msg">Your cart is empty < /p>' class = "cart-items-list" > </ div > <!-- Cart totals --> < div class = "cart-totals" > < div >< span >Subtotal:</ span >< span data-next-display = "cart.subtotal" >$0.00</ span ></ div > < div data-next-show = "cart.shipping > 0" > < span >Shipping:</ span > < span data-next-display = "cart.shipping" data-hide-if-zero = "true" >$0.00</ span > </ div > < div data-next-show = "cart.hasDiscounts" > < span >Discount:</ span > < span data-next-display = "cart.totalDiscount" >-$0.00</ span > </ div > < div class = "total" > < span >Total (< span data-next-display = "cart.currencyCode" >USD</ span >):</ span > < span data-next-display = "cart.total" data-format = "currency" >$0.00</ span > </ div > </ div > <!-- Free shipping threshold --> < div data-next-show = "cart.total < 100" > < p >Add $< span data-next-display = "100 - cart.total.raw" >0</ span > more for free shipping!</ p > </ div > < div data-next-show = "cart.isFreeShipping" > < p >✓ Free shipping!</ p > </ div > < div data-next-hide = "cart.isEmpty" > < button type = "button" >Proceed to Checkout</ button > </ div > </ div > < div class = "cart-empty-state" data-next-show = "cart.isEmpty" > < p >Your cart is empty</ p > < a href = "/shop" >Continue Shopping</ a > </ div >
Deprecated: data-include-discounts
data-include-discounts on data-next-display="cart.subtotal" is deprecated. Show discounts as a separate row using data-next-display="cart.totalDiscount" and hide it with the .next-no-discounts CSS state class instead.
