CI Low Stock Counter

Shopify App | Documentation

Version: 1.1
Author: CynoInfotech Team

Published: 19 March, 2026
Last Update: 11 August, 2026

If you have any questions beyond the scope of this guide, feel free to email us at info@cynoinfotech.com.

Information

Improve your store conversions by creating urgency and scarcity with the Low Stock Counter. This app automatically displays real-time inventory alerts on your product pages and collection pages.

By displaying messages like “Only 3 left in stock” or “Selling fast” or many more, the app encourages customers to complete their purchase before the product sells out. Showing remaining inventory helps create a sense of urgency and increases sales while improving the overall shopping experience.

With easy setup and customizable display options, merchants can match the stock counter with their store design and control when alerts appear based on inventory thresholds.

Key Features:

Display live count directly on collection and product page to show customers exactly how many items remain in stock.
Five message types to encourage customers: Continue Selling if Out of Stock, Out of Stock Alert, Only 1 Left, Low Stock Warning, and Full Stock Display.
Fully customize each message's icon, text, sub text, colors, font size, background, progress bar, and animation so the stock counter matches your store branding.
Use the {available-stock} variable to automatically show the exact remaining quantity in your message text.
Apply each message to All products, or Specific products/collections.
Control visibility separately for the Product Page and Collection Page, with support for paginated or infinite scroll/load more collection layouts.
Reposition the widget anywhere on your product page using the theme editor's App Block.
Automatically update stock messages when customers select different product variants.
Use pulse and other animation effects to attract attention and improve conversions.

Enable App

Use the Setup Guide on the app dashboard to enable the Low Stock Counter app on your storefront.

To make CI Low Stock Counter work properly on your storefront, app embed must be enabled. Click the Activate App Embed button and click Save in the theme editor to enable it.

Once you've done this, come back to the Setup Guide in the admin and click I have done it. When both steps show as completed, the app is ready to use.

The Setup Guide tracks your progress with a step counter (e.g., "2 out of 2 steps completed") and a progress bar.
Activate CI Low Stock Counter on Your Store: Click the Activated button to enable the app embed from your theme editor.
Start your settings: Guides you to add your settings after activation.

General Configuration

Use these settings to configure CI Low Stock Counter message types, and control where the widget appears with Visibility & Element Selectors. Settings are organized under two tabs: General and Visibility & Element Selectors.

General

Use this tab to configure the five message types: Continue Selling if Out of Stock, Out of Stock Alert, Only 1 Left, Low Stock Warning and Full Stock Display. Each message type has its own text, styling, and product/collection targeting options, with a live preview shown alongside for both the product page and collection page.

Continue Selling if Out of Stock

Show a message when a product is set to continue selling even after it's out of stock, e.g. for pre-orders or backorders.

Check/uncheck the Continue Selling if Out of Stock box to enable or disable this message.
Icon: Select the icon shown next to the message.
Text Message: The main message text, e.g. "Shipment in 5 days".
Text Color and Font Size: Style the main message text.
Sub Text Message: An optional second line, e.g. "Usually dispatch within 5 days".
Sub Text Color and Sub Text Font Size: Style the sub text.
Enable to show background: Turn on a background color behind the message and set its color.
Show progress bar: Turn on a progress bar under the message, and set its Width (%) and color.
Animation: Choose an animation effect for the message, e.g. None, Zoom In/Out.
Display Field on Collection Page: Choose which elements (SubText, Background, Progress bar, Animation) also appear on the collection page.
All Products / Specific Product/Collection: Apply this message to all products, or browse and select specific products/collections.

A Product Page Preview and Collection Page Preview panel on the right shows how the message will look as you edit these settings.

Out of Stock Alert

Show a message when a product's inventory reaches zero and it isn't set to continue selling.

Check/uncheck the Out of Stock Alert box to enable or disable this message.
Icon: Select the icon shown next to the message.
Text Message: The main message text, e.g. "Out of stock. Restocking soon.".
Text Color and Font Size: Style the main message text.
Sub Text Message: An optional second line, e.g. "Item is restocking shortly".
Sub Text Color and Sub Text Font Size: Style the sub text.
Enable to show background: Turn on a background color behind the message and set its color.
Show progress bar and Progress Bar Width: Turn on a progress bar and set its width and color.
Animation: Choose an animation effect for the message.
Display Field on Collection Page: Choose which elements also appear on the collection page.
All Products / Specific Product/Collection: Apply this message to all products, or select specific products/collections.

Only 1 Left

Show an urgency message when only a single unit of a product remains in stock.

Check/uncheck the Only 1 Left box to enable or disable this message.
Icon: Select the icon shown next to the message.
Text Message: The main message text, e.g. "Only 1 left!".
Text Color and Font Size: Style the main message text.
Sub Text Message: An optional second line, e.g. "Order now before it sells out!".
Sub Text Color and Sub Text Font Size: Style the sub text.
Enable to show background: Turn on a background color behind the message and set its color.
Show progress bar: Turn on a progress bar and set its Width (%) and color.
Animation: Choose an animation effect, e.g. "Zoom In/Out" to draw extra attention.
Display Field on Collection Page: Choose which elements also appear on the collection page.
All Products / Specific Product/Collection: Apply this message to all products, or select specific products/collections.

