BigCommerceDesignEcommerceSoftware

Modify BigCommerce Checkout To Boost Conversions By 30%

As many of you know, we run a few BigCommerce stores.  Over the past couple of months we have been getting a lot of complaints from customers not being able to complete checkout.  At first we just brushed it off believing it was operator error, or someone trying to checkout with Internet Explorer 7.

Still, after each one of these calls or chats it made my blood boil; there is nothing more frustrating than having an ecommerce store where someone is trying to give you money and you can't take it!  Even more frustrating,  we couldn't reproduce any errors.  We tested and tested and everything seemed to work fine.

One one fine day in late July we got 3 calls / chats from customers that were trying to checkout and couldn't.  That was the straw that broke the camel's back, so to speak.  What followed was over a month of research, fixes, and tweaks to IceWraps.com.  The end result was an increase to our conversion rate of over 30% and me enjoying an adult beverage of choice.   That's right, I said a 30% increase to conversions by just working on one page of our site!

Where Do I Start?

Based on the phone calls and chats we were getting, we knew there must be an issue(s) with the site, but we really didn't know where to start.  We had a pretty good looking template and everything seemed to work just fine for me.  Below I'm including the obligatory “before” photo, so you can see what our site looked like at the start of this project.  I'm sorry to say that I don't have a “real” before photo of our site, because I never took a picture of our checkout page at the outset.  However, the picture below is the same as our site looked with the exception of the logo, phone number, and footer links.

 

IceWraps Checkout Layout Before
IceWraps Checkout Layout Before

It was clear that if we were going to make improvements to the site, we were going to have to see things though our customer's eyes.  There are several tools on the market that allow you to see recorded videos, but we ended up going with Inspectlet.com.  Based on our traffic, the plan was only $79.99 a month and it turned out to be the best money we've ever spent…

Within the first day I was able to see videos of people who were having issues checking out.  It was simple stupid stuff, but it was obvious that the average person doesn't read and doesn't know how to use the Internet.  It was honestly hard to watch because you could see people trying to give you money, but then just giving up out of frustration.

What Did Inspectlet Tell Us?

After letting Inspectlet do its thing for about 2 weeks I grabbed a bag of popcorn, some Excedrin, and prepared for the worst.  I simply filtered by visitors who had been to our checkout page and proceeded to watch every single video.  What I saw was simply amazing.

Before I get too far along, please take a look at the image below.  I'm going to be talking about the areas with the red arrows and the header.

 

Old version of the site with some highlighted areas
Old version of the site with some highlighted areas

More than anything, I wish that I could share some Inspectlet videos with you, so you could see for yourself exactly what customers were struggling with.  However, one downside to Inspectlet is that it generates videos on the fly, based on what your site currently looks like.  So, if you look at any of our past videos today what you see are people typing into places, or clicking on things that don't exist anymore.  So, I will try to recreate what I saw in words.

The most common issue is that people simply don't read. They have shiny object syndrome and are preprogrammed to try and get through a checkout process as quickly as possible.  So, when they landed on our checkout page, they just got right to work by typing their email address in the email address field.   The problem: this field is under the “I'm An Existing Customer” section of the checkout.  BigCommerce's standard layout is to divide the screen into left and right.  Left being the path for new customers to follow and the right being the path for existing customers to login.  Well, a large chunk of our visitors didn't understand this.

Several people would type their email address on the right side of the screen and then click continue.  Of course they didn't enter a password, because they didn't have one yet.  This generated an ugly error message that most people didn't understand.  Again, without reading they would just click the link in the error message, which was to reset their password.  Well, you can see where this is going.  It's pretty hard to reset your password if you don't have an account yet!  I saw over 20 people have this issue and drop off the site.  This was from videos recorded in just 12-14 days.

Are you frustrated yet?  So was I.  Oh, but wait, there's more…  Pop another Excedrin and continue reading.

I wish this was the only problem I uncovered, but it was really just the beginning.  For people who do read and clicked continue on the left side, they fell into a bunch of other traps.

The first issue was that “register an account” is the default on the left hand side.  By having that checked and clicking continue you are then required to enter a password.  People didn't want to do that and would skip the password fields, even though they were marked with a little red  asterisk (required).   By not entering a password it would generate an error.  Not a big deal you say?  Well that might be true if BigCommerce's error handling were better AND the Norton SSL badge didn't conflict with it.

