Chapter 4 Personalize Your Cart Page

The cart page is a middle ground between choosing products and checking out. Personalizing cart pages can make it more likely that people will take the final move and press buy. 

But is any visitor to this page the same in terms of intent and behaviour? Well, it varies. People add a product to their cart for many reasons, and that does not always mean they have the intention to buy.

To personalize the cart page and convert as many customers as possible, understanding their intent and behaviour is critical.

Warm traffic – Save and compare the products

As people browse through product listings and details, comparing is a common practice. And though “Save” and “Wishlist” are the features commonly used to solve this problem, people prefer adding products to carts and using the cart page itself for comparison.

According to Baymard’s research on how users save the products they aren’t ready to purchase, 42% of users use cart pages as a save feature.

01-save-product
42% of online shoppers added products to their cart to save the products

Among that 42%, only 25% “return later”, which means that the rest have no intention of making a purchase or comparing products. These visitors use the cart page plainly for storage.

For these types of visitors, making product information clear and easy to process is essential to the browsing experience.

Product Summary (Information about the products being ordered)

Product Details – Include clear and detailed product information

Product details are all the information associated with the product. Normally, this information includes product images, product price, and other specifications such as product title, product description, etc.

Clear and detailed product information makes it easier for people to both review and compare the products. This is especially important when people are ready for checkout. 

By carefully reviewing the order, they reduce the risks of making mistakes, which frequently results in refunds, returns or needless frustration.

Provide large product thumbnails

When people add many products to carts, the cart page “accidentally” becomes another product listing page, where people scan and compare list items. People rely heavily on product thumbnails to fulfill this task. 

Thus, providing large product thumbnails is essential to smoothen visitors’ experience. This is especially true for visually-driven products.

02-product-thumbnails-wayfair-1
Wayfair.com’s cart page with decent product thumbnail images

For people who use the cart page as storage and come back after a long time, large product thumbnails also help the product identification and verification, even for spec-driven products like vitamins, electrical appliances or spare parts.

Include main specifications

The same applies to product specifications. For people who are comparing the items, including the main specifications allows them to quickly evaluate the products and determine which is the best for them. 

For visitors who return after a short time, the main product specification will complement the product thumbnails to remind them about the products.

 

03-core-specs-bh-photo-1
B&H Photo includes essential product specifications on its cart page
Provide a link back to the product details page

Regardless of what people use the cart page for, revisiting product detail pages is a fundamental need. Including links to product detail pages gives people instant access to product pages and helps them easily confirm product information.

04-include-link-to-product-page-1
Including links to product pages is fundamental for cart pages

Product Variant and Quantity – Allow visitors to edit the information

During the order review step, people might either change their mind or notice a mistake that makes them want to update their cart. 

In cases like this, being unable to update the cart instantly might become a huge frustration, as it means people must switch back to the product pages and start the whole process over.

Product variants and product quantity are updated most frequently and should definitely be editable.

05-edit-cart-llbean-1
L.L.Bean allows users to edit product quantity, remove items and edit the cart

Hot traffic – To final review the order before checkout

While 69.57% of visitors don’t make purchases upon landing on cart pages, some people are predetermined. Once people finish comparing the items in their cart, they quickly move on and review other information, in specific, product information and general order information. 

By optimizing the Product Summary, the product information becomes clear for both types of visitors to review and compare. So basically, to optimize the cart page for people to be ready to buy, reviewing general order information is essential.

Cart summary 

Before initiating the checkout process (which often includes filling out long forms), many people want to know about the cart’s total cost and the estimated delivery time. 

This information allows them to early determine if the cart meets their budget and time requirements, and not to waste time processing the checkout just to abandon the cart at the last step.

06-cart-summary-shipping-tax-1
Wayfair’s section to summarize the cart information

Shipping cost

While shipping cost varies by product and destination, there are many ways the shipping cost can be presented to be more reassuring. 

Display an actual lowest shipping cost

When a flat-rate shipping cost is applied, shipping cost for a specific area, time period or order value can be precisely calculated. Based on that, the lowest shipping cost can be used for orders that shipping cost is yet to be calculated.

Display an estimated shipping cost

Using an estimated shipping cost is the most common way to offer shipping cost before an accurate calculation. Estimating the shipping cost can be based on either the site’s most popular destination or the visitors’ location.

If the visitor is logged in and previously made purchases, their prior shipping cost is an ideal option for an estimated shipping cost.

07-est-shipping-cost-1
Walgreens includes an estimated shipping cost in the order summary
Display a range of lowest-possible shipping costs

If the estimated shipping cost is not possible, at least a range of shipping costs can help. Try to use the shipping method that is the cheapest-possible and provide people with a cost range of that method.

Display Free shipping information if any

If an item has free shipping, it is important to make it clear that the shipping cost is 0. This will save people from being confused about whether the aforementioned “Free Shipping” statement actually works.

08-rei-free-shipping-1
It’s important to mention the “free shipping information in the cart summary

Shipping time – Use “Delivery Date” instead of “Delivery Speed”

Oftentimes, when the delivery time says things like “Arrives in 1-2 business days”, people still cannot say for sure when they receive the products. This confusion forces people to use a calendar and calculate an estimated day when the product arrives.

09-arrives-in-2-business-days-1
The phrase “1-2 business days” indicates that weekend does not count, which adds more to the complexity of the calculation

By contrast, using an estimated or exact Delivery Date gets rid of all the confusion. People know at a glance when the order arrives and can focus completely on the shipping cost to compare the options.

