Stock Indicator Element
Overview
The Stock Indicator element displays real-time inventory status for Shopify products directly on your PageFly pages. It automatically shows whether a product is In Stock, Low Stock, or Out of Stock — helping create urgency and inform customers before they add items to cart.
This element must be placed inside a Product Details container or on a Product page to work correctly.
How to Access
In the PageFly editor, open the Elements panel (left sidebar).
Navigate to Shopify Elements > Product.
Drag the Stock Indicator element into your page canvas, inside a Product Details container.
Note: The Stock Indicator element is available when the feature is enabled for your store. If you don't see it in the elements panel, contact PageFly support.
Configuration (General Tab)
When you select the Stock Indicator element on the canvas, the Inspector panel (right sidebar) shows the following settings under the Content group:
Display Option
Controls when the stock indicator is visible on the live storefront.
Always
The stock indicator is always visible regardless of quantity.
Show if under threshold
The stock indicator only appears when inventory falls below the Visibility Threshold value.
Visibility Threshold
Only appears when Display Option is set to "Show if under threshold".
Sets the inventory quantity at which the stock indicator becomes visible. For example, if set to 10, the indicator only appears when stock is 10 or fewer.
Range: 1 – 100
Default: 5
Low Stock Threshold
Determines the quantity at or below which a product is considered "Low Stock" (instead of "In Stock").
Range: 0 – 100
Default: 5
Example: If set to 5, a product with 5 or fewer units shows the Low Stock message. A product with 6+ units shows the In Stock message.
Custom Text Messages
You can customize the text displayed for each stock status. All text fields support dynamic variables that are automatically replaced with product data.
Available Variables
{quantity}
Current inventory quantity
12
{title}
Product title
Classic T-Shirt
{vendor}
Product vendor
Nike
{price}
Current price
29.99
{compare_price}
Compare-at price
39.99
{saved_amount}
Price difference (compare - current)
10.00
{saved_percentage}
Percentage saved
25
In Stock Text
Message shown when the product is in stock (above Low Stock Threshold).
Default:
{quantity} in stockExample:
{quantity} available - order now!
Low Stock Text
Message shown when the product quantity is at or below the Low Stock Threshold.
Default:
Only {quantity} left!Example:
Hurry! Only {quantity} remaining - Save {saved_percentage}%!
Out of Stock Text
Message shown when the product has zero inventory.
Default:
Out of StockExample:
Sold out - check back soon!
Custom Colors
Each stock status can have a distinct color to visually communicate urgency to customers.
In Stock Color
Default:
#22c55e(green)A positive color indicating availability.
Low Stock Color
Default:
#f97316(orange)A warning color to signal limited availability and encourage purchases.
Out of Stock Color
Default:
#ef4444(red)A clear signal that the product is unavailable.
Tip: Choose colors that contrast well with your page background for maximum visibility.
Stock Status Logic
The Stock Indicator determines status using the following rules:
Product does not track inventory
In Stock
Inventory policy is "Continue selling when out of stock"
In Stock
Quantity > Low Stock Threshold
In Stock
0 < Quantity ≤ Low Stock Threshold
Low Stock
Quantity ≤ 0
Out of Stock
Variant Support
The Stock Indicator automatically updates when customers select a different product variant. Each variant has its own inventory quantity, so the displayed status and message will change accordingly.
Styling
You can style the Stock Indicator element using the Styling tab in the Inspector panel. Available styling options include:
Typography — Font family, size, weight, line height, letter spacing
Spacing — Margin and padding
Background — Background color or image
Border — Border style, width, radius
Effects — Opacity, box shadow
Common Use Cases
1. Create Urgency on Product Pages
Place the Stock Indicator below the product price or Add to Cart button. Set a Low Stock Threshold of 10 and customize the Low Stock text to Only {quantity} left — order now! with an orange color to encourage quick purchases.
2. Show Stock Only When Low
Set Display Option to Show if under threshold with a Visibility Threshold of 15. This keeps the page clean when stock is plentiful but creates urgency when inventory drops.
3. Pair with Product Badge
Combine the Stock Indicator with a Product Badge element to show both discount information and stock availability, giving customers maximum purchase motivation.
Frequently Asked Questions
Why does the Stock Indicator show "In Stock" even when quantity is 0?
This happens when the product's inventory policy is set to "Continue selling when out of stock" in Shopify admin. In this case, the product is always considered available for purchase, so the indicator shows "In Stock."
Can I use the Stock Indicator outside a Product Details container?
The Stock Indicator needs product context to function. It must be placed inside a Product Details container or used on a Product page type. If placed outside, it will show a placeholder message asking you to select a product.
Does the Stock Indicator work with product variants?
Yes. The indicator automatically updates when a customer selects a different variant, reflecting the specific variant's inventory quantity.
How often is inventory data updated?
Inventory data is synced from Shopify in real-time via webhooks. When stock changes in Shopify (due to orders, restocks, or manual updates), the Stock Indicator reflects the change on the next page load.
Can I hide the Stock Indicator for specific products?
Use the Display Option setting to control visibility. Set it to "Show if under threshold" with a low Visibility Threshold so the indicator only appears for products with very limited stock.
Additional Resources
Last updated
Was this helpful?