5 Reasons Why Snipcart's E-commerce Checkout Design Converts

One sad, quantifiable truth about today’s e-commerce industry is that online shopping carts get abandoned by users way too often. In a list compiling 26 different studies on the subject, Baymard Institute evaluates the average online shopping cart abandonment rate to be as high as 68%. This means that more than half of potential online customers leave their items and carts to rot away in the depths of the web. For e-commerce merchants, that’s bad news: losing users within the checkout funnel is, logically, costlier than anywhere else on your site.

That’s also why you’ll find hundreds of e-books and articles on UX and checkout design if you ask Google how to optimize your online store’s checkout flow conversion. One such article caught our attention over at ConversionXL. In a post titled How to Design an Ecommerce Checkout Flow That Converts, Peep Laja offers some effective advice and tips for e-commerce owners and developers. Inspired by his effort, we decided to analyze our beloved Snipcart using some lessons and principles he illustrated in his post.

Optimizing conversion through your checkout flow: tips & tricks

First off, here’s a list of some of the most important notions found in the aforementioned post (and in many others):

  • Give shopping users a clear visual confirmation once they’ve added items to their cart.
  • Clarity and control should be the two guiding principles behind your in-cart display.
  • Put the “Continue to checkout” button at the top of your cart’s initial visual hierarchy.
  • Do not make coupons and discounts prominent during the checkout experience.
  • Give the user clear info about shipping, returns and security.
  • Do not force registration upon a user.
  • Ask your customers for easy info first; the credit card number comes last.
  • Store credit cards into your system to eliminate friction for returning users.

So now, developers, online merchants and geeks, let us introduce you to 5 reasons why Snipcart’s e-commerce checkout design actually converts:

1. Snipcart lets you program any kind of visual confirmation for adding an item to the cart

Giving users instant visual feedback on their actions is key. Snipcart’s default behaviour will make the whole cart pop up as soon as the user adds a product to it. However, adding a simple attribute to our initial installation code snippet lets you change that easily, giving you the opportunity to tweak your user experience according to the visual confirmation principle. What you first need to do will look like this:


<script 
    src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"    
    type="text/javascript"></script>

<script type="text/javascript" id="snipcart" src="https://app.snipcart.com/scripts/snipcart.js" data-autopop="false" data-api-key="YOUR_API_KEY"></script>

<link id="snipcart-theme" type="text/css" href="https://app.snipcart.com/themes/base/snipcart.css" rel="stylesheet" />

<link type="text/css" href="PATH TO YOUR STYLESHEET" rel="stylesheet /">

(see the data-autopop=”false”?)

What you’ll want to do next is this: using our JavaScript API, you’ll need to register to an event that is raised as soon as something is added to the cart. This way you’ll be able to produce any kind of visual confirmation you want, whether it be the popping of your shopping cart icon or the display of a punchy visual message. We’ll be exploring this possibility more deeply in our documentation during the upcoming weeks (we’ll keep you posted).


// Please note that the following code must be included after snipcart.js file.
Snipcart.do("bind", "item.added", function (item) { 
    // This event will be triggered whenever an item is added to the cart.
    // You can trigger an animation to notify your customer.
// The following code is not working, it's just to give you a basic idea.
$("#cart-icon").makeItBounce();

});

2. Snipcart offers a clear and actionable page of your added items

Before a user initiates the actual checkout process, he’ll be stopping by the usual cart summary. That’s where control and clarity play crucial roles: you want your user to know what’s going on with his shopping experience, and if he isn’t a 100% pleased with the situation, you want him to be able to change details directly inside the cart. Well, Snipcart’s got you covered here: with product definition, you can make sure added items are clearly titled, described and illustrated with appropriate images. Oh, and using custom fields, you can also allow the user to adjust options like quantity, size, color and more.

Product definition

Custom fields

3. Snipcart lets you create powerful, appealing checkout buttons

As we said earlier, your Checkout button should be the most apparent and engaging element in your cart summary’s display. Since Snipcart is fully customizable, you can make your checkout button’s size and colour stand out from the rest of your design with a quick CSS twist. Of course, you can also insert killer copy and straightforward CTAs wherever you see fit!

Checkout button

4. Snipcart doesn’t force your customers to register before buying

In his ConversionXL article, Peep reminded us that 25% of shopping cart abandonments are tied to forced registration. As an online merchant, that’s a number you can’t afford to lose. The lesson here is clear: don’t force a signup form, however short, down the throat of a ready-to-buy customer. It will hurt your conversion. With Snipcart, you can allow your users to pay without registration, to checkout as guests. We wanted to let you give your customers the freedom they expect when they shop online. Once they’ve gotten through the checkout process, they’ll be able to automatically create an account using their freshly entered info, if they want to.

Checkout as a guest

5. Snipcart guides the user clearly and effectively through the checkout process

With Snipcart, you’re clearly telling your customers what the checkout steps are with both written names and evocative icons, so they know exactly where they’re going with their transaction. Our checkout flow was designed in an honest and linear way. Previous step buttons accompany the user at each step, should they ever feel like they’ve missed or forgotten something. And, of course, we only ask for the credit card number (the most difficult and stressful information to enter) at the end of the process. Before that, we’ve put the easiest, more benign fields of information (billing address, shipping method, etc.). So once your users reach the Payment method step, they’ve already taken the time to complete quite a few fields, and their psychological commitment to their purchase is at its peak. From this point on, conversion is only a few digits away.

Checkout step


In light of the principles emphasized at the beginning of this post, we’ve identified new objectives for our product. As we’re always looking for new ways to improve Snipcart, we’ll be working on the following in the nearest future possible:

Be more subtle with the coupons and discount codes.

As Laja points out, people without a code or coupon number have the tendency to go searching for one and end up abandoning their cart completely if they don’t quickly find it. So having an empty, inviting field that your customer has nothing to put in surely isn’t the best way to convert! On the contrary, people with a promo code or discount coupon will be actively looking for a way to enter it. So chances are they’ll find it even if it’s a bit down the visual hierarchy. So, yeah, we’ll be looking into that in the upcoming weeks! We’ll definitely come up with a toggle button or something more subtle for coupons and discount codes.

Make security more prominent in our shopping experience.

Sure, the Powered and Secured by Snipcart link and the green padlock icon might ease your customers into trusting the service. But right now, if you click on the link, you’re only redirected to our website’s homepage; you’re not confronted with immediate, relevant security arguments or information. We’ve been working on a more detailed security page that we’ll probably link to once it’s done. In the meantime, we’ll link to our documentation’s security section. We could also integrate a few security cues in the design of the cart, like written reminders of our HTTPS protocol and payments methods logos (Visa, Mastercard, AmEx, etc.).

Set up a secure system for credit card storage where we can.

The possibility to do that depends on the payment gateways used by the e-commerce owners. For instance, Stripe and Paymill allow us to securely save credit card numbers in our system. Such a thing could reduce the transactional friction for your returning and registered customers. Currently, this feature isn’t supported by Snipcart. We’ll look into it during the upcoming months and, if the demand for the feature grows substantially, it might become one of our top priorities.

Snipcart’s already a great e-commerce solution, and we’re actively working on making it even better. We hope this post gave you more insight into checkout flow optimization and e-commerce experiences as a whole. Got recommendations about conversion for our team? Suggestions, comments and opinions are more than welcomed in the section below!

To stay in touch, follow us on Twitter, like us on Facebook or come by our Québec City office, coffee’s on us!

Suggested posts: