Variant & qty reactivity

The embed re-runs whenever the price needs to update — when the customer picks a different variant, when they change the quantity input, or when the theme re-renders the price block via its Section Rendering API.

Variant change

When a customer picks a new variant (color, size, style):

1. The embed listens for the variant:changed event that most themes fire
2. As a fallback, it watches ?variant= URL changes via MutationObserver
3. The new variant's price is read from the embed's payload (which carries every variant's priceCents)
4. The resolver re-runs with the new variant's retail price → new B2B price computed
5. Overlay replaces the old one in place — the old B2B price doesn't flash retail in between

How we avoid the flash of retail

Theme's Section Rendering API replaces the entire price element asynchronously (fetches HTML, swaps innerHTML). The cart Add to cart button gets disabled while the fetch is in flight and re-enabled the moment the new HTML is ready.

The embed uses that button's disabled attribute as a precise lifecycle signal:

• Enabled → disabled (theme just kicked off a re-render) → re-engage the pre-hide CSS gate, hiding the price element so the retail price doesn't peek through
• Disabled → enabled (theme finished re-rendering) → apply the new B2B overlay onto the freshly-rendered price element, release the pre-hide gate

This is more reliable than waiting a fixed number of milliseconds — slow networks render slower, fast networks render faster, and the cart button transition catches both.

Quantity change

Volume Pricing tiers depend on the quantity the customer plans to buy. The embed listens to:

• change events on the qty input (when the customer types and blurs / hits Enter)
• input events on the qty input (when the customer clicks + / - stepper buttons)

And re-ticks the resolver with the new qty:

Qty	Tier matched	Price shown
1	Tier 1 (1-9) — no extra discount	$21.25 (wholesale only)
10	Tier 2 (10-49 = 10% off)	$19.13 (wholesale + 10% volume)
50	Tier 3 (50+ = 15% off)	$18.06 (wholesale + 15% volume)

The qty input is found via form[action*="/cart/add"] input[name="quantity"] (the cross-theme convention). If your theme uses a custom selector, the embed falls back to input[name="quantity"] and [data-quantity-input] on the page.

Listing card prices

Collection / search / homepage product cards always render at qty=1. That's because the card doesn't know how many the customer will eventually buy. Once the customer clicks through to PDP and picks a qty, the volume tiers come alive.

If you have a Volume Pricing rule that gives a discount starting at qty 1 (i.e. tier 1 already has a discount), cards reflect that discount. Otherwise cards show the wholesale-only price.

When no rule applies

If no rule matches the current variant + customer + qty combination:

• Resolver returns null
• Embed leaves the theme's native price untouched
• Pre-hide gate releases immediately

So a guest viewing a B2B product on a public store sees the retail price unchanged, with no detectable delay or flicker.

Next

• Troubleshoot the embed
• Discount combination (Wholesale + Volume stacking)