Get Started

Show and hide elements based on cart state with two attributes.

data-next-show

Show the element when the expression is true.

<div data-next-show="cart.hasItems">
  Cart has items
</div>

<div data-next-show="cart.total > 100">
  Free shipping unlocked!
</div>

<div data-next-show="cart.hasItem(123)">
  Premium package selected
</div>

data-next-hide

The inverse: hide the element when the expression is true.

<button data-next-hide="cart.isEmpty">
  Proceed to Checkout
</button>

<button data-next-hide="cart.hasItem(123)">
  Add Premium Package
</button>

Combine With Display

Pair conditionals with data-next-display to show contextual content.

<div data-next-show="cart.total < 100">
  Add $<span data-next-display="100 - cart.total">0</span> more for free shipping
</div>

<div data-next-show="cart.total >= 100">
  Free shipping included!
</div>

How Visibility Works

The SDK uses CSS classes (not DOM removal) for performance and layout stability:

• When the condition is true for show (or false for hide), the element is visible.
• When the condition flips, the SDK adds or removes a style="display: none" rule on the element.
• No layout shift, no content reflow during evaluation.

Conditions re-evaluate automatically on every cart update, package change, or URL parameter change.

Next Steps

• Compound and grouped conditions: Operators
• Properties you can read in a condition: Properties
• Full attribute reference: Reference → Attributes