As a result of Mike’s recent post on how he increased his conversions 30% on BigCommerce, I was inspired to see if we would try and squeeze out a little more juice out of the default BigCommerce checkout. After a little bit of wrangling, I believe we’ve made an even better update on a critical part of checkout!

In addition, there have already been a few comments asking about code examples. Like we’ve always said from the get go, we’re not here to sell you ebooks, so we’re going to publish the code that we use for you to see and download. This is totally try at your own risk and if you make a straight copy, it will most likely not work, so you’re going to need a little bit of CSS skills or a developer than can assist you.

So let’s take a look at what we were able to enhance on the conversion side!

By default, those of you on BigCommerce will probably agree that Step 5 on the Express Checkout is rather challenged, to put it politely. But don’t let me sway you, let’s take a look at the default checkout scheme.

multi-step-checkout

I don’t need Inspectlet or Hotjar (my current toy of choice) to tell me that the following situations happen ALL THE TIME:

  • Customer clicks on Apply to try to continue
  • Customer clicks on “Proceed to Payment” without clicking on the Paypal or Credit Card radio option
  • Customer clicks on the Paypal or Credit Card option and then waits…. waits… then leaves

It’s difficult to imagine this if you’re like Mike or I, because we’re technology buffs, but your average visitor is a far, far cry from your typical ecommerce owner/operator. In fact, 5-10% of the population is still using Internet Explorer 6 through 8, which is pretty much like driving a car that takes regular instead of unleaded as far as the technology world goes. And these guys are the ones that are having a seriously hard time figuring out how to checkout on yours and our sites.

So let’s take a look at how we went about fixing this:

multi-step-fixed

Ah ha!  Now instead of a meandering eye, the customer is most likely going to see the “Select Payment Option” area first because it’s highlighted, then finally take a look at the order confirmation. There’s also a very nice and big “Proceed to Payment” button right below the select payment option, which is just light years beyond the button being located down and to the right.

For the conversion geeks out there like myself, I highly recommend reading the Baymard Institute’s Top 100 ecommerce checkout carts study. This is an absolutely fantastic, data-driven showcase of the top checkout funnels and what they do right. Just be warned: once you see how awesome those checkouts are, if you’re on BigCommerce, you will have serious jealously issues. I know I do.

Now this last one is going to be a little controversial and I’m still going to be observing the data, but one thing that is definitely not an isolated incident is Paypal’s integration with BigCommerce. During checkout, a custom has two times that they can jump into the Paypal funnel; during the Cart page (or modal pop-up) and then during checkout itself when selecting a payment option (Step 5). If the customer opts for Paypal during Step 5, then they simply complete the transaction at Paypal and are taken back to the your store on the confirmation order page.

However, if the customer opts to use Paypal during the Cart/Modal screen, then they are taken to Paypal then they are returned to the BigCommerce checkout on Step 2(!). They then have to complete Steps 2 through 5 again before they reach a final confirmation order page and actually place the order. This violates all sorts of user experience paradigms of finishing an order when finally leaving Paypal, so I imagine many abandoned carts due to people thinking they got done checking out, when in reality, they weren’t.

So, this behavior has always rubbed me the wrong way, but it’s difficult to tell how many Paypal users specifically abandoned their order. I’ve heard of many other BigCommerce store owners complaining about customer complaints and confusion as well (which I’ve also had regarding Paypal + BC). What I’ve done then, is very simple – remove the ability to select Paypal early in the funnel process.

payal-checkout-bigcommerce

Whereas normally a customer would see a “Pay with Paypal” sign, it’s been replaced with a Paypal method of payment logo below. I tossed around using a “Paypal Available During Checkout” type button or other feature, but for now will leave it blank and keep it simple. This essentially forces a customer to use the Paypal option later in the checkout, where there is no chance of confusion. The one drawback is that a Paypal user may be so trained to click on the “Checkout with Paypal” option early on in the funnel that they might hesitate on going to checkout otherwise. That said, I think only a subset of users would refuse to checkout if a store didn’t have Paypal, so it’s hard to say.

The last change was a minor update:

final-checkout

 

Normally the checkout show the total in italics and the Payment button is sometimes all over the place. My thought process is that the user has acknowledged the total payment amount and doesn’t need to be reminded yet again that they’re about to PAY FOR SOMETHING with the words “Pay for Order”. Who in the hell wrote that ad copy?  If there is a time to Split A/B test ad copy, this would definitely be it. I’m going to go with my gut (and also the top 3 converting checkouts ala Baymard) and use the text “Place Your Order” instead.

Now Time for the Code

Again, please do not do a direct swap of this code and your code. We use custom CSS templates and classes that your theme or site won’t use.  A straight code copy is likely going to make things ugly or break it. You can easily have your developer implement these changes. Or if you ask us nicely… (ok not really, but if you pay enough, then maybe really).

Here is a small section from checkout_express.html that includes the side-by-side guest and existing account. This is found in your main template directory. If you can’t find it, then you need to go to your Design page and download the entire theme file to open it.

Here is the code from Step 5. You can find this file in the Snippets directory.

And finally, the credit card billing step or genericcreditcard.html in your template directory. Again, use these all at your own risk.