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!

 

Message


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.

 

 

Dimension


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.

 

 

Display


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 for 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?