Add quantity to threshold messages

Using the Multi-Location Inventory App, you can display quantities and threshold messages for each inventory location in your storefront.

Note: This article assumes you already have the inventory-based threshold message set. If you have not already done so, please set the rule in the Inventory Display Template. Follow the article below for guidance:

Display inventory threshold message instead of quantity

After setting up the rules, you can now include the quantity in the threshold message. See the following section for instructions.

Add quantity to the threshold message #

Navigate to the “Message template” field and include the {{qty}} token to dynamically display the quantity/number of available items.

add qty to message template

Full string:

{{location-name}} - {{threshold-message}} {{qty}}

Storefront preview:

(Optional) Apply color coding using HTML and CSS #

You can format the message template to apply color coding by adding the following (requires some understanding of HTML and CSS):

Full string:

{{location-name}} - <span class="iia-customcolor">{{threshold-message}} {{qty}}</span>

Note:

  • You need to define the CSS class “.iia-customcolor” in your custom stylesheet to apply the desired color or style.
  • You can access the Custom Styles field from the Product Page Widget, under “Styles.”

Example #1: Set a single color for all threshold messages #

Storefront preview:

Example #2: Set different colors for different threshold messages #

Styling each threshold message requires providing different classes for each message template. Here’s how:


Full string:

THRESHOLD MESSAGE RULE 1{{location-name}} - <span class="iia-sold-out">{{threshold-message}} {{qty}} </span>
THRESHOLD MESSAGE RULE 2{{location-name}} - <span class="iia-low-stock">{{threshold-message}} {{qty}} </span>
THRESHOLD MESSAGE RULE 3{{location-name}} - <span class="iia-high-stock">{{threshold-message}} {{qty}}</span>
Table 1: Message template for each threshold message rule

You can apply specific styles to each threshold message by using different classes.

Storefront preview:

Feel free to adjust the CSS properties (color, font-weight, etc.) to match your design preferences.

If you encounter any issues, don’t hesitate to contact the app’s support team for further assistance.

What are your feelings