• About
  • Services
  • Location
  • Reviews
  • Blog
  • Contact
  • Get A Quote
Ships-a-LotShips-a-Lot
  • About
  • Services
  • Location
  • Reviews
  • Blog
  • Contact
  • Get A Quote

Drastically improve conversion rates by adding our urgency plugin to your store!

December 20, 2020 Posted by Nikki Bisel eCommerce

Foreward


This plugin will take about 5 minutes to set up. This is designed for Shopify stores that want to create an increased sense of urgency or scarcity for their stores products. The countdowns, inventory and time, are both fake and do not impact your store in any way.

Example


Below is an embedded example of this tool at work. It has been slightly modified to function on this blog article, since article pages do not contain the necessary liquid data for the plugin to work. The code for the actual plugin is in the next section, along with installation instructions.

 

Implementation


There are three steps to this implementation:

1) Copy the code into a new Shopify snippet.
2) Set the location that you want the plugin to load at.
3) Include the snippet on your Shopify product file.

1) COPY THE FOLLOWING CODE INTO A NEW SNIPPET ON YOUR SHOPIFY STORE.

   {{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}  
 {% assign location_id = "ProductPrice" %}{% comment %} Set to HTML 'id' of where you'd like the timer to load {% endcomment %}  
 {% assign use_timer = true %}{% comment %} true = timer will load. false = no timer. {% endcomment %}  
 {% assign use_stock_counter = true %}  
 {% assign use_price = true %}  
 {% assign starting_time = 22 %}{% comment %} How much time will initially load onto the customers clock, in minutes.{% endcomment %}  
 {% if product.available == false %}  
 {% comment %} This conditional disables the plugin for products that cannot be purchased. {% endcomment %}  
 {% assign use_timer = false %}  
 {% assign use_stock_counter = false %}  
 {% assign use_price = false %}  
 {% else %}  
 {% endif %}  
 <script type="text/javascript">  
   Number.prototype.mod = function(n) {  
   return ((this%n)+n)%n;  
      };  
  var starting = new Date();  
  if (localStorage.getItem("starting_minutes") == "null") {  
   var starting_minutes = starting.getMinutes() + {{ starting_time }};  
  localStorage.setItem("starting_minutes",starting_minutes);  
  } else {  
    var starting_minutes = localStorage.getItem("starting_minutes");  
   }  
  if (localStorage.getItem("starting_seconds") == "null") {  
  var starting_seconds = starting.getSeconds() + 6;  
  localStorage.setItem("starting_seconds",starting_seconds);  
  } else {  
    var starting_seconds = localStorage.getItem("starting_seconds");  
   }  
  if (localStorage.getItem("starting_stock") == "null") {  
   var starting_stock = Math.ceil(66 + (20 * Math.random()));  
   localStorage.setItem("starting_stock",starting_stock);  
   console.log(starting_stock);  
  } else {  
   var starting_stock = localStorage.getItem("starting_stock");  
  }  
  function updateTimer() {  
      var time = new Date();  
   var minutes_left = (starting_minutes - time.getMinutes()).mod(60);  
   var seconds_left = (starting_seconds - time.getSeconds()).mod(60);  
   if (minutes_left == 0 && seconds_left == 1) { localStorage.setItem("starting_minutes",null); localStorage.setItem("starting_seconds",null); document.getElementById("time_container").style.display="none"; }  
   if (seconds_left == 59) {document.getElementById("minutes").style.display = "none";}  
   document.getElementById("seconds").style.display = "none";  
   document.getElementById("days").innerText = 0;  
   document.getElementById("hours").innerText = 0;  
   document.getElementById("minutes").innerText = minutes_left;  
   document.getElementById("seconds").innerText = seconds_left;  
   if (seconds_left == 59) {$("#minutes").fadeIn(400);}  
   $("#seconds").fadeIn(400);  
  }  
   function make_timer() {  
   {% if use_timer == true %}  
   var timer_HTML = document.getElementById("time_container");  
   $("#{{ location_id }}").after(timer_HTML);  
   $("#time_container").fadeIn("slow");  
   {% else %}  
   var timer_HTML = document.getElementById("time_container");  
   $("#{{ location_id }}").after(timer_HTML);  
   {% endif %}  
   }  
  function make_price() {  
   {% if product.compare_at_price_max != 0 or use_price == false %}  
    // do nothing  
    {% else %}  
    var price = Math.ceil(1.45 * {{ product.price | money_without_currency }})-0.01;  
    document.getElementById("{{ location_id }}").innerHTML+='<strike opacity=0.10; style=margin-left:3px;>$ '+price+'</strike>';  
    {% endif %}   
  }  
  function make_stock() {  
   var stock_count = document.getElementById("stock");  
   $("#time_container").after(stock_count);  
   $("#stock").fadeIn("slow");  
  }  
   function decrement_Q() {  
   if ( Math.random() <= 0.3 ) { // update % of seconds  
    document.getElementById("stock_number").style.color = "red";  
    document.getElementById("stock_number").style.display="none";  
    document.getElementById("stock_number").innerText--;  
    document.getElementById("stock_number").style.display="inline";  
    $("#stock_number").fadeIn("fast").css("display","inline-block");  
    localStorage.setItem("starting_stock",document.getElementById("stock_number").innerText);  
    if (document.getElementById("stock_number").innerText < 1) {  
     document.getElementById("stock").style.display = "none";  
     localStorage.setItem("starting_stock",null);  
    }  
   } else { // do nothing }  
  }  
  }  
   window.onload = function() {  
    make_price();  
    make_timer();  
    {% if use_stock_counter == true %}make_stock();document.getElementById("stock_number").innerText=starting_stock;{% else %}{% endif %}  
    window.setInterval(function(){updateTimer();}, 1000);  
    window.setInterval(function(){decrement_Q();}, 1000);  
    window.setInterval(function(){flash_time();}, 2000);  
   };  
    function flash_time() {  
     $("#timelabel").fadeOut("fast");  
     $("#timelabel").fadeIn("slow");  
    }  
 </script>  
 <style>  
  div.time_container {  
   float:left;  
   width:23%;  
   margin-left:1.5%;  
   padding-bottom:4px;  
   padding-top:6px;  
   padding-left:1px;  
   padding-right:1px;  
  }  
    div.time_container {  
    border-style:groove;  
    border-color:rgba(240,240,240,0.09);  
    border-width:4px;  
   }  
   h4.resize-on-mobile { font-size:14px; }   
 </style>  
 <div id="time_container" class="text-center clearfix" style="display:none;"><br>  
  <h4 class="resize-on-mobile" id="timelabel" style="color:red">Time left at this price:</h4>  
  <div id="days_container" class="text-center clearfix time_container">  
   <h4 id="days" class="time">-</h4><h4 class="resize-on-mobile" id="days_label">days</h4>  
  </div>  
  <div id="hours_container" class="text-center clearfix time_container">  
  <h4 id="hours" class="time">-</h4><h4 class="resize-on-mobile" id="hours_label">hours</h4>  
  </div>  
  <div id="minutes_container" class="text-center clearfix time_container">  
  <h4 id="minutes" class="time">-</h4><h4 class="resize-on-mobile" id="minutes_label">minutes</h4>  
  </div>  
  <div id="seconds_container" class="text-center clearfix time_container">  
  <h4 id="seconds" class="time">-</h4><h4 class="resize-on-mobile" id="seconds_label">seconds</h4>  
  </div>  
 </div>  
 <div id="stock" class="text-center clearfix" style="display:none;"><br>  
  <h4 class="resize-on-mobile">There are <div id="stock_number" style="display:inline"></div> items left in stock!</h4>  
 </div>  

Check out the demo below:

shopify customer account type

2) IDENTIFY WHERE THE PLUGIN SHOULD LOAD.