10-best-buy-shipping-date-1
“Get it by Mon, Feb 24” – Not only make it clear about the Delivery Date, BestBuy styles the delivery date as a primary content so that people can easily notice.

Total price, taxes, and fees – Provide a clear total cost

Total price is used primarily for order with more than one item.

Regarding taxes and fees, in countries like the US, where the sales tax isn’t included in the display product price, being upfront about estimated taxes and fees is necessary to avoid “sneaky additional costs”.

Much like the shipping cost, taxes and fees can be calculated based on the visitors’ previous orders, IP geo-targeting or account information. When none of this information is available, providing the lowest-possible ranges for taxes and fees can also help.

11-total-prices-taxes-1
Always include total price, taxes, fees and an estimated total costs

Payment- Avoid confusing visitors with too many payment options

Only include static logos (without clickable links) of the payment methods to avoid distracting people.

When it comes to payment information, informing people about the payment methods available is important. This makes sure people can easily checkout with the payment methods they are most suitable with. 

However, allowing people to directly checkout with these methods is not a good idea. Too many checkout options might confuse people about deciding what’s the best option. Scientifically, this is called “choice paralysis”.

12-vpayment-options-1
Too many buttons can reduce the visual prominence of the checkout button

Within the scope of a cart page, people only need to be well-informed about the payment methods available. And this act of displaying the available payment methods must not affect the checkout button, which should always be visually prominent. 

Only displaying the static logos of these payment methods is the solution for this. People know that they have many options at checkout, and can checkout with no confusion.

13-asos-payment-options-1
ASOS uses small static logos to informs users about the payment methods accepted

Trust elements

Security badges – Ease people’s concern about card information security

Ensuring people with security badges is helpful not only on the checkout page. Given the fact that many people keep feeling uneasy about sharing card information, they can drop out way earlier and usually before reaching the checkout page.

Which site seal do people trust the most? According to Baymard, SSL seals are the winner. It indicates card information is secured and the website is free of cyber threats.

14-trust-seal-northen-tool-1
Research shows that SSL seal from Norton establishes the best sense of trust. Image: Northerntool.com’s shopping cart page.

Return policy – Make it clearly visible

Shopping online means people pay for a product without physically seeing and touching it. Due to this, being able to return a purchased item is an inseparable part of online ecommerce. 

A clear return policy gets rid of the concern about receiving unsuitable products. Especially for spec-driven products, a return policy contributes significantly to people’s decision whether to buy the product.

15-adidas-shipping-return-1
Adidas assures shoppers with free shipping and free return policy

Live chat – Be available timely to prevent cart abandonment

What happens if an error occurs and your checkout button doesn’t work? Chances are high that people will leave, because they just cannot checkout.

That’s just one example among many technical errors that can directly increase your cart abandonment rate. In fact, 15% of online shoppers abandon their cart because of website errors, which is too bad, because it can easily be prevented with live chat support.

Be available when your potential customers reach out for help. It’s a basic thing you can do to avoid needless cart abandonments.

16-livechat-abandonment-reason-1
15% of online shoppers abandon carts because of website errors
17-live-chat-build.com-1
Build.com’s live chat window on the cart page

Upsell/cross-sell – Recommend the right products

Not only does upselling boost sales, but recommending relevant products can also create a positive experience if the products meet the customer’s needs. Use the products in the carts as a basis and apply upsale/cross-sale techniques cautiously.

Cross-sell – Recommend related products

Cross-selling means suggesting related products that people might need. Many products go in a pair with one another. Without a firm intention and experience, people might not even know they need a product, until they see it.

Recommending products of the same categories, complimentary products, frequently-bought-together products are common ways of cross-selling.

18-upsell-cross-sell-best-buy-1
Try to recommend products the most relevant possible to the products added to the cart

Upsell – Recommend better options

Recommend products with more benefits and a higher price, if any. Sometimes, upselling turns out to be a favour by reminding visitors of the products they need but have already forgotten.

19-upsell-overstock-1
Overstock recommends Warranty Options in its upsell section

Additional offers

If there’s any offer that might encourage people to make purchases, include it within the order information. Loyalty programs, cashback, and gift cards are great options to choose from. Make sure your visitors are well-informed and can easily access these benefits.

20-loyalty-program
Best Buy’s cashback offer for visitors using My Best Buy Credit Card

Best shopping cart page designs for your inspiration

Check out the best shopping cart pages curated by Baymard’s Institute and learn how they apply the best practices to create the best customer experience.

B&H Photo

B&H photo dedicates a side column for shipping cost, taxes and an estimated full order cost and styles it coherently. Product information and product thumbnails are also presented clearly, making it easy to review the order and compare items.

21-bh-photo-cart
bhphotovideo.com

Wayfair

Along with product thumbnails, product information and the total order cost, Wayfair also pays considerable attention to the shipping information.

22-wayfair-cart
wayfair.com

Sears

Not only does it make the estimated total cost visible, sears.com makes it ever-visible with a sticky bar, which is a good practice and can be well-applied for carts with many products.

23-sears-cart
sears.com

Build.com

Build.com effectively leverages space to implement cross-selling. It also successfully applies the “Free Shipping” principle: Especially when the shipping cost is 0, it needs to be included in the order summary.

24-build.com-cart
Build.com

L.L.Bean

L.L.Bean makes it very clear that people can edit or remove items in the cart. The product information and product thumbnails are also presented very coherently. Both reviewing and comparing can be done easily and effectively.

25-LLBean-cart
llbean.com

Learn more

Credit: This guide uses research findings from the Baymard Institute’s e-commerce UX research.

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×