Stock Counter Element

About the Stock Counter element

The Stock Counter element offers a solution for showcasing your product’s remaining inventory using a visualized progress bar. It can effectively stimulate a sense of urgency and contribute to increased sales.

To make it work properly, just make sure to place the Stock Counter inside the Product Module on your page following these steps.

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

Always show

You can keep the stock counter visible at all times by turning on this switch.

When you toggle it off, the stock counter will only appear when the stock reaches a specific number. You can set that number by entering it in the provided field.

Remaining stock

You have the option to choose how the stock quantity is displayed at this point.

If you select “Shopify,” the stock quantity will be automatically retrieved from your Shopify Inventory.

Alternatively, if you choose “Custom,” you can manually enter a number in the “Amount” field to represent the remaining items in stock.

Icon

Switch on to choose an icon for display before the message. You can select from the available icon library or input the SVG code of your preferred icon.

Size

Full width: Activate this toggle to expand the stock counter to the full width of your page. Alternatively, you will have the option to specify your desired width in pixels or percentages.

Message

Input your preferred message on different situations below: 

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

Out of stock: Use this field to tailor the message shown when the product is out of stock.

Continue selling when out of stock: If you wish to enable preorders when your product is out of stock, customize the message using this field.

Unlimited quantity: Edit the message for your customers when the product is available without any inventory restrictions.

Text

You have the option to customize the text at this point. 

Style: Select a style for text from the available pre-determined styles.

Font: Choose the font for your text label from the drop-down menu. In case, you would like to use other fonts, check out how to use a custom font here.

Sizes: Determine your preferred font size.

Click on the “Show more” button to reveal more customization options. 

Font Weight: Choose your desired font weight from the provided drop-down menu.

Line Height: Adjust the height of the text by specifying a percentage value.

Letter Spacing: Modify the spacing between letters by inputting a value in pixels.

Text transform: Transform the text to uppercase, lowercase, or capitalize as desired.

Progress bar

Activate this setting to display the progress bar.

Percentage left: Adjust the percentage displayed on the progress bar by either sliding the slider or entering the number in the designated box. It’s important to note that this percentage is solely for visual representation and does not reflect the actual product inventory.

Color: Choose a color from the palette or input the color hex code to achieve your desired color. 

Height: Input your preferred height into the box. 

Corner: Turn on this option to give the progress bar rounded corners.

Effect: Toggle this switch to enable the default effect of the progress bar. 

Configure the Advanced tab

For more advanced customization, please navigate to the Advanced 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.