The next issue was people checking out with PayPal.  This process is ever so graceful, with a big heaping side of sarcasm.  When you check out with PayPal, it takes you off site – to Paypal.  Once you get there, you fill out some stuff and then end up back on BigCommerce (IceWraps.com).  At this point several people who checked out with PayPal thought they were done.  This would explain calls from people day after the thought they placed an order.  If they were able to figure out that they needed to click one more time at the end, they would get an error.  Again, with broken error handling people didn't know what they heck was wrong.

As it turns out, when someone checks out with PayPal on BigCommerce, all the necessary information is then automatically populated back on your BigCommerce site.   Great!  Well, that is all the necessary information except for the phone number.  Not so Great!  Again, without proper error handling people were clicking “complete my purchase” and not knowing why it wouldn't go though.  “All they had to do” was scroll up, edit their personal details under step 2, add their phone number, click continue, and then pay for their order.  I have no idea why they couldn't figure this out.  <rolls eyes>

Another thing you could see people clearly frustrated with was the long list of countries BigCommerce displays by default.  It looks something like this:

IceWraps checkout with long country list
IceWraps checkout with long country list

Another thing people would do quite a bit was to click on the little red 2, 3, 4, or 5, which is the label for each step.  For a lot of people this looked clickable, but it's not.  Inspectlet shows a little red dot each time someone clicks.  You could see someone going click, click, click, click, click, like a spaz on these areas.  Nothing would happen.  They would get frustrated and leave.  #goodtimes.  I pointed these areas out with a red arrow in an image above.

Finally, the menu at the top was a big distraction.  People would get annoyed with the checkout and end up clicking some menu item at the top.  If someone is on the checkout page you don't want to let them escape!

OK, I See What's Wrong Now.  How Do I Fix It?

After watching all the Inspectlet videos, eating all my popcorn, and downing a half bottle of Excedrin I was armed with the knowledge of what was causing the most strife with my customers.

The first thing I did was rely on my good old friend Google to see what I could find about this subject.  Surely several other people had discovered these problems, written about them, and discussed how to fix them?  Not so much.

One thing I did uncover however was a company selling a one step checkout process out of India.  It seemed like a steal at just $79.99, so I purchased it.

Here is what it looks like.  Again, I didn't take a screenshot of this in operation on our site (I wish I had), but here is generally what it looks like.  The concept is amazing.  AMAZING!!! Everything is on one screen and there aren't any next, next, next, next buttons to click.

One Step Checkout

At first I couldn't have been happier with this.  I thought my problems were solved and I was gloating inside.  I started testing everything and things seemed really great.  I noticed a couple small errors that I alerted the company to and they took care of them within 48 hours.  At that point I actually started writing this post and set out to collect some before and after data.  One thing I noticed however was that though our desktop conversions were through the roof, our mobile and tablet conversions fell off the map.  Hrmmmmm.

So I grabbed my iPad and started some extensive testing.  After a few minutes I could see exactly what was wrong.  The script that fires when someone types in their city, state, zip and allows the shipping info to show wasn't working on my iPad.  Rut Roh.  So, I emailed the company that made the checkout again to alert them of the problem.  I expected to hear back from them after a day or two just like with the other errors I found.  However, after a week, still nothing.  So, I reached out again to follow up.  They told me that they couldn't reproduce the problem.  At that point I sent screenshots in explaining exactly what was wrong.  Another week went by and I finally had to ask them to remove the script from the site – back to the original checkout I went.

Mike's Checklist Of How To Fix BigCommerce's Checkout

Since I wasn't able to ultimately use the one page checkout script I found, it was back to the drawing board with BigCommerce's default checkout.  My goal was to fix all of the problems I mentioned above without reinventing the wheel.  Here is what I did:

  1. Stripped the header out and replaced it with a barebones header.  We included nothing but our logo, the Norton trust seal, yotpo reviews, and a way for people to contact us if they need help.  If someone is on our checkout page and wants to call us, that's a pretty good use of time!
  2. We ripped out all the styling on each of the steps to make it clear they are not clickable.  We then labeled them as such – STEPS.  This makes it much more clear for customers.
  3. We broke the left and right side of the screen up into boxes and shaded the area we wanted people to focus on – the left side.  By having this area shaded in blue it causes people's eyes to naturally focus here.
  4. We changed the label of the button on the right side to say “Sign In” vs “Continue”.  People understand sign in and get that is if you have an account.
  5. We replaced the ugly default BigCommerce buttons, which come directly out of 2002, and replaced them with more modern ones.  We also added roll over effects.
  6. We set the default to “Checkout as a guest” instead of register an account.  Sure, I would rather people make an account, but I want them to buy from us more than I care about them making an account!
  7. We reduced the county list to he United States and Canada, since that is the only place we ship.  No reason to show people French New Guinea if we don't ship there!  We set the default to the United States since 99% of our business is from there.
  8. We fixed the error handling so when a required field isn't filled in a message comes up clearly telling you what the problem is.

