Shopify One Page Checkout Hacks

IMPORTANT UPDATE: We implemented user friendly method to add Shopify boosters through app settings without any code. These code snippets are not required anymore and will stop working soon with our app.

This post will show how to implement some javascript snippets to improve your store conversion with our One Page Checkout:

Field reduction
Sidebar messages
Order reservation countdown timer

First you need to open text or html editor. If you don't have any tools, you can use a simple text editor. Copy the below code into and save it as checkoutsnippets.js. Then go inside Shopify admin to section Settings->Files and upload the file. Copy the file url, then go to Apps->One Page Checkout and paste the file location to field Custom javascript file and click Save settings button.

Step by step instructions:

1. Copy the snippets code you would like to use. If you would like to use all snippets, just copy/paste all of them into the same file with new empty line between.

Order reservation

This is not our snippet but it comes from Conversion Pirates. First visit http://conversionpirate.com/pirate-countdown/#generated-code and create code based on your configuration. Copy generated code, then visit https://beautifier.io/ to beautify the code.

Now you will need to modify the code a bit.

Find these lines:
if (window.location.href.indexOf('checkout') > -1 && document.location.href.indexOf('thank_you') === -1 && document.location.href.indexOf('orders') === -1) { window.onload = function() {

and replace it with these:

then find the last line

and replace it with

The final code will look like this:

function createCookie(a, b, c) {
    if (c) {
        var d = new Date;
        d.setTime(d.getTime() + c * 60 * 1e3);
        var e = "; expires=" + d.toUTCString()
    } else var e = "";
    document.cookie = a + "=" + b + e + "; path=/"
}

function readCookie(a) {
    for (var b = a + "=", c = document.cookie.split(";"), d = 0; d < c.length; d++) {
        for (var e = c[d];
            " " == e.charAt(0);) e = e.substring(1, e.length);
        if (0 == e.indexOf(b)) return e.substring(b.length, e.length)
    }
    return null
}

function eraseCookie(a) {
    createCookie(a, "", -1)
}

function crtmedir(a) {
    var b = document.createDocumentFragment(),
        c = document.createElement("div");
    for (c.innerHTML = a; c.firstChild;) b.appendChild(c.firstChild);
    return b
}

function startTimer(start, duration, display) {
    var diff, minutes, seconds;

Fields reduction

function showCouponField(){          
  document.querySelector(".sidebar__content input[name='checkout[reduction_code]']").closest('.field').style.display = '';          
  document.querySelector(".discountMinimize").style.display = 'none';         
}

function showSecondAddress(){            
  document.querySelector("div[data-address-field='address2'] input").style.display = '';          
  document.querySelector("div[data-address-field='address2'] label").style.display = '';
  document.querySelector(".addressMinimize").style.display = 'none';         
}

setInterval(function(){         
   if(!document.querySelector(".discountMinimize") && $("#checkout_reduction_code:visible").length && !$(".order-summary-toggle:visible").length){
        document.querySelector(".sidebar__content input[name='checkout[reduction_code]']").closest('.field').style.display = 'none';
        $(".sidebar__content input[name='checkout[reduction_code]']").closest('.fieldset').append('<p class="discountMinimize" onclick="showCouponField()" style="cursor:pointer;"><span style="display:inline-block;margin-right:3px;width: 10px;height: 10px;border: 1px solid grey;border-radius: 50%;font-size: 13px;line-height: 10px;text-align: center;background: #484848;color: white;">&#43;</span><span style="display:inline-block;">Discount code?</span></p>');           
   } 
   
   if(!document.querySelector(".addressMinimize") && $("#checkout_shipping_address_address2:visible").length && !$(".order-summary-toggle:visible").length){
        document.querySelector("div[data-address-field='address2'] input").style.display = 'none';          
        document.querySelector("div[data-address-field='address2'] label").style.display = 'none';  
        $("#checkout_shipping_address_address2").closest('.field__input-wrapper').append('<p class="addressMinimize" onclick="showSecondAddress()" style="cursor:pointer;"><span style="display:inline-block;margin-right:3px;width: 10px;height: 10px;border: 1px solid grey;border-radius: 50%;font-size: 13px;line-height: 10px;text-align: center;background: #484848;color: white;">&#43;</span><span style="display:inline-block;">Address line 2</span></p>');     
   }

if($(".section--shipping-address").length && !$(".merged").length){
      $("div[data-section='customer-information']").find('.fieldset').prependTo('.section--shipping-address .section__content')
      $(".fieldset").css('clear','both')
      $("div[data-section='customer-information']").addClass('merged')
      $("#checkout_remember_me").closest('.checkbox-wrapper').replaceWith($("div[data-buyer-accepts-marketing]"))
      $(".section--contact-information").parent().remove()   
   }
                                                                  
},500);

Sidebar messages

You can replace the text and icons within the code.

Copy/paste the code into text/code editor and save it to your computer. You can choose any name, but it must end with .js. In our example we choose boosters25.js

Inside Shopify admin navigate to System->File and upload the file. Copy the file path.

Navigate to Apps->One Page Checkout and paste the path into field Custom javascript file, then click Save settings button.