For this step, you need to set the liquid variable location_id to the HTML id of wherever you’d like the plugin to load. See the demo below:

shopify customer account type

 

3) ADD AN INCLUDE FOR THE SNIPPET IN PRODUCTS.LIQUID

Navigate to products.liquid and include the snippet on a new line at the beginning of the file. Check out the demo below:

shopify customer account type

 

Features


This plugin also features a couple of customizable features. This section goes over the various settings available in the top of the code.

1:  {{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}   
2:   {% assign location_id = "" %}  
3:   {% assign use_timer = true %}  
4:   {% assign use_stock_counter = true %}   
5:   {% assign use_price = true %}   
6:   {% assign starting_time = 22 %}   
7:   {% if product.available == false %}
  1. Loads the required jQuery plugin. Ignore this line.
  2. Sets the load location. See above for demonstration.
  3. Enables (true) or disables (false) the timer.
  4. Enables (true) or disables (false) the inventory countdown.
  5. Enables (true) or disables (false) the fake price reduction.
  6. The amount of time to load on a user’s clock, in minutes, the first time they visit the page.
  7. Disables the plugin in the event the particular product cannot be sold.
Tags: conversion rateconversionsCustomersecommerceJavaScriptliquidoptimizationshopifyweb development
Share

About Nikki Bisel

This author hasn't written their bio yet.
Nikki Bisel has contributed 25 entries to our website, so far.View entries by Nikki Bisel

    You also might be interested in

    Turn your window shoppers into customers with this highly customizable exit intent popup

    Turn your window shoppers into customers with this highly customizable exit intent popup

    Nov 12, 2020

    How does it work? This code tracks a visitor’s mouse[...]

    Where is my package!?!?!

    Where is my package!?!?!

    Nov 30, 2020

    So you shipped all your packages out of your warehouse[...]

    How we moved an entire fulfillment center in one weekend

    How we moved an entire fulfillment center in one weekend

    Dec 1, 2020

    Why is this interesting? With our relocation, we have obtained[...]

    Categories

    • eCommerce
    • Entrepreneurship
    • Guest Blog
    • Shipping
    • Uncategorized

    Phone(901) 410-2153

    E-Mailinfo@shipsalot.com

    FacebookInstagramTwitterYouTube

    Copyright © 2022 Ships-a-lot

    Site by Beanstalk Web Solutions

    Prev Next