The end results looks like this:

IceWraps Checkout After Modifications
IceWraps Checkout After Modifications

The day after making these changes our conversion rate shot up and the phone calls from upset customers who couldn't checkout stopped!

Before You Go…

Finally, the last thing we did was add an exit intent popup for people on the cart or checkout page.   Over 80% of visitors to ecommerce stores come there one time, look around, then leave.  They never come back again.  Let me say that again.  THEY NEVER COME BACK AGAIN!  Or, as Taylor Swift would say… We are never ever getting back together.  Ever.

With this knowledge in hand, why wouldn't you make a last ditched effort to get them to buy?  Most people who leave are going to buy somewhere else because they are price sensitive.  By offering this exit intent popup we cater to that group of people and try to get them to change their mind.  Again, we only do this on the cart or checkout page.  So, we are talking about people who got this far and changed their mind.  They obviously want to buy – we try to nudge them over the edge.

It looks like this:

IceWraps checkout exit intent popup
IceWraps checkout exit intent popup

We had 4 people use this coupon the first day we installed the script.  That is 4 customers who were 100% going to leave our site and never come back again.  Now they are customers!

We went with an app in the BigCommerce app store called Justuno that is very easy to setup.  We also use a popup with a lower discount for people who have visited at least 3 pages and stay on that page for at least 5 seconds.

The End Result?

After making all these changes our conversion rate has gone though the roof.  As you can see by the image below, our conversion rate the day before writing this post was at 4.4%.  That's a full 30% higher than what our conversion rate was before these changes.

IceWraps Conversion Rate

People spend so much time and money trying to get traffic.  However, from time to time it's important to spend time working on your conversion rate.

To put things in perspective, you might spend $1,000 to get 1,000 people to your site with PPC.  With the conversion rate bump we've seen from this we are now getting about 10 more sales for every 1,000 visitors.  With an average order size of $50, that is an additional $500 in revenue on the same traffic we have already been cultivating.  That's $500 in additional revenue without spending any more money to get it.


Thanks for reading about how to improve your BigCommerce checkout.  If you enjoyed this post, please subscribe to our newsletter or contact us about our ecommerce consulting services.

Michael Jackness

Michael started his first business when he was 18 and is a serial entrepreneur. He got his start in the online world way back in 2004 as an affiliate marketer. From there he grew as an SEO expert and has transitioned into ecommerce, running several sites that bring in a total of 7-figures of revenue each year.

