Displays a dynamic stock indicator with color-coded status bar for SureCart products. Automatically syncs with product inventory and updates in real-time. Features customizable thresholds, colors, and text labels. Shows visual urgency through color changes as stock decreases. Perfect for creating scarcity and driving purchase decisions.

7 units in stock

Thresholds

Max Stock number

Maximum stock value used to calculate the percentage fill. Set this to your typical full inventory level for accurate visual representation.

Default: 100

Low Threshold percentage

Percentage below which stock is considered low. Triggers the low stock color to create urgency. Great for encouraging quick purchases.

Default: 20%

Medium Threshold percentage

Percentage below which stock is considered medium. Shows the medium stock color as a gentle reminder that inventory is decreasing.

Default: 50%

Colors

High Stock Color color picker

Color displayed when stock is above medium threshold. Typically green to indicate healthy inventory levels and availability.

Default: #22c55e (green)

Medium Stock Color color picker

Color displayed when stock falls between low and medium thresholds. Usually amber or yellow to signal moderate availability.

Default: #f59e0b (amber)

Low Stock Color color picker

Color displayed when stock drops below low threshold. Red creates urgency and encourages immediate action from buyers.

Default: #ef4444 (red)

Text Color color picker

Color of the stock count text. Should contrast well with your background for readability.

Default: #ffffff

Background Color color picker

Background color of the entire stock indicator container. Use transparent or subtle colors to blend with your product cards.

Default: transparent

Border Color color picker

Border color around the stock indicator container. Set to transparent for no border or use subtle colors for definition.

Default: transparent

Track Color color picker

Background color of the progress bar track. The unfilled portion of the bar. Use a subtle color that contrasts with the fill.

Default: rgba(255,255,255,0.1)

Text

Unit Suffix text

Text displayed after the stock number. Use "units", "items", "left", or any custom label that fits your product type.

Default: "units"

Stock Label text

Text displayed after the unit suffix. Common options include "in stock", "available", "remaining".

Default: "in stock"

Out of Stock Text text

Message displayed when stock reaches zero. Make it clear but not discouraging. Consider "Sold out" or "Back soon".

Default: "Out of stock"

Appearance

Bar Height pixels

Height of the progress bar in pixels. Smaller values (4-6px) look subtle, larger values (8-12px) are more prominent.

Default: 6

Border Radius pixels

Corner rounding of the container. Use 0 for sharp corners or higher values for a softer, rounded look.

Default: 12

Padding pixels

Internal spacing around the content. Larger padding creates more breathing room inside the container.

Default: 16

Behavior

Hide When Empty on/off

Automatically hides the entire stock indicator when stock reaches zero. Useful if you prefer to show nothing rather than an "out of stock" message.

Default: Off

Performance

This element is lightweight and won't slow down your site. Uses MutationObserver for efficient real-time stock updates without polling. CSS transitions provide smooth visual feedback. Compatible with SureCart's dynamic product data and works seamlessly with product grids and single product pages.