Low Stock Warning

Show a warning message when a product's inventory falls between a minimum and maximum threshold.

Check/uncheck the Low Stock Warning box to enable or disable this message.
Icon: Select the icon shown next to the message, e.g. "Blue Pulse".
Min Threshold and Max Threshold: Set the inventory range that triggers this message.
Text Message: The main message text. Use the {available-stock} variable to automatically show the remaining quantity, e.g. "Only {available-stock} in stock".
Text Color and Font Size: Style the main message text.
Sub Text Message: An optional second line, e.g. "Low stock, its out of stock soon".
Sub Text Color and Sub Text Font Size: Style the sub text.
Enable to show background and Show progress bar: Turn on a background and/or progress bar and set their colors.
Animation: Choose an animation effect for the message.
Display Field on Collection Page: Choose which elements (SubText, Background, Progress bar, Animation) also appear on the collection page.
All Products / Specific Product/Collection: Apply this message to all products, or select specific products/collections.

Full Stock Display

Show a "selling fast" style message while a product's inventory is still healthy but under a maximum threshold, to build early urgency.

Check/uncheck the Full Stock Display box to enable or disable this message.
Icon: Select the icon shown next to the message, e.g. "Gray Pulse".
Max Threshold: Set the inventory count below which this message is shown.
Text Message: The main message text. Use the {available-stock} variable to show the remaining quantity, e.g. "Selling Fast! {available-stock} pieces left!".
Text Color and Font Size: Style the main message text.
Sub Text Message: An optional second line, e.g. "Popular item is ready to ship".
Sub Text Color and Sub Text Font Size: Style the sub text.
Enable to show background: Turn on a background color behind the message and set its color.
Show progress bar: Turn on a progress bar and set its Width (%) and color.
Animation: Choose an animation effect for the message.
Display Field on Collection Page: Choose which elements also appear on the collection page.
All Products / Specific Product/Collection: Apply this message to all products, or select specific products/collections.

Visibility & Element Selectors

Switch to the Visibility & Element Selectors tab to control where the widget is shown, and to add custom classes if you're using a custom theme.

Visibility

Product Page: Check/uncheck to show or hide the widget on the product page.
Collection Page: Check/uncheck to show or hide the widget on the collection page.
Product Listing Type: When Collection Page is enabled, choose how your collection page loads products — Pagination (Recommended) for standard paginated collection pages, or Infinite Scroll/Load More if your theme loads more products dynamically.

Element Selectors

If you're using a custom theme that doesn't meet Shopify's criteria and the widget doesn't appear correctly, add your custom classes here.

Product Grid Container Class: The class of your collection/product grid container, e.g. .grid li.
Product Card Class: The class of each product card in a list or slider, e.g. .product-card.

For more details on finding the correct classes for your theme, click the Learn more button in the app.

App Block

You can reposition the Low Stock Widget anywhere on your product page by adding it as an app block on your theme.

From the app dashboard, click the App Block button. This opens your theme editor directly to the product template.
In the theme editor's block list under Product information, you'll see the Low Stock Widget block already added.
Drag the Low Stock Widget block up or down to reposition it — for example, above/below the price, above the Buy buttons, or below the product title.
Click Save once you're happy with the position.

Display On Frontend

You can see the alert messages on Collection Page and Product Page.

Support

If this documentation doesn't answer your questions, please feel free to email us at info@cynoinfotech.com

Our support team operates in the GMT +5:30 time zone and responds to all inquiries within 12-24 hours on weekdays. In rare cases, the response time may extend to 48 hours, especially during the holidays, which may take longer..

Note: Our support is provided exclusively to verified buyers and covers issues related to our App, such as bugs or errors. Custom modifications or third-party module implementations are not included..

Please don't forget to rate our app 5 stars ( ) on the App Store if you are satisfied with our app and customer support! Your feedback is greatly appreciated and helps us improve our services. Thank you!

Changelog

Version 1.1 (11 Aug, 2026)

Added
- Sub Text, Sub Text Color, Sub Text Font Size for each message type.
- Progress bar with adjustable width and color for each message type.
- Animation options (e.g. Zoom In/Out) for each message type.
- Display Field on Collection Page controls to independently show SubText, Background, Progress bar and Animation on the collection page.
- Product Listing Type option (Pagination / Infinite Scroll/Load More) under Visibility.
- Live Product Page Preview and Collection Page Preview panels while editing settings.
Updated
- Enable App flow now uses the in-app Setup Guide with a one-click Activate App Embed button.
- General Configuration reorganized into General and Visibility & Element Selectors tabs.
- App Block repositioning simplified to a single button that opens the theme editor directly.

Version 1.0 (19 March, 2026)

Initial Release