How to use the (P) Stock Counter element


This article will introduce you to the (P) Stock Counter element and how you can boost your sales by using the element to trigger FOMO in buyers.


What is the (P) Stock Counter element?

The (P) Stock Counter element provides you a way to display your product’s remaining stock in the form of a visualized progress bar. When done right, the (P) Stock Counter element can help trigger FOMO (Fear Of Missing Out) and help you earn more sales.


Add the (P) Stock Counter element on your page

The (P) Stock Counter element is a child element of the Product module. Therefore, it must always be nested inside a Product module in order to function correctly.


Step 1: In the GemPages Dashboard, click on one of your pages and enter the Editor via the “Edit” button.

Step 2: On the left sidebar, search for the Product module, then drag & drop one onto your preferred spot.

Next, search for the  (P) Stock Counter element, and drag & drop one inside the Product module. 


The element’s configurations will be available on the left sidebar, which we’ll cover in the next sections.


Configure the Settings tab

The Settings tab on the left sidebar holds all the necessary parameters to adjust the (P) Stock Counter element.


Display Condition

The Display by Default feature allows the stock counter to be visible at all times.


When toggled off, the stock counter will only appear when the stock reaches a certain number. You can set the number by entering it in the Scarcity Threshold field.


Stock Quantity

Remaining Quantity Source

When set to Auto, the stock quantity will be fetched from your Shopify Inventory.

When set to Manual, you can put in a number in the Remaining Quantity field to be shown as the number of items left.


Remaining Percentage (%): Move the slider or input a number in the mini box to control the percentage bar. 


A smaller remaining percentage works better in triggering FOMO!



You can customize the message shown on the counter in this field. 


Template: The message to show when there are still items in stock.

Please modify only the highlighted part to preserve the template and make sure the (P) Stock Counter element functions correctly:                                                      <mark>HURRY!</mark> ONLY %number% LEFT


Out Of Stock Message: Use this field to custom the message shown when the product is out of stock.



Continue Selling When Out Of Stock: If you would like to allow for preorders when your product is out-of-stock, use this field to customize the message.



Unlimited Quantity Message: Use this field to customize the message when you have an unlimited product quantity.



Width: Adjust the width of the stock counter bar in pixels or percentages.

Alignment: Select one out of 3 positions for the (P) Stock Counter element: Left, Center, and Right.




Color: Choose a color for the (P) Stock Counter element.

Font Size: Adjust the font size in pixels via the slider or the number box.

Progress Bar Height: Adjust the height of the counter bar in pixels via the slider or the number box.

Rounded Border: Toggle on to round the corners of the counter bar

Effect: Toggle on to enable the flowing animation for the progress bar.

Show Icon: Toggle on to select an icon for display before the message.


Extra Class

For the tech-savvy users out there, use this field to add a class name to your (P) Stock Counter, and then refer to it later in your CSS file.


Configure the Design tab

To fine-tune the look of the (P) Stock Counter element, switch to the Design tab and follow the instructions in this article.


When all is done, hit "Save" and "Publish" to bring the element to the live store!

Check out more of our articles to become a GemPages master. Should you require further assistance, please contact our GemPages Support Team at any time via email or live chat.


Was this helpful?