shopify cart page

Tips to build a high-converting Shopify cart page

Shopify cart page is not often considered an important factor when it comes to building an online store. A cart page is an important touchpoint in the e-commerce business because this is where you make money. A suboptimal cart page can make you lose a lot of money.

If you’re a big fan of shopping online and often go online to buy all kinds of products, the notification below might ring a bell.

“Your item is successfully added to the cart” 

Now imagine that every time you click “add to cart” the store automatically directs you to the cart page, isn’t it annoying? It’s one of the basic flaws that new stores often make. This “seems so small” mistake can make your potential customers turn away and never coming back again. 

This article will show you several easy tips that you can immediately implement to make your cart page convertible.

The importance of cart page in an online store

What is a cart page in an online store? 

An online shopping cart is a page inside your website that maintains a record of a shopper’s products from the online store. It does the same job as a store catalogue which helps the customers to choose the products that they wish to buy, reviewing the products, making changes to the products selection (including adding or removing products) and the most important, buying the products.

A recent survey estimates that the average eCommerce store loses over 75% of its sales over cart abandonment. The main reason is poor cart page optimization. Looking at it under the online shopper’s role and we’ll see many things that lead to the decision of abandoning the purchase: concerns about payment security, having to create a new account, unexpected shipping costs, couldn’t find a coupon code,…The number 75 suggests that most of the store owners do not care about their cart page enough.[1]

Reasons you should focus on building a great cart page

Reduce cart abandonment rate 

For people who don’t understand what the cart abandonment rate is and how to calculate it, this picture can help you. 

cart abandonment rate equation

For example, your store has 300 shopping carts initiated by online shoppers but only 100 carts were checked out. This would make your store have a cart abandonment rate of 1 – (100/300)x100 = 66%. What does this number tell? It tells you that 2 out of 3 times your carts were being abandoned. 

Cart abandonment rate is a big issue even for the most successful e-commerce store out there. As point out in the previous part, an average e-commerce store lose 75% of its revenues due to cart abandonment. And for some industries, this number goes as high as 83.6%. The biggest reasons customers abandon carts are listed below: 

  1. High additional costs (taxes, shipping, and other fees)
  2. Forced account creation
  3. Complicated, time-consuming checkout
  4. Inability to calculate total costs upfront
  5. Security concerns
  6. Slow delivery and limited shipping options
  7. Major website performance issues
  8. Inadequate return policy
  9. Lack of payment methods
  10. Excessive upselling
  11. Prices displayed in foreign currency
  12. Better pricing from other eCommerce sites
  13. Browsing and researching product
  14. No coupon code is available
  15. Site not mobile-friendly

If we take a quick look at it, there are some problems related to business metrics and cannot be solved within a website or a cart page. But many of these problems can be solved within a cart page and it’s pretty simple (1,2,4,5,9,11,14). If we can somehow manage to have an answer for these problems, the cart abandonment rate would drop significantly. Find out how to solve these problems in the next section of the article with some actionable, easy to apply tips. [3]

A well-designed cart page makes it easier for customers to shop online.

A poor-designed cart page can make you lose profit. One of the most simple things is the colour code, a clear, user-friendly colour code can make online shoppers have a positive experience with your brand and make your brand stand out. A thumbnail image with bright colour can make the customers see the product better.

sephora shopify cart page
Sephora’s cart page

Sephora uses an elegant yet efficient black and white colour code in order to clearly display the information on the cart page. The “Checkout” button stands out with the red colour which makes it distinguishable. 

Examples of stores that have a perfect Shopify cart page

skymall pop up lead to shopify cart page
Skymall’s popup

SkyMall offers a wide range of household furniture and other practical devices.

When you browse the product page and add a product to your cart, a small layer expand on the top of the page, you can choose to click “X” and continue shopping or jump straight to the cart page. This is a really handy feature and also convenient as you can continue shopping and know what’s the total cost and can “view cart” or “check out” anytime you want. 

skymall shopify cart page
Skymall cart page

The cart page is simple, clear and easy to use. The “Checkout” button is highlighted in red. Payment methods are included just below the checkout button and also an option to continue shopping which is really handy. The site also offers the online shopper the ability to calculate the shipping costs, this helps erase the inability to calculate total costs upfront and reduce cart abandonment rate. [4]

sephora offers free samples on their shopify cart page
Sephora offers free samples on their cart page

