Stock Indicator Element
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, please 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 at or 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 (formatted with your store's currency)
$29.99, 30₫
{compare_price}
Compare-at price (formatted)
$39.99, 40₫
{saved_amount}
Price difference between compare-at and current price (formatted)
$10.00, 10₫
{saved_percentage}
Percentage saved
25
Note: Price variables (
{price},{compare_price},{saved_amount}) are automatically formatted using your store's currency settings — the same format used by the Product Price element.
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
#22c55e (green)
A positive color indicating availability
Low Stock
#f97316 (orange)
A warning color to signal limited availability and encourage purchases
Out of Stock
#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.
This works with all variant selector types — dropdowns, swatches, and radio buttons.
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 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 loaded from Shopify each time a customer visits the page. When you update stock in Shopify admin, customers will see the updated quantity on their next page visit.
Important: If you only adjust inventory in Shopify admin without clicking Save on the product, the storefront may not reflect the change immediately. Always save the product after adjusting inventory to ensure the storefront displays the latest data.
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.
Why are price variables showing raw numbers instead of formatted prices?
Price variables like {price} and {compare_price} use your store's money format settings. If you see unformatted numbers, make sure your Shopify theme has the money format properly configured in Shopify Admin > Settings > General.
Additional Resources
Last updated
Was this helpful?