Display the stock level on the product page with a visual progress bar and customizable urgency messages.
Stock Indicator
The stock indicator displays the remaining quantity of a product with a visual progress bar. It works in real Shopify inventory mode or in manual mode with a fixed number.
How to Add It
- Open the Shopify theme editor
- Navigate to a product page
- Click Add a block in the product section
- Select Stock
ℹ️This block is limited to 1 per section. It automatically updates when the customer changes variants (in Shopify mode).
2 Operating Modes
| Mode | Data Source | Use Case |
|---|---|---|
| Shopify | Real Shopify inventory (inventory_quantity) | Stores with active inventory tracking |
| Manual | Fixed number configured in settings | Dropshipping, products without tracking, marketing urgency |
Shopify Mode
In Shopify mode, the indicator:
- Reads the real quantity of the selected variant
- Updates dynamically when the variant changes
- Only displays if inventory tracking is enabled (
inventory_management == 'shopify') and stock > 0
Manual Mode
In Manual mode, the indicator:
- Always displays the configured number (e.g., 23)
- Does not change when the variant changes
- Displays for all products, even without inventory tracking
⚠️In Manual mode, the displayed number is disconnected from your actual inventory. Use it ethically: a fake stock of "3 remaining" on an unlimited product can erode trust if the customer notices.
Settings
Stock Source
| Setting | Type | Options | Default | Description |
|---|---|---|---|---|
| Type | Select | Shopify / Manual | Shopify | Stock data source |
| Manual stock | Range | 1-100 | 23 | Number displayed in manual mode |
| Limit | Range | 20-500 (step 20) | 100 | Maximum value for the bar percentage calculation |
ℹ️The Limit defines the "100%" value of the bar. If your stock is 25 and the limit is set to 100, the bar will be 25% filled. Adjust the limit based on your volumes for an optimal visual result.
Message
| Setting | Type | Default | Description |
|---|---|---|---|
| Text | Richtext | "Hurry! Only $quantity left in stock!" | Displayed message. $quantity is replaced by the number |
The $quantity placeholder is automatically replaced by the real or manual stock number. You can use bold in the text to highlight certain words.
Bold Text Style
Three options for styling bold words in your message:
| Style | Description |
|---|---|
| Default | Standard bold, same color as text |
| Color | Bold in an accent color (Accent 1, Accent 2, or Text) |
| Highlight | Bold with colored background and contrasting text |
| Setting | Type | Options | Default | Condition |
|---|---|---|---|---|
| Bold style | Select | Default / Color / Highlight | Default | - |
| Bold color | Select | Accent 1 / Accent 2 / Text | Accent 1 | Style = Color |
| Highlight background | Select | Accent 1 / Accent 2 / Background / Text | Accent 1 | Style = Highlight |
| Highlight text | Select | Background / Text / Accent 1 / Accent 2 | Background | Style = Highlight |
Progress Bar
The progress bar fills proportionally to the stock relative to the configured limit.
| Setting | Type | Options | Default | Description |
|---|---|---|---|---|
| Bar color | Select | Accent / Heading / Text | Accent | Fill color |
| Alignment | Select | Left / Center / Right | Left | Block alignment |
Dynamic Behavior
When the customer changes variants on the product page:
- The block reads the new variant's quantity from the injected data (
data-stock-variants) - The
$quantitytext is updated - The bar width is recalculated
- If the new variant's stock is 0 (Shopify mode), the block may hide
💡Combine the stock indicator with the Delivery Estimation block for a double urgency effect: "Only 5 left in stock" + "Order before 2 PM for same-day shipping." These two blocks together significantly increase conversion rate.
Use Cases
Limited stock product (real)
- Shopify mode, limit set to 50
- Text: "Only $quantity left in stock!"
- Bar in Accent color for visibility
Marketing urgency
- Manual mode, stock set to 15
- Text: "High demand! Only $quantity available"
- Bold style in highlight for the number
Normal stock without pressure
- Shopify mode, limit set to 500
- Neutral text: "$quantity available"
- Bar in Text color for a subtle look