Sephora offers cosmetics and other skincare items, so it’s exceptionally vital to supply something that’s tangible to its clients. With these sorts of items, it’s not sufficient to see them; clients regularly need to feel them too.

To accommodate this, on their cart page, they add the “SELECT YOUR SAMPLE” button. When online shoppers click this button a list of free samples appear so that they can choose from it. 

Clients can select up to three free tests that are included in the cart beside the other items. This is often an awesome solution to supply value-add to clients and encourage them to undertake new items.

Some tips to create a high converting cart-page

Skip mandatory sign-up in cart-page

Customers are becoming wary of sharing information online more than ever. Despite this fact, there are still many stores out there still require their online shoppers to sign-up to their page to buy their products on the cart page. This just leads to their conversion drop significantly.

A case study by UIE points out that 30% of users abandoned their cart when they were asked to sign-up. This means losing customers. And most owners don’t realize it.

You cannot force someone to do something they don’t like, you have to persuade them naturally. Put away the “Register” button on the cart page. Instead, replace it with the “continue” button that leads to the checkout page. Just by applying this method, a business saw a  $300,000,000 raise in profit and the number of customers went up by 45%. 

You can also make the registration faster by giving the users multiple login options: Facebook, Gmail, Email, Twitter,… 

sephora sign-up on their shopify cart page
Sephora sign-up on the cart page

Sephora gives the users option to proceed to the checkout page as a guest. They also recommend signing up by adding rewards such as Free birthday gifts, sample rewards,…[2]

Play up Free Shipping, Free Returns

Online shoppers hate it when the final price that they have to pay surpasses the number you give on the cart page. In fact, the hidden cost is one of the main reasons visitors abandon their carts without purchasing. 25% of customers share that the reason they abandon the cart is due to the shipping cost. 

The most simple method for this problem is to remove the shipping cost. This may not be attainable for some businesses due to their specific product mixes. In this case, you have to think of other solutions to make the shipping fees more transparent. 

drunk elephant includes personalized message bar on their shopify cart page
Drunk elephant personalized message bar

Drunk Elephant employments a personalized message bar to let clients know they can bypass shipping expenses in case they meet a certain threshold. This is a great way to boost AOV (Average Order Value) by encouraging online shoppers to buy more. 


You can also add the shipping cost to the product value and remove the shipping cost. But in most cases, I would recommend adding a shipping cost calculator to help customer knows the final price.

AnaWhite adds a shipping cost calculator on their shopify cart page
AnaWhite adds a shipping cost calculator to let the customer know the final price

“Free returns” is also a strategy you can apply to build trust with your customers. Allowing them to try the product for free can make the customers feel comfortable with your brand. However, you need to consider carefully before implementing this strategy because sometimes it can cause much trouble and also make you lose profit. 

Add order note to cart-page

Remember the time when you shop online and having to manually call the shop owner to inform them about how you want your product to be delivered, wrapped,… now you can do it online. Nowadays it’s not only about the product quality or the price but also the service. If you can fulfil the customer’s most specific needs then they will come back again to buy the product from your store. Many eCommerce stores nowadays enable their visitors to leave an order note right on the cart page. So if your store doesn’t have this feature, it’s time for you to consider implementing it. [5]

AnaWhite includes order notes on their shopify cart page
AnaWhite uses order notes to collect special instructions from customers about how to prepare and deliver an order

Show related products

Using in-cart recommendations on the cart page does not guarantee an increase in conversion rate but it helps boost AOV (Average Order Value). A recent study suggests that successfully implementing this strategy can help you achieve an 11.2% uplift in purchases per session. 

For clients possibly curious about extra items but brief on time or less contributed in re-starting the discovery process, these quick and timely suggestions can cut out unnecessary steps and drive cross-sell revenue. 

However, if you don’t use this feature in the right way it may cause distraction and the customers may leave your website as it is “annoying”. Recommend only the most related products based on the items they added to the cart and try to make this section closable and doesn’t take too much space. 

sephora recommends related products on their shopify cart page
Sephora recommends related products on the cart page

Sephora includes the recommend related products feature on their Shopify cart page. This can help increases AOV (Average Order Value) but sometimes it can be distracting for the customers. Understand the problem, Sephora includes this feature at the bottom of the page and the customers won’t notice it if they don’t want to, very clever. 

Give users the option to continue shopping

