What is the (P) Stock Counter element?
The (P) Stock Counter element allows you to display a product’s remaining stock on your page using a visual progress bar. It shows the stock count in a clear, visual format, helping customers see how much of the product is currently available.
Add the (P) Stock Counter element on your page
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 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
Stock QuantityMove the slider or input a number in the mini box to control the percentage bar.
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.
Out Of Stock Message: Use this field to customize 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.
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 (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.
Thank you for your comments