Inventory bar

Display remaining stock with a visual progress indicator

The Inventory Bar block shows the remaining stock for the selected variant along with a progress bar. It’s primarily used to create a sense of urgency, especially when inventory levels are running low, encouraging customers to make a purchase decision sooner.

When stock drops below a defined threshold, the styling automatically changes from the normal “in stock” state (typically green) to a warning-style color, such as orange. This visual cue helps draw attention to low availability without being intrusive.

Configuration

The Inventory Bar block includes the following settings:

• Low stock threshold – Defines the stock level below which the bar switches to low-stock styling.

• Max stock to compare – The reference value used to calculate the width of the progress bar.

• Progress bar height – Sets the height of the progress bar in pixels. Increasing this value makes the bar more prominent.

Styling

You can fully customize how the Inventory Bar looks in different stock states:

• Low stock – Color used for the progress bar and text when stock is below the defined threshold. Default: #A16207

• Has stock – Color used when stock is above the low-stock threshold. Default: #15803D

• Sold out – Color used when the selected variant is not available for sale. Default: #B91C1C

• Animate progress-bar width – When enabled, the progress bar animates on page load from 100% down to its calculated value. Disable this if you prefer a static display.

• Colored text – Disable this option if you prefer the text to use the default body color instead of matching the progress bar colors. The progress bar itself will always respect the selected styling colors.

This block is especially effective for limited-stock products, flash sales, and high-demand items where urgency can significantly improve conversions.