5 Ways You Can Optimize Your Shopify Checkout Page To Increase Conversions

Brent Godkin
The Startup
Published in
8 min readJan 9, 2019

--

Think about how much time and money you put into your Shopify store trying to make it look perfect and convert well. You go over the home page, collection pages and product pages with a fine tooth comb to make sure nothing is out of place that would discourage a potential customer to make a purchase. Once your site looks perfect you start driving a ton of traffic to your store with highly targeted paid ads and you star to get some sales and everything seems good. You then start to dive into your store’s reports and you notice that your conversion rate seems low, you get lots of people to the checkout page but that’s as far as they go and you sit and wonder why this may be? Well lucky for you I can give you some insight on why that may be and how to fix it so you get more sales!

Like I mentioned above I’ve seen so many store owners put a ton of money and effort into designing their store but then one of the most important pages on your Shopify store (the checkout page) is left looking like this.

Standard Shopify checkout page

As you can see in the image above the checkout page looks very bland, it doesn’t have a logo, and the color of the button and highlighted text box do not match the brand colors (if you could see the website you would notice there is no blue anywhere). This checkout page doesn’t look all that trustworthy or very “legit” if you are someone who isn’t familiar with purchasing from Shopify stores you might take one look at this and decide the page doesn’t look safe to checkout on and just leave for another site that looks more trusting. So how can you fix this to better brand your checkout page and help conversions?

1. Upload your logo to your checkout page and update the colors.

Unfortunately Shopify doesn’t give you a whole lot of customization options with the checkout page but you are able to easily upload of your logo and match your colors to your brand and this will make your checkout page look a lot better. Check out this example below.

Looks much better than before right? Simply by adding your logo (I prefer to center it as well) and matching the colors to your brand you make your checkout page look a lot more trustworthy and legitimate and this will help with increasing your store’s conversions. If you are unsure how to do this just watch this quick video (https://youtu.be/fW3TnnzwHBg)

At this point you might be wondering well what else can I do if Shopify limits the customization so much? Keep reading to find out!

2. Add a Countdown Timer to your checkout page to increase urgency.

Unfortunately out of the box Shopify limits what you can easily customize on your checkout page, but with the use of an app like fera.ai you can add a great checkout timer to your checkout page. (ps that’s not an affiliate link I just like their app and use bitly to see how many people click the links in my article)

Having a checkout timer can really help create urgency for your visitors to push them to finish their purchase right away and not have them leave the checkout page. Within the app you can always easily change the wording of the countdown timer to fit your stores need, for instance you could say checkout within “x time’ to secure your spot in line for shipping, or checkout within “x time” before the sale expires and runs out or even something like “we noticed a product in your cart is a hot item going fast, be sure to checkout within “x time” to secure that item, there are endless ways you could word this to suit your store.

You can also set up a personalized message for when the timer runs out, this is a great way to try and get the customer to convert right away as you can show them another message to create urgency.

Another great feature this app(fera.ai) provides is when the checkout timer is running your browser tab changes the favicon image to something eye catching and the tab displays a countdown as well. Fun Fact: Even if you have your favicon image set up on your Shopify store Shopify doesn’t display it on your checkout page and this can cause your tab to get lost in a browser. By making sure you have favicon image displayed on your browsers tab while on the checkout page (like the one the app provides) this will help customers find your tab easily in a browser and promote more conversions.

The middle tab with NO favicon image is the standard Shopify checkout page. The one with the exclamation point is the checkout page of a store using the checkout timer app… what tab would likely grab your attention more?

3. Adding Card Badges to your checkout page.

Allowing customers to see what type of credit cards and other payment methods you take on your checkout page will help provide trust to potential customer. If you take multiple cards and payments methods it proves you have a legitimate payment gateway set up which gives a sense of trust, also it allows the customer to know right away if they will be able to pay with the method they hoped. The typical Shopify checkout doesn’t indicate what payments are accepted on the first page of the checkout and a customer could land on the checkout page and not see a MasterCard logo or Amex logo anywhere and assume maybe you don’t take them and leave. By having the card logos visible it improves the look of your page and helps provide extra knowledge to the customer to help them convert.

You can add in any type of trust badge you want here

4. Making the Progress Bar more visible.

A big downside to the Shopify checkout page is you don’t really know how far along in the checkout process you are, it doesn’t indicate how many steps you have left or how many you have completed clearly. Check out the image below to see the standard progress bar.

As you can see its pretty small and does not do a good job at indicating what step in the checkout process you are on. This image is zoomed in and focused on it as well, when zoomed out and viewing the entire page you hardly will notice it. So a great thing to do is make it more visible!(after doing multiple a/b split tests I learned customers seem to love the progress bar as it converted very well). Having a visible progress bar will help guide customers through their checkout journey a lot better and it makes the checkout page standout more and look more credible.

Progress bar across the top, black color indicating the stage you are currently on.

5. Adding a “why choose us” section.

So far a lot of the optimizations I’ve mentioned have been focused on the left hand side of the checkout page or the top. There is still a ton of blank space we could utilize on the right hand side under the order summary and this is a perfect spot to add in a “why choose us” section. For this optimization you could add in what ever you like but we find making a badge for satisfaction and shipping work great (see below).

Here you can customize the image and wording any way you like to suite your store, you could add in a money back guarantee or add in how long it takes to ship orders or even how many orders you have successfully shipped to customers. By adding in these badges you really increase your stores trustworthiness with customers and makes them aware of things that maybe they were unaware about (like a satisfaction guarantee)that will help them complete their purchase. We find adding in these trust badges to really help increase a store’s conversions rate and boost sales.

To refresh you again on how big of difference optimizing your checkout page makes lets take a look at that first image I showed you of a store with a standard checkout page that hadn’t been optimized at all

And here is an image of a store that at least added in their logo and branded the colors on their checkout page

And finally once you tie in all the optimizations you can make to your checkout page with the help of the app (fera.ai) and a little custom coding this is what you can turn your checkout page into.

Looks much better right? It converts a lot higher too! I have had great success implementing these optimizations on customers stores as well as other optimizations such as a note that tells the customer if they are close to free shipping and how much more they would need to add to their cart to get it. There are a lot of optimizations you can do to your checkout page and the great thing about using the app fera.ai is you can a/b test the optimizations to see what’s working and what's not.

If you have any questions about the optimizations you see or have a question about the app fera.ai feel free to reach out to me in the comments or by email at brent@onlygrowth.com I am usually pretty quick to get back to responses. If you would like this set up on your Shopify store and have your checkout page optimized again just send me an email or visit onlygrowth.com learn more ways we can help you grow.

This story is published in The Startup, Medium’s largest entrepreneurship publication followed by +409,714 people.

Subscribe to receive our top stories here.

--

--

Brent Godkin
The Startup

Helping Ecommerce Brand Owners Grow Their Brand By Advising Them How To Increase Conversions And Implement Proven Growth Strategies on Shopify