Customizing your Checkout Page with Shopify Plus

Introduction

If you've ever wondered how to add a personal touch to your checkout pages, wait no more! We outline five ways to customize your checkout page experience!

Before you begin customizing your cart, make sure your checkout.liquid file is visible under your Layout folder. If it's not visible, contact your Merchant Success Manager and they will enable the file for you.

1. Add Free Product To Cart Via Discount Code!

Give your customers the chance to add a free product to their cart by using a discount code. As shown below, a free product named "Free Bracelet" is added to the cart after the discount code "FREEBRACELET" is entered at checkout.

How to Implement:

Create a new asset file named "checkout_script.js" and put the following line of code right before the closing </body> tag:

{{ 'checkout_script.js' | asset_url | script_tag }}

*Note: Make sure to include jQuery in your checkout.liquid layout file

Inside checkout_script.js, paste:

<script>
$(document).ready(function() {
  $('#checkout_reduction_code').change('click', function() {
    if ($(this).val() == 'FREEBRACELET') {
      $.ajax({
        url: '/cart/update.js',
        method: 'POST',
        dataType: 'json',
        data: {
          updates: {[VARIANT_ID OF FREE PRODUCT]: 1}
        }
      }).then(function(data) {
        location.reload();
      });
    }
  });
});
</script>

2. Create Extra Fields In Checkout! (Hack)

It is not possible to create extra fields in the checkout, but you can change your cart page to look like the checkout!

Perfect Locks

One store that has done this so seamlessly is Perfect Locks. Perfect Locks' cart page looks like a custom checkout page.

Believe it or not, this page is actually their cart page! Don't believe us? Take a look at the URL bar. In fact, their 'cart' is just the sliding drawer on the side.

They have converted their real cart page into a Shopify checkout look-a-like! How clever is that!? Some, but not all themes come with the cart drawer; however, our developers at OnlyGrowth can implement a cart drawer to any theme!

LilGadgets

Another store that has taken their checkout experience to a whole new level is LilGadgets. Although they do not use their cart page, they also have a cart drawer and have completely transformed their checkout page!

DBNY did a great job with this checkout page! The billing column in the center is something that Shopify does not allow with their default checkout page. DBNY has used a very clever technique to add the Billing column between the cart products and the shipping information.

3. Social Login In Checkout

Among many other things, the Hull Social Login app is a great tool to let your customers login from their favourite social media account. With Hull, it's incredibly easy to customize and position your social login buttons anywhere on your checkout page!

When setting up Hull Social Login, you will notice that multipass must be enabled in order to use the app. Hull does all the heavy lifting for you. Multipass is an API exclusive for Shopify Plus merchants.

LEARN: How to Connect Drupal CMS with Shopify Plus Using Multipass API

Now you have a fully functioning social login in your checkout for your customers to easily and securely enter their information!

4. Make It Easier For Your Customers To Add Their Shipping Address With Address AutoComplete

This is a really easy customization to make which can help you reduce the number of returns on Shopify Plus! Here's an example of what it looks like in Zenger's checkout page when you start filling in your address:

Another cool Shopify Plus feature is Remember Me. Remember Me allows customers to enter their mobile phone number which makes it easy for them to purchase from any participating Shopify store!

5. Custom Breadcrumbs In Checkout

One unique way to add a personal touch to your checkout page is through custom checkout pages. The following images are examples of what's possible with custom breadcrumbs. The way this works (and most checkout page customizations work) is the default Shopify breadcrumbs are hidden from view and custom breadcrumbs are designed and placed where the default breadcrumbs were located.

As an example, the code for a couple custom breadcrumb designs has been provided:

HTML (add under {{ breadcrumb }} in checkout.liquid layout file):

<ul class="bc">
  <li class="bc_item bc_complete">Cart</li>
  <li class="bc_item">Customer Information</li>
  <li class="bc_item">Shipping Method</li>
  <li class="bc_item">Payment Method</li>
</ul>

CSS:

.bc {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  width: 100%;
  max-width: 800px;
  height: 120px;
  counter-reset: breadcrumb;
  position: relative;
}
.bc:before {
  position: absolute;
  top: 23px;
  left: 12.5%;
  content: '';
  width: 75%;
  height: 1px;
  background: black;
}
.bc .bc_item {
  float: left;
  padding-top: 60px;
  width: 25%;
  text-align: center;
  position: relative;
}
.bc .bc_item:after {
  counter-increment: breadcrumb;
  content: counter(breadcrumb);
  position: absolute;
  top: 0px;
  left: calc(50% - 23px);
  width: 40px;
  height: 40px;
  text-align: center;
  border: 3px solid black;
  border-radius: 50%;
  line-height: 40px;
  background: white;
}
.bc .bc_complete:after {
  background: black;
  color: white;
}

