← Web Components

Web Components · PDP

<mmm-pdp-hurry-up>

Stock-urgency alert — "Only 3 left in stock", "Hurry, almost gone", etc. Reads low-stock messaging from PDP_STORE.productInfo; renders nothing when the product is comfortably in stock.

Overview

A single-line typographic alert. The text is data-driven; the colour and weight are configurable to suit your store's voice (warm orange, deep red, accent purple).

When to use

  • Above add-to-cart for low-stock products.
  • For seasonal / drop products where scarcity drives urgency.
  • Skip for evergreen catalog items with deep stock.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-pdp-hurry-up alert-color="#ff6b35"></mmm-pdp-hurry-up>

Attributes

AttributeTypeDefaultDescription
alert-colorstring#ff6b35Alert text colour.
alert-font-weightstring600Alert font weight.
alert-font-sizestring0.875remAlert font size.
alert-margin-bottomstring0.9375remSpacing below the alert.
custom-cssstring—Extra CSS appended inside the shadow DOM.

Live preview

store sample-store tag <mmm-pdp-hurry-up>

Examples

1. Default orange urgency

<mmm-pdp-hurry-up></mmm-pdp-hurry-up>

2. Hot red shouty version

<mmm-pdp-hurry-up
  alert-color="#dc2626"
  alert-font-weight="700"
  alert-font-size="0.9375rem"
  custom-css="text-transform:uppercase;letter-spacing:0.05em;">
</mmm-pdp-hurry-up>

3. Minimalist muted

<mmm-pdp-hurry-up
  alert-color="#6d7175"
  alert-font-weight="500"
  alert-font-size="0.75rem">
</mmm-pdp-hurry-up>