Inventory-aware quantity tiers on the product page

What was happening

The product page used quantity tiers that mapped directly to real cart quantity. A tier selection had to update the total price and savings immediately, work with sale pricing, support a return to a single item, and react when the customer switched to a variant with different inventory.

Why the obvious solution was not enough

Each Shopify variant has its own inventory state. A tier that is valid for one size or color can be impossible for another, and inventory can change after the page is rendered. The UI therefore had to guide the customer without pretending it was the final stock authority.

How the solution works

1. Treat each tier as a quantity choice for the selected variant rather than creating fake bundle products for every threshold.
2. Read the selected variant's available quantity and compare it with every configured tier.
3. Disable any tier that exceeds available stock. If seven units are available, Buy 10 and Buy 20 are visibly unavailable while Buy 3 and Buy 6 remain valid.
4. Calculate the displayed total from the active selling price for the selected variant. Sale variants must use the sale price rather than a hard-coded product price.
5. Keep a clear single-item state so a customer can undo a tier selection without reloading or changing variants.
6. Re-run price, savings, selected state, and disabled tiers every time the variant changes.
7. Validate the requested quantity again when adding to cart because the product page is only a snapshot of inventory.
8. When a fixed multipack is assembled from real variants, continue referencing those underlying variants so stock decrements from the same inventory source.

function getTierState(tiers, available) {
  return tiers.map((qty) => ({
    qty,
    disabled: qty > available,
  }));
}

function tierTotal(unitPrice, qty) {
  return unitPrice * qty;
}

// Re-run both functions whenever the selected variant changes.

What should be verified before shipping

• Test inventory values around every quantity tier, including 0, 1, 2, 3, 7, 10, 19, and 20.
• Switch between variants with very different stock while a tier is selected.
• Compare regular-price and sale-price variants and verify total and savings labels remain correct.
• Return from a tier to a single item and confirm quantity, price, and selected state reset together.
• Verify disabled states remain obvious on mobile and are not only communicated by color.
• Simulate inventory changing after page load and confirm the add-to-cart response is handled gracefully.

What changed

The bundle-like UX remained connected to Shopify's real variant and inventory model, reducing the chance that a promotional choice would promise quantity the store could not fulfill.

Reusable lesson

Do not create a second inventory truth for presentation. Let the UI respond to Shopify variant state and validate again at the moment the cart changes.