HTML (add under {{ breadcrumb }} in checkout.liquid layout file):

<ul class="bc">
  <li class="bc_item bc_complete">Cart</li>
  <li class="bc_item">Customer Information</li>
  <li class="bc_item">Shipping Method</li>
  <li class="bc_item">Payment Method</li>
</ul>

CSS:

.bc {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  width: 100%;
  max-width: 800px;
  height: 120px;
  counter-reset: breadcrumb;
  position: relative;
}
.bc .bc_item {
  float: left;
  border: 3px solid black;
  border-right: 0px;
  padding: 20px;
  width: calc(25% - 44px);
  text-align: center;
  position: relative;
}
.bc .bc_item:last-child {
  border-right: 3px solid black;
}
.bc .bc_complete {
  background: black;
  color: white;
}

BONUS: Add Gift Message Box In Checkout!

Some stores might offer gift items and you may want your customers to be able to add gift messages for their order.

Boll & Branch does an amazing job with this in their checkout page:

The following code will add a checkbox under the "Shipping Address" form.

Create a new asset file named "checkout_script.js" and put the following line of code right before the closing </body> tag:

{{ 'checkout_script.js' | asset_url | script_tag }}

*Note: Make sure to include jQuery in your checkout.liquid layout file

Inside checkout_script.js, paste:

<script>
if ($('.section--shipping-address').length) {
  $('[data-gift-note-html]').appendTo($('.step__sections'));
}

var saveCartNote = function() {
  var cartNote = $('#msg_text textarea').val();
  $.post(window.location.origin + '/cart/update.js', {note: cartNote}, function() {
    $('#msg_text textarea').addClass('note_saved');
    $('#msg_text textarea').css('cursor', 'not-allowed');
    $('#msg_text textarea').prop('disabled', 'true');
    $('.add_msg').hide();
    $('.edit_msg').css('display', 'inline-block');
  }, 'json');
};

var editCartNote = function() {
  $('#msg_text textarea').removeClass('note_saved');
  $('#msg_text textarea').css('cursor', 'default');
  $('#msg_text textarea').prop('disabled', '');
  $('.add_msg').show();
  $('.edit_msg').hide();
};

$('#gift-message').on('click', function() {
  if (!(this).checked) {
    $('#msg_text textarea').removeClass('note_saved');
    $('#msg_text textarea').css('cursor', 'default');
    $('#msg_text textarea').prop('disabled', '');
    $.post(window.location.origin + '/cart/update.js', {note: ''}, function() {
      $('#msg_text textarea').val('');
    }, 'json');
  }
});

$('.add_msg').on('click', function() {
  saveCartNote();
});

$('.edit_msg').on('click', function() {
  editCartNote();
});
</script>

Add the following HTML under the .content div in checkout.liquid:

<div class="checkbox-container" data-gift-note-html>
  <h2 class="section__title" style="margin-bottom: 1em">Gift Options</h2>
  <input type="checkbox" class="input-checkbox" id="gift-message">
  <label for="gift-message">  <img src="https://cdn.shopify.com/s/files/1/1154/7838/t/2/assets/giftbox-icon.svg?15220141244123693282"> <span>Gift Message</span></label>
  <div id="msg_text">
    <textarea class="field__input" placeholder="Enter gift note here..."></textarea>
    <br />
    <div class="og_btn add_msg">Add Gift Message</div>
    <div class="og_btn edit_msg">Edit Gift Message</div>
  </div>
</div>

Add the following CSS in checkout.liquid:

#msg_text {
  display: none;
  padding-top: 1.5em;
}
#msg_text textarea {
  height: 150px;
}
#msg_text textarea.note_saved {
  resize: none;
}
.checkbox-container {
  padding-top: 1.5em;
}
.checkbox-container label {
  cursor: pointer;
  padding-top: 1.5em;
}
.checkbox-container input[type=checkbox]:checked ~ #msg_text {
  display: block;
}
.og_btn {
  display: inline-block;
  border-radius: 4px;
  font-weight: 500;
  padding: 1.4em 1.7em;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  background: #222;
  color: white;
}
.og_btn:hover {
  background: #090909;
  color: white;
}
.edit_msg {
  display: none;
}

Conclusion

The customizations listed above are only a handful of things that are possible when giving your checkout page a unique look.

RELATED READ: 5 Shopify Plus Customized Checkout Experiences