Design an engaging cart page

Business Benefits

Increase the likelihood of checkout.


Add visual assets that draw the user’s attention to the next step in the checkout process.

These assets may include

  • Icons.
  • Images.
  • Logos.
  • Visual flourishes.

Refer to your design guidelines to ensure consistency with the brand and the rest of the product experience.

Add an express checkout option for returning customers.

Express checkout can utilize previously stored shipping and payment information to increase the rate of checkout. By reducing the amount of customer information needed and the number of clicks a customer must complete, you create a more effortless and expedited checkout experience that increases conversions.

Most payment gateways allow you to turn on express checkout, including, WooCommerce, PayPal, and Stripe. For an optimal express checkout, refer to your payment gateway’s tutorials and activate the following features:

  • Display the product and payment details.
  • Autofill customer information.
  • Use Google Maps API for automatic completion of the customer address.

Add in-focus product images of square dimensions on a clean white background.

If possible, a lightbox should be used in place of cleaning up the image background with editing software. It’s also important to make the product the primary subject of the image. For example, an image of a t-shirt is more concise to the cart experience than an image of a model wearing that t-shirt.

Remove distractions, links, and content that’s not related to the customer’s order.

As a guiding principle, avoid giving the customer a chance to change their minds or leave the checkout page. Only include the bare essentials on the cart page and verify that every icon, graphic or line of text is either checkout instructions or a guide to moving through the cart funnel.

Restrict product details to a product name, and less than three bulleted attributes that are less than 20 characters to maximize negative space.

Attributes may include:

  • Model.
  • Color.
  • Size.
  • Size Type.
  • Compatibility.

Simplify order, shipping, and payment details to include only the most basic and relevant information.

One way to evaluate simplicity is to imagine your cart page without table or cell borders. Would customers be able to differentiate between elements? Would they still be able to complete the checkout?

Number your checkout steps to set expectations.

Aim for 1-3 steps as part of your total checkout flow. If your checkout process requires collecting a lot of information, consider splitting up your checkout process:

  • Page 1 of the cart shows a summary of the products they selected and the total price.
  • Page 2 collects customer information and shipping information.
  • Page 3 requests payment information.

Showing the customer where they are in the overall process helps motivate the customer through your checkout process.

Highlight qualifying customer discounts.

If multi-quantity discounts are available, promote these offers alongside product quantity in the order summary.

Implement free shipping or promotional discount countdown timers.

These timers will establish urgency and encourage customers to complete checkout within a given period.

Install a behavior analytics tool to identify specific parts of your cart page that engage or don’t engage users.

Heat maps, real-time cart data, and website analytics tools identify which parts of a page attract the most attention. These tools also help identify where customers drop out of the checkout process. As part of this analysis, it can also be helpful to conduct A/B tests to determine which aspects of the cart page are most important to your customers. Consider A/B testing the following:

  • Single page checkouts versus multiple page checkouts: Which leads to more conversions?
  • Promoting upsells and multi-quantity discounts: Does this affect the total number of orders? Does this increase or decrease total order value?

Last edited by @hesh_fekry 2023-11-14T12:20:40Z