> For the complete documentation index, see [llms.txt](https://magecomp.gitbook.io/shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://magecomp.gitbook.io/shopify/apps/vox-limit-orders-per-day/low-stock-counter.md).

# Low Stock Counter

The **Low Stock Counter** feature in the VOX Limit Orders Per Day app allows you to display product stock availability on your Shopify storefront. You can show customers how many units are left in stock, helping them understand product availability while shopping.

The feature includes inventory display settings, product and collection selection, customizable stock messages, and design options to match your store's appearance.

### How to Configure the Low Stock Counter

#### Step 1: Open the Low Stock Counter

1. Log in to your Shopify admin.
2. Navigate to **Apps**.
3. Open **VOX Limit Orders Per Day**.
4. Click **Low Stock Counter** in the app's navigation menu.

The Low Stock Counter page contains two tabs: **Configurations** and **Design**.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FJyKBO4KOPEiyhRVWthK1%2Fimage.png?alt=media&amp;token=8fa48990-dce8-40ab-b3f3-62221407be06" alt=""><figcaption></figcaption></figure>

#### Step 2: Configure Inventory Settings

Under the **Configurations** tab, locate the **Inventory Configuration** section.

You can choose when the stock counter should appear on your product pages.

**Option 1: Never show the stock counter**

Select **Never show the stock counter** if you do not want to display the stock counter on your storefront.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2Fn6K3GhhFKzUEeiXjQIbT%2Fimage.png?alt=media&amp;token=45de38f8-7e17-47f1-afb3-3907af08efcc" alt=""><figcaption></figcaption></figure>

**Option 2: Always show the stock counter**

Select **Always show the stock counter** to display the stock counter without applying the low-stock threshold condition.

For example, if a product has 5 units remaining, the stock message can display the available quantity using the configured message.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FmTavi3gA7Jr4hhXGT04O%2Fimage.png?alt=media&amp;token=51164efc-956a-42eb-b5ac-9428b8d9c5fe" alt=""><figcaption></figcaption></figure>

**Option 3: When quantity is less than a certain number**

Select **When quantity is less than a certain number** if you want the stock counter to appear when inventory falls below a specified threshold.

After selecting this option:

1. Locate the **Set threshold quantity** field.
2. Enter the inventory threshold you want to use.
3. Review the value before saving your settings.

**Example:** If you set the threshold quantity to `10`, the stock counter is intended to display when inventory falls below the configured threshold.

This option is useful when you want to highlight products with limited stock rather than display a stock counter for every inventory level.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FrweGIocf1HjRKp640VDP%2Fimage.png?alt=media&amp;token=bf0705fb-02c6-42ce-89ab-070627d33bb5" alt=""><figcaption></figcaption></figure>

#### Step 3: Customize the Stock Message

Under **Set stock message**, enter the message you want customers to see on your storefront.

The default example shown in the app is:

`<p>Hurry! Only #stock# of #variant# left in stock.</p>`

You can customize the message to suit your store's tone and style.

The app supports these variables:

* **#stock#** — Displays the available stock quantity.
* **#variant#** — Displays the relevant product variant information.

For example, you can use the following message:

`<p>Hurry! Only #stock# of #variant# left in stock.</p>`

If a product variant has 5 units remaining, the message can appear as:

**Hurry! Only 5 of Gold left in stock.**

Use the supported variables in your message so the relevant inventory and variant information can be displayed dynamically.

#### Step 4: Configure Product Display Settings

Under **Display Configuration**, choose which products should display the stock counter.

The app provides three options.

**Option 1: All product available in store**

Select **All product available in store** if you want the stock counter to be displayed across all eligible products in your store.

This option is suitable when you want to apply the stock counter storewide instead of selecting products individually.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2Fe43OLUVUJDjLmhjRmuRt%2Fimage.png?alt=media&amp;token=fc7e5a6a-5aed-4013-a0ac-8a1df35e06fe" alt=""><figcaption></figcaption></figure>

**Option 2: Only specific product**

Select **Only specific product** if you want the stock counter to appear only for selected products.

To configure this option:

1. Select **Only specific product**.
2. Click **Select product** to choose the products you want to include.
3. Review the selected product count.
4. Alternatively, use the **Search products** field to find products by name.
5. Verify that the correct products are selected.

This option is useful when you want to highlight inventory availability for particular products only.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FQpY9j6PUIdLBBKr2QlSH%2Fimage.png?alt=media&amp;token=c3cce798-32d0-4748-9db9-ceb313dff70b" alt=""><figcaption></figcaption></figure>

**Option 3: Only specific collection**

Select **Only specific collection** if you want the stock counter to appear only for products belonging to selected collections.

To configure this option:

1. Select **Only specific collection**.
2. Click **Select collection** to choose the relevant collections.
3. Review the selected collection count.
4. Alternatively, use the **Search collections** field to find a collection.
5. Verify that the correct collections are selected.

This option is useful when you want to display stock availability for a particular product category or collection.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F5qPuNnDYvbOU7GdKENd0%2Fimage.png?alt=media&amp;token=9382bcc1-0307-4d51-b23e-01b9fda4f462" alt=""><figcaption></figcaption></figure>

#### Step 5: Customize the Counter Design

Click the **Design** tab to customize how the low stock counter looks on your storefront.

The page includes a design settings panel and a **Preview** section so you can review the appearance while configuring the available options.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FtqR3SpRyflP12Un7spqU%2Fimage.png?alt=media&amp;token=c0526dad-1503-4efb-a12d-9664bdf25c8e" alt=""><figcaption></figcaption></figure>

**5.1 Set the Title**

Under **Title**, enter the heading you want to display above the stock message.

For example:

`Low Stock Alert.`

You can change this text to match your store's messaging.

**5.2 Set the Background Color**

Use **Background color** to select the background color of the stock counter.

Choose a color that complements your store's design and keeps the message easy to read.

**5.3 Set the Font Color**

Use **Font color** to choose the color of the stock message text.

Select a color that provides sufficient contrast against the background.

**5.4 Set the Title Color**

Use **Title color** to choose the color of the counter heading.

This lets you distinguish the heading from the stock message if desired.

**5.5 Configure the Border Style**

Under **Border style**, choose the border style you want to apply to the stock counter.

For example, the preview screenshot shows a dotted border. Choose the available style that best matches your store's design.

**5.6 Set the Border Color**

Use **Border color** to customize the color of the counter's border.

Choose a color that complements the background and other design elements.

**5.7 Set the Border Size**

Under **Border size**, specify the thickness of the border in pixels.

For example, you can enter `2` to set a border size of 2 px.

**5.8 Set the Border Radius**

Use **Border radius** to adjust how rounded the counter's corners appear.

A larger value creates more rounded corners, while a smaller value creates a more squared appearance.

For example, the screenshot shows a value of `10` px.

**5.9 Set the Font Size**

Under **Font size**, configure the size of the text displayed inside the stock counter.

For example, the screenshot shows a font size of `16` px.

Choose a size that keeps the stock message readable on your storefront.

**5.10 Select an Icon**

Under **Select Icon**, click **Change icon** to choose or change the icon displayed with the stock counter.

Select an icon that complements your low-stock message and makes the alert easy for customers to recognize.

#### Step 6: Preview Your Design

Review the **Preview** section on the Design tab to see how the counter may appear alongside your product information.

Check the following before saving:

* The title is correct.
* The stock message is easy to read.
* The background and text colors are suitable.
* The border style, size, and radius look appropriate.
* The selected icon matches your design.

Adjust the settings as needed until the preview matches your preferences.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FImDMWkiUiHLdXvUW7OaL%2Fimage.png?alt=media&amp;token=3b2d00da-36c4-4e0c-9f39-fbd0ae425029" alt=""><figcaption></figcaption></figure>

#### Step 7: Save Your Changes

After configuring the inventory settings, product display options, and design:

1. Review your settings.
2. Click **Save** at the top of the page.
3. If Shopify displays an **Unsaved changes** indicator, ensure that you save before leaving the page.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F0QssQ0G3ITq2MSnzLkIs%2Fimage.png?alt=media&amp;token=8a07f688-8538-4470-be5a-b15e8d723c85" alt=""><figcaption></figcaption></figure>

#### Step 8: Enable the Low Stock Counter on Your Store

The app displays a notification at the top of the Low Stock Counter page explaining how to enable the feature on your storefront.

1. Locate the **Enable the Low Stock Counter on your store** notification.
2. Click the **Enable** link in the notification.
3. Shopify will open the theme editor with the Low Stock Counter block available for your product page.
4. Ensure that the block is enabled and positioned appropriately on the product page.
5. Click **Save** in the Shopify theme editor to apply the changes.

**Important:** Saving the app configuration and saving the Shopify theme editor changes are separate steps. Complete both to ensure that the counter is configured and enabled on your storefront.

### Example Configuration

Suppose you want to display a low-stock alert for selected products when their inventory falls below 10 units.

You can configure the feature as follows:

| Setting             | Example                                         |
| ------------------- | ----------------------------------------------- |
| Inventory condition | When quantity is less than a certain number     |
| Threshold quantity  | 10                                              |
| Stock message       | Hurry! Only #stock# of #variant# left in stock. |
| Product display     | Only specific product                           |
| Title               | Low Stock Alert.                                |
| Border style        | Dotted                                          |
| Border size         | 2 px                                            |
| Border radius       | 10 px                                           |
| Font size           | 16 px                                           |

Select the required products, customize the design, save the configuration, and enable the block in the Shopify theme editor.

### Frequently Asked Questions

#### Can I display the stock counter for all products?

Yes. Select **All product available in store** under Display Configuration to apply the counter across eligible products in your store.

#### Can I display the counter only for selected products?

Yes. Select **Only specific product** and choose the products you want to include.

#### Can I display the counter for a particular collection?

Yes. Select **Only specific collection** and choose the relevant collections.

#### Can I customize the stock message?

Yes. You can edit the message under **Set stock message** and use the supported variables `#stock#` and `#variant#` to display dynamic inventory and variant information.

#### Can I customize the counter's appearance?

Yes. Open the **Design** tab to configure the title, background color, font color, title color, border style, border color, border size, border radius, font size, and icon.

#### Why is the counter not visible on my storefront?

Check the following:

1. Verify that the appropriate inventory display option is selected.
2. Confirm that the correct products or collections are selected, if applicable.
3. Check the threshold quantity if you are using the low-stock condition.
4. Ensure that the Low Stock Counter block is enabled in the Shopify theme editor.
5. Save the changes in both the app and the theme editor.

If the counter still does not appear, contact the app's support team for assistance.

### Conclusion

The Low Stock Counter helps you communicate product availability to customers while giving you control over when the counter appears, which products display it, and how it looks. Configure the settings according to your store's requirements, preview the design, save your changes, and enable the block in your Shopify theme editor.