[V6] (P) Stock Counter

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, this element can help trigger FOMO (Fear Of Missing Out) and help you earn more sales.

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

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.

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.