Did you know that despite the advancements in the look and feel of online stores and innumerable technologies to make online shopping intuitive and more engaging, the cart abandonment rate still remains as high as 69-80% across many industries.
We’re not kidding. This was a statistic found by Barilliance while conducting a research and survey on online shopping behaviour!
Now most of you obviously have a number of marketing strategies in place to recover these abandoned carts. But what about fixing the root of the issue?
This is where your cart-checkout page design comes into play.
Most Shopify stores make use of the standardized Shopify cart template. While the focus remains on improving the look and feel of your other pages, most often forget to customize Shopify cart page or Shopify cart checkout.
So in this article, we’re going to talk about Shopify checkout optimization and how you can design to convert.
Best practices for your Shopify cart page and Shopify cart checkout
The following are eCommerce cart design best practices that can be followed across all types of Shopify stores.
1. Place the shopping cart icon in the upper right corner of the page
We know how important it is for you to set up an impressive storefront. You’re also willing to explore different designs for your cart and its placement. But the truth is, ever since eCommerce came into being, online shoppers have been used to looking for the shopping cart icon in the upper right corner of the page.
So when you’re designing your Shopify cart page, start by not disturbing this habit of theirs. Working against muscle memory will only make you lose sales!
2. Use the shopping cart icon to display the number of items in the cart
When we’re making non-essential purchases online, we tend to get distracted by the smallest of activities around us. This is why it is important to remind your store visitors of their activity thus far on your site.
If they haven’t added a product to cart yet, show a 0 on top of it. But if they have, make sure that number is as visible!
This also helps visitors pick up where they left off in case they do move away from making the purchase during the first time.
3. Give an item added confirmation to the buyer
Most Shopify stores take customers straight to the cart page when they add an item to the cart. But what if they wanted to explore more products and add those too? It will need them to move back and forth between the pages, compromising the shopping experience.
So when a customer adds a product to cart, send them a confirmation that it is successfully added, without moving them away from the page they are on.
4. Make use of the mini cart
If you’re someone who likes to keep adding to products you like to the cart as you browse through a site, you’re not alone. But when you’re an impulse buyer, this often results in you taking a look at the cart total later on and abandoning the purchase if it is too high - instead of removing a few items.
This is where a mini-cart comes in. It is like a pop-up that contains all the important cart details, giving customers a glance at what’s in there without having to leave the page they are on.
PS: Don’t forget to link the in-cart item to its product page. In case someone needs to re-evaluate the purchase they are making.
5. Provide information about shipping clearly
High or ambiguous shipping costs are still one of the biggest reasons for cart abandonment. That’s why you should tackle this aspect in your Shopify cart page design by highlighting it clearly - even if it is free.
You can do this by including an announcement bar that sets the expectation for the shipping costs. If your shipping depends on order location, clearly add a progress bar that indicates the cost will be calculated in the next step.
6. Allow easy edit of cart items
Imagine having added different variants of the same product to cart. But when you’re finally making the purchase, you may want to alter the quantities of some, or maybe even remove a few products.
You need to make this as easy as possible so that the buyer doesn’t go from a purchase-ready state to frustration.
One way to do this is to offer a text box next to the product line item. Here you can mention the current quantity, but also offer the ability to click and type in the quantity they want to buy.
Similarly, you can offer + and - buttons around the quantity. That way the buyer can simply click on them to increase or decrease a quantity. Make these buttons easy to click - remember, whitespace is important here and you need to account for fat fingers too!
Or another way, is to offer a dropdown like Rowing Blazers does:
Apart from increasing and decreasing, you should also give your shoppers the ability to remove items from the cart or save them for later. While we know this isn’t your ideal goal because you want to make a sale, it does impact how well or not your cart page design converts.
Add this ability as a secondary call to action by keeping them in text instead of buttons.
7. Don’t make your coupon fields discouraging
Have you ever reached the checkout page and seen a coupon field without having one at hand?
This triggers two reactions. One, if you really need the product, you’d proceed to make the purchase. But the flip side, two, is that you would press back and go searching for the coupon, taking you away from completing the purchase.
A few things you can do to prevent the latter from happening is to place a clickable link where customers can search for available coupons on the Shopify cart page itself.
Alternatively, you can hide the coupon code field from visitors who are proceeding to make a purchase without a coupon code.
Lastly, you can also make this coupon field slightly less visible on the cart page. For those who have a coupon, they will look for the field to enter it. But for those who don’t, they will simply miss out on it!
8. Display all your payment options
Similar to shipping, the payment options available on your Shopify store or the confusion around them, can make or break a sale.
So make sure you display the logos of the payment options available on your store clearly on your Shopify checkout page.
Another tip we do give to customers is that if there is a preferred payment option that you see most buyers from a location have, make sure it pops out in the design. This can be done by either increasing the size of it or creating a separate button for it altogether.
9. Give a cart total cost breakup
Most Shopify stores display the product price and the cart total as a general practice.
When moving towards checkout, you may have to include taxes and shipping charges as well, depending on what and where you sell.
Include a cost breakup table on your cart checkout pages; this removes the ambiguity a buyer may feel while making the purchase.
10. Make sure your Shopify cart page guides the buyers to checkout
Remember, the two have different functions altogether; even though they are closely tied, leading to the same goal - a sale on your Shopify store.
The cart page allows the buyer to see the products added, edit or change the quantities, add/ remove items or even return to the product page. But from there on, the idea is to take them closer to making the purchase - the checkout.
Make sure your checkout button on the cart page distinctly stands out. The goal is to capture the eye to nudge that action.
Also a good practice is to keep the checkout button above the fold, without cluttering it with other distractions.
11. Make sure your main CTA stands out
When a buyer reaches the shopping cart page, they should be presented with two clear call-to-actions: “continue shopping” and “checkout”.
Place these two CTAs on clickable buttons to allow them to be distinct from the rest of the page elements. In addition, also make sure these are colored buttons so that they stand out from the background.
12. Add a thank you page to your checkout process
You know what is truly impressive? When you go beyond the cart page and checkout to put effort into how you thank a shopper for making the purchase from you.
Design a Shopify thank you page that lets you place a note confirming the order along with the purchase details. But at the same time, use this space to show gratitude with a warm and personal message.
13. Never forget the CSF formula for both desktop and mobile
Remember when an online shopper is on the cart page or at checkout, they’re in their buying state of mind. You don’t want to waiver them or distract them from it.
So follow the 3-step CSF formula even when you implement the above strategies for the Shopify cart and checkout page design:
- Clear
- Simple
- Fast
14. Keep your branding intact
Using distinct buttons to make your CTA button stand out is important. Making sure your announcement bar is visible is critical too. But this doesn’t need you to move away from colors that define your brand.
Remember to keep your cart page and checkout page colors consistent. Play with your palette only to offer a visually seamless experience to buyers.
Here’s how Jimmy Choo plays with its simple white and black tones:
Here’s another example from HeadPhone Zone:
15. Keep the product thumbnails clearly visible
Imagine having to zoom into the cart page to get a visual of the product you just added. It’s annoying.
So make sure the size of the product thumbnail image is clearly visible alongside the details you add. This also gives the buyer a chance to cross-check and confirm the item they have added in the cart.
16. Include trust seals and reassuring elements
At the stage of making a purchase, pre-purchase anxiety might result in being worried about transacting online.
This is where trust seals and social proof comes in. Include logos of ‘secured by’ certificates on the cart and checkout pages. It is reassuring for the buyer!
Alternatively, you can also include a few media mentions of your brand and customer reviews. As consumers, we’re 80% more likely to trust recommendations coming from those in our network or those we look up to.
17. Offer purchase assistance
When making a purchase, most of us have a few pending questions in our mind. Some of us look for answers online and then make the purchase, some ignore those questions and deal with them later.
But then, there are some who base their purchase decision on the answers to those questions. This is why we recommend adding a live chat or get in touch button on your cart page. Let the buyer get their concerns addressed!
Designing your Shopify cart page and Shopify cart checkout
Remember, there is no one size fits all approach when it comes to design. The same holds true for the cart and checkout pages too.
You need to first understand your audience, how they interact with your Shopify store to make a purchase, and what you can do to offer them a seamless shopping experience. And you wouldn’t be able to nail it in one go; it’s a continual process of learning as well as optimizing your strategy.
This is where we come in.
Our goal is to help you set up impressive storefronts in an end-to-end manner. This does not just include designing a good-looking homepage or an engaging product page; it means we also look into the Shopify design of functional pages like your cart and checkout so that you can drive more conversions.
Think your Shopify cart page or Shopify cart checkout design needs an upgrade, or been noticing a high abandonment rate?
