Inventory Urgency — Reasoning & Recommendations

01TL;DR

02Current state

The current PDP shows "In Stock" or no badge at all. PLP cards show fuzzy "IN STOCK / LOW STOCK / OUT OF STOCK" pills without counts. No surface anywhere shows the count. Buyers can't tell whether "Low stock" means 3 units or 30.

Why it matters: B2B buyers managing recurring procurement actively want the count. A fleet manager ordering for 3 sites knows they need 24 brushes — if the listing shows "Only 8 left," they decide whether to wait for restock or order an alternate now. Hiding the count makes the decision blind.

03References

Amazon — the canonical pattern

"Only N left in stock — order soon" is Amazon's exact wording. Above threshold: "In Stock." Below threshold and falling fast: "Only N left in stock (more on the way)." Threshold appears to be ~10–20 depending on category.

Grainger

Shows exact count when low: "Only 6 available." Cart shows backorder ETA inline. No "running low" predictive.

McMaster-Carr

Doesn't show urgency. Their model: order it, McMaster will tell you in checkout if it's not available. Engineers know they're going to order what they need regardless.

HD Supply

Quantity available shown on PDP for B2B customers. Often shows multi-warehouse availability — a B2B-specific extension worth considering for Phase 2/3.

04What BC Stencil gives us

• product.inventory_level — current on-hand quantity per product or per variant. Native field.
• product.inventory_warning_level ("Low Stock Notification Level" in admin) — threshold the merchant configures per product. When inventory_level <= inventory_warning_level, the product is in the low-stock state.
• product.inventory_tracking — "none" / "product" / "variant." Determines which level to read.
• Stencil templates — {{#if product.inventory_level}} and {{#if product.is_low_stock}} are exposed in product, card, and cart templates.
• API — /v3/catalog/products/{product_id} exposes all three for programmatic config.

05Stencil limitations

• No native multi-warehouse inventory display. BC stores a single inventory_level per product/variant. USA Clean ships from 3 warehouses (Columbus / Texas / California) but the storefront sees only the aggregate. HD-Supply-style "Atlanta: 8 · Dallas: 22" pattern requires custom field set or app (Phase 2).
• No predictive "stock running low" before threshold. Stencil only reads the current count; no velocity API. Phase 3 → analytics pipeline or Catalyst.
• Notify-me is partial. BC has a "Notify When Back" link but emails go through the merchant's email system; UI is basic. Most stores swap in a back-in-stock app for the customer-facing piece.
• Per-category threshold defaults aren't native. The threshold is per-SKU. Phase 2 needs admin automation (bulk-update via API or sheet import).

06App marketplace shortlist

07Caster impact

Existing .stock-badge primitive (already in Caster) gets new usage convention:

• stock-in → "In stock" (above threshold, no count)
• stock-low → "Only N left" (≤10, with exact count)
• stock-out → "Out of stock" (zero)
• stock-back → "Backorder · ships {date}" (existing — for items with vendor ETA)

No new tokens or components required. The convention update is purely content/copy and threshold logic.

Downstream impact: PLP cards adopt new copy ("In stock" not "IN STOCK," "Only 3 left" not "LOW STOCK"). PDP related-items + bundle alt-options use same convention. Cart row pill already follows the pattern.

08Phased recommendation

09Implementation notes

Stencil theme edits (Phase 1)

{{#if product.inventory_level}}
  {{#if product.is_low_stock}}
    <span class="stock-badge stock-low">Only {{product.inventory_level}} left</span>
  {{else}}
    <span class="stock-badge stock-in">In stock</span>
  {{/if}}
{{else}}
  <span class="stock-badge stock-out">Out of stock — notify me</span>
{{/if}}

Accessibility

• Stock state is conveyed by text, not color alone. The "Only 3 left" text + amber background + warning-icon-dot pattern ensures screen readers + colorblind users get the same signal.
• The count is announced inline ("Only 3 left, in stock").
• Live updates announce via aria-live="polite" (not assertive — pushy).

Analytics

Conversion delta on low-stock PDPs vs. above-threshold. Bounce rate / time-on-page differential — confirm the message isn't perceived as pressure. Back-in-stock email opt-in rate. Velocity differential pre/post launch on low-stock SKUs.

10Catalyst / replatform candidacy

Phase 1 + 2 ship well in Stencil. Native fields + template logic + admin scripts. No friction.

Phase 3 is Catalyst territory. Velocity-based predictive low-stock requires querying analytics on every PDP render. Stencil can do it via API calls in the template (slow, expensive) or pre-compute and cache via a custom field (stale, manual). Catalyst's server-rendered React makes this clean — call the velocity service on PDP load, cache server-side, render.

Multi-warehouse availability is similar — a Stencil page can iterate a warehouse_inventory custom field, but the UX of "show me the closest warehouse with stock" is a Catalyst sweet spot.

11Sources