PDP

Stock Remaining

Shows availability messaging for the selected variant. Two modes: Text (styled messages per state) and Slots (connect your own component instances). Four states: Select Options, Sold Out, Low Stock, and Available.

What it does

AP_StockRemaining shows availability messaging for the selected variant on a PDP. It has two modes:

Text mode – built-in styled messages per state
Slots mode – connect your own designed components per state

Four stock states are supported:

Select Options – when no variant is selected
Sold Out – when the selected variant is unavailable
Low Stock – when quantity is at or below a configurable threshold
Available – when in stock above the low-stock threshold

Use this component to clearly communicate stock status and urgency to shoppers directly on the product page.

How to set it up

Place on your PDP

Add AP_StockRemaining to your product detail page layout.
Set Product ID to match the Shopify product you want to track.

Choose a mode

Mode: Text
Configure message copy for each state: Available, Low Stock, Sold Out, and Select Options.
Optionally include the live quantity using the {{count}} placeholder.
Style each state's text box independently (font, color, background, border, padding, border radius), with a shared Base Box for common styling.

Property Controls

ControlTypeDefaultDescription

Product IDString—Shopify product ID used to fetch variant availability and quantity.

ModeEnumTextSelect how stock messaging is rendered: Text = built-in styled messages; Slots = connect your own component instances per state.

Preview StateEnumAvailableCanvas-only preview override. Choose which stock state (Select Options, Sold Out, Low Stock, Available) to display while designing.

Low Stock AtNumber5Quantity threshold at or below which the Low Stock state is shown (when quantityAvailable is greater than 0).

Available (slots)Component Instance—Component instance shown in Slots mode when the selected variant is in stock above the low stock threshold.

Low Stock (slots)Component Instance—Component instance shown in Slots mode when quantityAvailable is at or below the Low Stock At threshold and above zero.

Sold Out (slots)Component Instance—Component instance shown in Slots mode when the selected variant is unavailable or out of stock.

Select Options (slots)Component Instance—Component instance shown in Slots mode when no variant is currently selected (e.g. before options are chosen).

Base Box (text)Object—Shared container styling for all text states in Text mode, including layout, background, border, padding, and border radius.

Available (text)Object—Configuration for the Available text state: message copy, optional count display, text styling, and optional box override.

Low Stock (text)Object—Configuration for the Low Stock text state: message copy (supports {{count}}), text styling, and optional box override.

Sold Out (text)Object—Configuration for the Sold Out text state: message copy, text styling, and optional box override.

Select Options (text)Object—Configuration for the Select Options text state: message copy, text styling, and optional box override.