44 Comments

  1. I was among those *really* looking forward to the enhanced one page checkout after seeing the results. This would have been one of those great “no brainers” to help everyone out but it’s hard to recommend anything that we aren’t willing to use ourselves of course. I actually tried the script on CuttingBoard.com and it failed on install, so it was apparent to me that it was quite hack’ish to begin with.

    We’ve also looked into alternative one-page checkout services but have been quoted a ridiculous $12,000 by one company and another $6,000 from another company. For reason we can’t elaborate on, there is going to be a much better solution in the future that will be much more accessible and helpful for the masses.

    In the meantime, we’ve often heard on the BC forums in particular that multi-page checkout has helped some sites more than express checkout. If any of our readers have experience, we would be very interested in hearing your conversion rates with either method.

    1. Hey Guys, thanks for the really helpful article. Any chance if you’re aware the issue with the mobile checkout has been fixed since this publication? Also… you alluded to a new service that might be available soon… Have you guys developed a checkout plugin? If so I’d love to check it out!

      1. BC has recently released their one page checkout, which seems to solve a fair amount of problems. I’m still not using it as I want to wait for it to be out of beta and also because I need to understand how to insert some changes to the page first, but it seems to be a right step. Essentially they have a checkout comparable with Shopify at the moment, so that’s a plus.

  2. Some great suggestions here and I started to play around with the changes you suggested on the checkout page.

    How do you change the Continue button text? When I changed it, for some reason it only took effect on the Sign In page rather than this checkout page, even though I was editing the checkout.html page in the backend of Bigcommerce.

  3. Stuart, if you’re using express checkout, then the file you’ll want to edit is “checkout_express.html”.

    You’ll want to look for %%LNG_Continue%% in that file and you’ll need to dig into some Snippets as well, that begin with the filename “ExpressCheckout”.

    Be sure to back these up before going crazy. I’ve been up a few late nights fixing my own blow ups ;)

  4. Thanks so much for this article. I’m doing a trial of Inspectlet now to see if we get similar issues.

    Your new checkout page looks great, I’ve modified our checkout_express.html page to make ours look similar, but I’m stuck on the part where you’ve broken up Step 1 into left and right boxes. I can almost get it right, but not quite. Did you use divisions? Tables? If you’re willing to share any code that would be awesome!

    Cheers
    Graeme

      1. I guess, since I don’t want to limit countries, I have to use an enormous chunk of code that includes all of them. Unless you know of some other way?

  5. I’m doing the dev work on our site and learning the BigCommerce platform. I don’t have enough user data to have seen all of this, but man, I’m going to start tweaking based on your fixes immediately.

  6. Michael, any luck with the Boom! app? I was about to purchase the Meggnotec solution until I read your review. I have a querry into their customer support to see if they have resolved the issue you described, but I am really curious as to your thoughts on Boom! as a substitute. Also, I see that you use Olark — so do we! Are there any other BC apps that you’d highly recommend? We’re always looking to improve our site. Thanks!

    1. Carrie – I did try the Boom app, but uninstalled it because it wasn’t as seamless as I hoped it would be. In the past few weeks we made the decision to switch IceWraps.com from BigCommerce to Shopify, so we won’t be making any additional tweaks to the BC store at this point. We are looking to transition late Q1 or early Q2.

      1. Michael, I see that you use SecureNet — how did you install Boom? I also use SecureNet, and it wouldn’t let me get past the first step or two of the installation, saying my payment gateway was not supported.

        I found another one-page checkout option, which is affordable, even with customization. I’m considering it.

        1. Carrie,

          We were using SecureNet, but switched off of them now.

          I installed Boom, but didn’t like it.

          I found that my modified BC checkout page did better.

          Mike

      2. Hi Michael.

        Firstly… loved the article!

        How have you found the change over to Shoplift from BC. What was the changeover process like.

        I do have major problems with abandoned carts. I have tried adding some off your modifications but don’t have the know how. Any advice would be greatly appreciated!

    1. So our readers know Dan, you’re personally associated with Intuit Solutions.

      Also, the pricing for your service is $12,000 for the code and a $50 monthly fee.

      I think that pricing is ridiculous personally, given that I could roll my own for a comparable or less charge, minus the monthly fee. That said, if you have enterprise clients that simply don’t care, all the power to you.

      1. Hi Grant, (*disclosure: I’m also personally associated with IntuitSolutions.)

        Just wanted to clarify – our pricing is not, and never was, $12,000. That’s indeed a ridiculous price.

        We currently price our checkout at $1,195 (which may have been misread as $11,995), and we always listen intently to feedback about the price point. Our $29.95 monthly fee exists because we strive to keep our code up to date, continually improving our system to keep up with the latest changes in BigCommerce (like Stencil) and ensure compatibility. We also include ease-of-use tweaks like Google address autofill, automatic credit card type detection, and customizable responsive design. We hope you’ll give us another shot!

        https://www.intuitsolutions.net/bigcommerce-apps-extensions/one-page-checkout-on-bigcommerce/

        1. Ryan,

          Appreciate the correction on the pricing, but I am 100%, absolute certain, willing to bet the house that I was quoted $12,000 from your company. I don’t read things wrong, but I will give the allowance that someone misquoted me with an extra zero.

          Just to be safe, I searched my inbox and I was quoted $11,950.00 from Zach on 9/3/15. That email was forwarded to our developer, who responded “Jesus christ am I in the wrong business.” so that is two eyes vs one.

          1. Hey Grant, thanks for following up. I just checked with Zach and he confirmed it was a simple typo. Sorry for the confusion.

  7. Great article Mike, I only have one question: how did you end up customizing the checkout page? Our developers told us that customizing the checkout page is extremely limited with the current version of BigCommerce….

    1. Are they working on Stencil? We haven’t migrated over to Stencil, so we’re not sure if that’s the case. For what it’s worth, the default Stencil checkout seems horrid, so I would hate to think it can’t be modified. BigCommerce really screwed up some incredibly basic stuff like just having the First name field line up on the left side of the screen.

      If you’re not on Stencil (launched more than two months ago), there should be no reason the checkout can’t be modified.

        1. Interesting. Unfortunately we haven’t migrated over yet, so that’s news to us. That will be very painful to switch to Stencil if that’s the case.

  8. Michael, Grant, you might be interested in taking a look at our solution for reducing checkout friction, especially on mobile – http://cardpass.io . Among other benefits, it completely eliminates the whole guest vs registration user confusion that you describe. We support both Shopify and Bigcommerce (and other platforms).

    On Bigcommerce, CardPass also automatically makes the standard Bigcommerce forms more user-friendly, particularly on mobile devices per recommendations from the Baymard Institute (http://baymard.com/research/checkout-usability).

    Enhancements include:
    • Pre-selecting the country based on the IP address of the visitor
    • Making sure the much easier to use numeric keyboard is rendered on mobile devices for fields such as telephone and credit card number
    • Disabling of improper auto-correct of names on mobile that can cause people to accidentally end up with incorrect addresses
    • Specifying proper auto-complete hints so mobile browsers with stored auto-fill information can correctly auto-fill all the form fields.

    1. Alex, appreciate your comments, but I personally would not be comfortable putting an external Javascript on my checkout that communicates with a third party other than my credit card processor or major business. You’re obviously sending back personal data to your servers to store and modifying fields on the fly. I have to seriously trust you and your ability to keep your servers secure from any breach that would then expose myself and my customers. Nothing against you, since I’m sure you’re aware of the issues, but I tend to think it would be some PCI type liability that I wouldn’t want to touch.

      Other question, how are you modifying the Shopify checkout since it’s a closed system? I assume you’re exploiting the Google analytics bug if so, which is again, a bit of a PCI issue if so.

      1. Actually, we don’t store the payment information (or even any contact information beyond the email address and phone number) – all of that resides within the platform. We just enable the login to the platform without passwords and prior registration, somewhat similar to how social login widgets work (except social login is only used by a very small percentage of shoppers and CardPass is used by all returning customers).

        And on Shopify, yes, we typically hook into the Google Analytics but you could also set us up to log people in on a page prior to checkout if you didn’t want to load our tag there.

    1. On Cutting Board, we don’t even offer Paypal as an option to click on until the checkout page itself, instead of the cart. This prevents confusion from Cart -> Paypal -> Back to Checkout -> Complete and just goes Checkout -> Paypal -> Complete.

  9. We have an older BigCommerce theme (Minimalist) with a separate mobile template. With your excellent article as a guide, we modified both desktop and mobile templates to achieve a 48% conversion rate improvement so far. Most of this uplift has come in our Mobile/Tablet traffic which now coverts considerably better than our Desktops do.

    We are planning to implement a responsive theme after the Christmas season. As you haven’t migrated IceWraps away from BigCommerce yet, I was wondering if you recommend the BC responsive template that you are currently using.

    1. Hi Dennis, that’s great that you’ve improved your conversion 48%! That’s even better than our own boost, so always happy to hear a good story.

      The theme that Mike is using is a modified/customized template. BC is rolling out their new Stencil platform that will eventually (in my opinion) legacy all of the older themes, so it’s not the best idea to jump to a different theme at this point. What they also don’t tell you is that NONE of the current Stencil themes that are available can be edited. You’re stuck with what you get, which is a huge pain in the butt. At “some point down the road” they plan on allowing edits but we’ve been waiting for single page checkout from BigCommerce for years “It’s next month, really” so I wouldn’t hold my breath.

      To be fair, on Shopify, you cannot edit the checkout either (at least not without some serious hacking), but their checkout uses 90-95% best practices so it’s not in need of dire help like BC is.

      Long story short, stick with your current theme unless more information is available or BC forces you to upgrade. If I can’t edit my checkout, I know I’ll jump ship with CuttingBoard.com to Shopify in instant if they’ll keep my locked into their standard garbage checkout.

  10. Thanks for the article! You solved my abandoned cart mysteries…based on what your excedrin laced adventures I now understand what my clients were trying to tell me about trying to check out. (note many are not the most internet comfortable) Am putting your excellent advice to work asap.

    And thanks for the BC vs Shop podcast…which led me here. And for the record, learned about you from Steve Chou’s newsletters.

    1. Thanks for the comments MK. BC just released the new one page checkout, so I’m letting some other gerbils see if they survive first through Q4 before we make the attempt to switch over. Not keen on testing a new feature right in the middle of checkout season, but anyone on a default checkout may actually do substantially better even with the possible risk of things going south.

  11. Hi there, can i ask where did you paste the inspectlet code to in bigcommerce? was it to checkout_express.html ? sorry if this sounds a silly question im still adjusting to the way bigcommerce works, thanks Mark

    1. As long as you have footer.html being loaded by checkout_express.html then it will pull in the Inspectlet code, provided you put your Inspectlet code in the footer (recommended method).

Leave a Reply to Alex Hisen Cancel reply

Your email address will not be published. Required fields are marked *

Back to top button