One Quick Way To Squeeze More Conversion Juice From Your Bigcommerce Product Page

Increasing your conversation rate is vital for a successful online business. Even a small improvement can have a big impact on your profits. One such change is to highlight the current inventory level of your products. I am not referring to a bland "Current stock: 5" text that does nothing to arouse the emotions of your customers, but something else entirely. Let's take a look at a few pictures to illustrate my idea.

One example of a boring inventory level indicator:

Fig. 1 - The default inventory level message.

Here's something that increases urgency and calls your customer to action:

Fig. 2 - Changing the words and placement.

We can improve this by placing the message next to the add to cart button:

Fig. 3 - Another variation of the improved inventory level message.

There are other placement options for the inventory level. You could add it at the end of the product name, in a growl-like notification, or directly inside of the add to cart button. The code below will show you how to change the text as shown in Figure 2.

Let's get to it!

Instructions

1. Login to your control panel and navigate to Design -> Theme Files/Edit HTML & CSS and open the Panels/ProductDetails.html file.

2. Add the following code at the bottom of the file:

   
   <script type="text/javascript">
   var showCurrentStock = "%%GLOBAL_HideCurrentStock%%";
   var currentInventory = parseInt("%%GLOBAL_InventoryList%%");
   var urgencyLevel = 6;
   
   $(document).ready(function() {
   if(showCurrentStock !== "hidden") {
       if((currentInventory < urgencyLevel) && (currentInventory > 0)) {
           // Hide the label
           $(".InventoryLevel .Label").hide();
           // Change the value
           $(".InventoryLevel .Value .VariationProductInventory").html('Only ' + currentInventory + ' left! <br> Buy yours now.');
       }
       else {
           $(".InventoryLevel").hide();
       }
   }
   });
   
   </script>
   
   

3. Save your changes to the file.

How It Works

Your product page should now display the inventory level as shown in Fig. 2 . It will only display if there are between one and six products in stock. Anything more than that will not trigger the message. It wouldn't make sense to inform your customers that there are "only" 100 products left and to buy right now. The urgency just isn't there. If the default value is too low you can modify the urgencyLevel variable from 6 to another number such as 10.

Instructions

If the current inventory level does not show at all... then turn on inventory tracking by editing the product in question. Then set the current inventory level below the urgencyLevel variable which is set to 6 by default.

If the current inventory level is shown but the updated message is not.. then it is most likely an issue with the template. You will need to modify the jQuery selectors to compensate for the different elements in your store. If that sounds complicated, then just contact us and we can make the change.

If it still doesn't work or you want to do something different... then contact us. We can install this Bigcommerce modification for you.