Many customers use cart pages as a method to check the price and compare it to the price of other stores. They also use it as a “wishlist” to store future purchases because they might buy it later on not right now. 

Understanding the trend, a “continue shopping” option on a Shopify cart page is created as a smart way for customers to abandon their cart without having to leave the store.

The “continue shopping” option can be simple under the form of a button. The downside of this is that the customer still has to click this button every time they add a product to their cart to come back to the product page. I would recommend using the Shopify cart drawer so that they can easily shop without being interrupted midway through. 

Kettle And Fire shopify cart page uses cart drawer model
Kettle and Fire cart drawer

KettleandFire uses this type of cart to make their customers shop more conveniently. Online shoppers can add products to their cart and do not get directed to the cart page every time. They can continue shopping and choose to open the cart page by clicking the cart icon. 

Include trust seals and reassuring elements

A recent study by Econsultancy showed that trust seals are the single most essential feature to gain customers’ trust towards a website.

A study conducted by Actual Insights found that trust logos raised the perceived trustworthiness of a brand in 75 per cent of respondents. Results also showed that 61% of participants said they remembered a time when they decided not to complete a shopping cart because trust logos were absent.

trust seals
Include trust seals on the cart page is a great way to build trust

Learn more about trust badges here

Top 12 DIY Shopify customizations

Want to access more content like this? Feel free to grab the free eBook “Top 12 DIY Shopify customizations”. The ebook provides a step-by-step guide to do some of the most trending customizations by yourself.

Include payment methods

This will assist you to pick up more changes and also reassure guests that are familiar with a specific payment method.

In reality, it’s so essential that Control stated that 50% of normal customers would cancel their cart in case their favourite payment solution wasn’t accessible.

The reason behind this is that when people see a widely known brand it boosts their trust with the brand. When you include Mastercard, Visa, American Express,… as your payment options it will increase conversion rate because customers will be confident in buying your products.

BJJfanatics includes payment options on their shopify cart page footer
BJJfanatics includes payment options at the footer of their Shopify cart page

How to add these features to your Shopify cart-page

There are two main ways to add these features to your Shopify cart page: using Shopify apps and outsourcing. 

Apps

To add Shopify cart-drawer to cart-page you can use

Slide Cart ‑Sticky Cart Drawer by AppHQ

This is the best cart drawer app available on Shopify, loaded with all the features you need to enhance your customer’s experience. It works by replacing the default cart page with an on-page enhanced version. Slide Cart makes your cart accessible from anywhere on your site and looks great on any theme or design. 

shopify cart drawer app

Outsourcing

To show related products on cart-page or to add a shipping cost calculator to cart-page requires you to know HTML, CSS, JavaScript, and Liquid. Consider hiring a Shopify Expert if you’re not familiar with coding.

By editing the code, the experts can help you customize your product page features in the most flexible way. You should also consider using an outsource to add the above features because most of the apps require you to pay monthly and this can be costly in the long run. For hiring an outsource, you pay once and the team is there to help you forever. You save money and also save time because there are experts there to help you do the job!

Here are the greatest advantages of hiring a third party adding email newsletter forms to your Shopify store:

  • Make your store stand out by showcasing your uniqueness rather than relying on ready-made things like applications.
  • Ensure professional results: Shopify specialists will deliver a high-quality result.
  • Cost-effectiveness: Pay once and use it for the rest of your life
  • Reduce time consumption on technical jobs and focus on business operation activities such as preparing email marketing.
  • Support your business 24/7 ​for any needs of urgent assistance.

Conclusion

Building a great cart page is important in an eCommerce business to increase conversion rate and reduce cart abandonment rate. 

It’s time to implement the above techniques in reality. As a certified Shopify partner, HappyPoints are happy to assist you with:

Don’t hesitate to contact us if you have any further concerns.

Learn more about tips to edit shopify theme here

If you want to know more about useful customizations like this, feel free to grab the free eBook “Top 12 DIY Shopify customizations to drive sales”

Writing Reference 

[1]https://www.builderfly.com/how-important-is-a-shopping-cart-for-an-online-store-analysis/

[2]https://www.abtasty.com/blog/shopping-cart-optimization/

[3]https://www.barilliance.com/10-reasons-shopping-cart-abandonment/

[4]https://www.optimonk.com/10-impressive-ecommerce-shopping-cart-design-examples-online/

[5]https://help.shopify.com/en/manual/online-store/themes/os/customize/get-more-information-with-order-notes