Design a site like this with
Get started

Shopify Checkout

Shopify’s Checkout is known for its ease of use, so much so, that there is even a Woo Commerce app that mimics the look and feel of Shopify’s Checkout called CheckoutWC.

The out of the box solution however, is not the most optimized Checkout experience that a User can have. I’ve seen New Users not convert on brands who have switched from Magento’s clunky Checkout to Shopify’s seemingly User friendly Checkout. On mobile, Shopify’s Checkout has the promo code field as default to collapsed. It doesn’t take a lot of recordings on Hotjar to view that it’s not always a best practice to hide the promo code field. The last thing you want to do is hide the promo code field for anyone determined to use one whether it’s a first time sign up code or a promotional code. Unfortunately, if you don’t have Shopify Plus, the Checkout liquid is not available to make any type of customizations for branding nor for building Trust at Checkout.

For those on the non-plus Shopify plan, here is a conversion rate optimizing tactic to increase the AOV if you have a free shipping threshold. Adding a “Spend X dollars more to get Free Shipping” can easily be added through the help of any app as a persistent promo bar or one that slides out. Some of the Shopify apps have advanced customer targeting capabilities, have a count down timer or support festive emojis.

Free Shipping Promotional Banner
Free Shipping Messaging in the Super Banner Promo Bar

One app from called Free Shipping Bar with Timer has a few different feature options. Outside of the announcement bar, it also has an email collection option where Users can directly enter their emails in the Superbanner and the app integrates with popular Email Service Providers such as Mailchimp and Klaviyo.

If adding yet another app and especially a paid version is out of the question, there is an option to show the same experience at the Cart with a bit of coding. Black Belt Commerce has a helpful article that walks you through the easy steps including a bit on CSS styling. Full article link here. Please note that it will only show on the main Cart page – see example below but it will not show up in the mini cart aka the slide out or drawer cart. Read more on the Power of the Mini Cart.

Example of You're X away from Free Shipping Promo Bar.
Example of “You’re X away from Free Shipping”


Published by coolfoodhunter

Designing through analytics and intuition.

One thought on “Shopify Checkout

  1. Hi there, Clif from CheckoutWC here. This is good feedback and something we had noticed to.

    We now have an option to enable a dedicated mobile coupon code field to alleviate this issue as we observed the same behavior on client HotJar recordings.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: