• Fulfillment Services
    • E-Commerce Fulfillment
    • Warehouse Management
    • Kitting & Assembly
    • Returns Management
    • Order Management
    • Transportation Management
  • Shopify
    • Shopify Consulting
  • About
  • Blog
  • Contact
  • Get A Quote
Ships-a-LotShips-a-Lot
  • Fulfillment Services
    • E-Commerce Fulfillment
    • Warehouse Management
    • Kitting & Assembly
    • Returns Management
    • Order Management
    • Transportation Management
  • Shopify
    • Shopify Consulting
  • About
  • Blog
  • Contact
  • Get A Quote

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

December 20, 2020 eCommerce
external keyword from laptop

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

You also might be interested in

rite aid shopping aisle

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[...]

i know where you work if i don't get my package i will find you and make you pay

Where is my package!?!?!

Nov 30, 2020

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

owners in the ships a lot warehouse

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
  • Service
  • Shipping
  • Uncategorized
Get a Quote! Fast! Get a Quote
Ships-a-Lot Logo Stacked
E-Mailinfo@shipsalot.com Phone(901) 410-2153 FacebookInstagramTwitterYouTube
America's Fastest Growing Companies Badge

Fulfillment Services

  • E-Commerce Fulfillment
  • Shopify Order Fulfillment
  • Warehouse Management
  • Kitting & Assembly
  • Returns Management

Copyright © 2023 Ships-a-lot

Prev Next