How to Customize Shopify Plus Checkout
When Shipping deadlines approach, clearly communicate with customers within the checkout experience on what shipping options will get to their mailbox or door in time
Shopify Plus has a lot of nice features. One nice feature is the ability to customize the checkout experience. All other Shopify plans do not allow for customization to checkout other than what’s available in the theme editor or Shopify settings. Even with access to edit the checkout.liquid file it’s important to note that you can change some but not all parts of the checkout.
Click here to read Shopify checkout.liquid Theme Guide.
How to Change Shopify Checkout.Liquid to display Deadlines On Shipping Page
Use Case: This customization solved two business needs. The first was the interest in keeping users in checkout flow. We didn’t want to see customers abandon checkout to see what shipping options would deliver to them in time for Christmas. The second was to avoid frustration or complaints if a customer selected an option that wasn’t “Guaranteed” to deliver by Christmas.
Disclaimer: I leveraged the examples in Only Growth’s posts about how to customize checkout but added a twist. It’s worth a read and is a great inspiration for other customizations.
Step 1: Add Jquery before the closing </head>
<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>
Step 2: Add the following script before the </body>
<script>
if ($(‘.section–shipping-method’).length) {
$(‘[data-gift-note-html]’).prependTo($(‘.step__sections’));
$( “.checkbox-container” ).show( “show” );
}
</script>
*This means that the content will become visible and move to before .step__sections if the class “section–shipping-method” is present. That is only present when the customer is on the shipping method step in checkout.
Step 3: Set Up and Add Your Content
For our purposes this promoted shipping options that would deliver before Christmas. Here is the HTML I used that uses the formatting necessary to only show up on checkout.
<div class=”checkbox-container” data-gift-note-html=”” style=”display: none;”>
<div class=”review-block__label”>Shipping Deadline Information</div>
<div class=”section__title”>
<p>
{{Your message goes here}}
</p></div>
</div>
P.S. If you’re looking for help with tasks like this or have specific questions book a FREE call and let’s get you back on track.
Author Information
