Website shopping cart design: step by step instructions for registration

How to design a shopping cart to increase the conversion rate and average order of online store? What are the elements that influence the effectiveness of this shopping cart website design? What are the approaches to designing it? Below you will find 5 steps to optimize the cart with illustrative examples and mistakes to avoid.

Step 1. Choose the shopping cart website design: a pop-up or a separate page

There are two basic approaches to the shopping cart website design: a separate page and a pop-up.

A pop-up shopping cart  has already become a trend, because in this case the number of steps to checkout is reduced. Such a cart type mainly serves as a confirmation of the customer’s actions. This option works well for fashion e-commerce websites, as well as for online stores with a little number of products.

‍‍

The downside of such a cart design is that it doesn’t always let you effectively present your cross-sell and upsell offers. However, these tools are often implemented in the product card and work quite well there.

It is reasonable to create a separate page for the cart:

• When it’s a big store with a large assortment of products. In this case, users often purchase several goods at once, so they should have a chance to double-check the order before placing it.
• When the goods are expensive. These are usually not one-click purchases, so the shopping cart page should contain as much information about the product as possible, in order for the user not to return to the previous step before completing the order.
• When you want to implement full-featured cross-sell and upsell blocks with categories, if there are related products.

Step 2. Define the essential elements of the shopping cart

Please mind these 6 elements and make sure to use them correctly when designing the shopping cart for your online store.

• Product information

Information that should be provided in the shopping cart:

• Product photo. The product image should be the same as in the catalog.
• There should be an option of navigating to the product card from the cart.
• Size, color and item ID. Ideally, there should be an option of making changes right in the cart.
• Tell the user about limitations and specify the available quantity of goods in stock. Always display up-to-date information to avoid situations where, for example, your customer orders 3 packs of razor blades, and there are only 2 in stock. You don’t want him/her to hear it from the manager, especially if the order has already been paid.

• Deleting/retrieving the products and Favorites

Provide users with an option of retrieving the deleted items in case the product was removed by mistake. Give them a chance to get it back quickly without having to look for it in the catalog again (for example, the product is not removed immediately and there is a button to return it back to the cart).

When the user removes a product from the cart, offer an option of adding it to “Favorites”. Maybe the customer decided not to buy this item right now, but will want to get back to it in the future.

• Easy-to-understand buttons

Make sure to have the "Continue shopping" button in the website shopping cart design. Maybe the customer would like to add something to the order.

It is also a good idea to apply the principle of the expected result, i.e. instead of the usual "Next" button better use the "Place Order" one, etc. Thus, the customer will know exactly what awaits him/her at the next stage.

• Bonuses, promotions and promo codes

If the product is purchased at a discount price, or bonus points/promo codes are applied, provide detailed information about how the final order amount is calculated. Specify where exactly the discount is applied and what is included in the set.

Give your customer an opportunity to choose not to use bonus points or promo codes, so that he/she could select the best deal in case there are several special offers involving the same product, or he/she has a promo code with a bigger discount.

Specify how many bonus points the user will get for the purchase while he/she is still in the cart.

• Information about additional costs

Never hide additional costs (for example, for the delivery of goods). If shipping is free for orders from a certain amount, provide this information to the customer.

• Cross-selling and upselling

You can and should use the cross-sell and upsell tools in the cart. Provide your customers with an opportunity to add related products, additional services or consumables without leaving the shopping cart.

Once the customers get to the cart, they can be offered to add gift wrap or a related product to the items they are buying. For example, while working on the Mon Amie project, we noticed that around 40% of the customers are men making presents for women. That’s why when our customers get to the cart, they are offered to buy gift wrap. Thus not only did we solve the business objective to increase average order value, but also addressed the customer’s needs.

Step 3. Adapt website shopping cart design to mobile

The design principles and basic elements of the cart remain the same, but how to fit it all into a small screen resolution?

The products take up the entire first screen and if there are more than two or three of them in the cart, one would need to scroll down to the end of the screen to see the order amount. Besides, with this format there might be some difficulties with cross-sell and upsell tools. One way to solve this issue is to place a sticky menu at the bottom of the screen.

Step 4. Avoid common mistakes

To reduce your cart abandonment rate, try to avoid common mistakes that are often made still during the design process:

1. The product takes up the whole page, the customer can’t see the price and/or the total order amount and has no idea what to do next.
2. To get information about the total order amount the user has to scroll down to the bottom of the page.
3. The checkout button is not on the first screen.
4. The quantity of goods is not displayed and/or there is no option of editing the quantity.
5. There is no price per unit, only the total amount.
6. No discount displayed.
7. The cart is not automatically updated.

If your cart abandonment rate is high, this issue should be tackled. One way to get your customer back is to remind him/her that he/she still has products in the shopping cart via remarketing or email. Another way is to prevent him/her from leaving the page by eliminating usability errors.

Step 5. Experiment!

There are many types of pop-ups and shopping cart designs that will help you engage the customer.

• Visible add-to-cart actions

Add the animation of moving the product to the website shopping cart design when the "Buy" button is pressed to visually confirm the action and guide the customer to the next step.

• Creative animation

Unusual location or non-standard appearance of elements can attract attention and speed up the checkout.

However, when experimenting, don’t forget about usability. No matter how creative, the website shopping cart design should be in line with the style of the main site, clear and easy-to-use for the customer.

So what is better for website shopping cart design – a pop-up or a separate page?

There is no definite answer to this question. If you opt out of a separate page for your shopping cart, the user path to checkout is significantly reduced. If you look at the Intertop case, you will see that this approach helped increase conversion by 55%. On the other hand, by creating a full-featured cart page, you can increase the average order value. In the case of Mon Amie, cross-sell and upsell tools presented on the cart page increased the average order value by 1.7 times.

Both options actually work. Project analytics data and business goals will help you choose the one that suits your website better. But regardless of the approach chosen (separate page or pop-up), it all comes down to one idea: the website shopping cart design cart should be so simple and clear that the customers can get what they need as soon as possible.

‍