Cart and checkout · 11 Nov 2026 · 7 min read
Shopping cart page: what to show and what to leave out
The cart is where interest turns into a decision. This guide covers what belongs on a shopping cart page, how to ease the hesitation that happens there, and when a drawer works better than a full page.
The short answer
A shopping cart page should show each item with its image, name, options, quantity and line total, then the subtotal, an estimate of shipping and tax, and one clear button to checkout. Let shoppers change or remove items without leaving the page and keep distractions low. A full page suits most stores; a drawer suits small, quick baskets.
The job of a shopping cart page
A shopping cart page has four jobs: confirm what is in the basket, show what it will cost, remove remaining doubts and send the shopper to checkout. Everything else is optional and should earn its place.
The cart is also the first page where the shopper sees the whole order as one thing. On the product page they judged one item. Here they add it up. A surprise at this point, whether in price, delivery or availability, is hard to recover from, so the cart should repeat the facts they already accepted and add nothing unexpected.
Some visitors use the cart as a saved list or a price check and never intended to buy that day. A leaving shopper has not always rejected you, which is why changes to the cart page should be judged by what they do to completed orders, not by the number of people who stay.
What a shopping cart page should show
| Element | Why it is there | Common mistake |
|---|---|---|
| Image, name and chosen options | Confirms the right item, size and colour | Thumbnails too small to recognise, or options missing |
| Link back to the product | Lets the shopper recheck details | Link opens a new page and loses the basket |
| Quantity control and remove button | Lets the shopper correct the order without leaving | Remove is hidden or needs a confirmation page |
| Unit price and line total | Shows how the total is built | Only a grand total, so discounts cannot be checked |
| Subtotal, shipping and tax estimate | Answers what it will really cost | Costs appear for the first time at the last step |
| Delivery timing | Sets expectations before payment | One generic message for items shipped from different places |
| Promo code field | Serves shoppers who hold a code | A large, bright box that sends everyone off to search for codes |
| Checkout button | Moves the shopper on | Competing buttons of the same weight |
| Returns and payment reassurance | Reduces last-minute doubt | Long policy text instead of a short summary and a link |
Keep the order of these elements the same on phones and desktops, so the checkout button is never lost below a long list of suggestions.
Show the total cost before the shopper has to ask
An unexpected extra cost is one of the commonest reasons for leaving, so give an estimate of shipping and tax in the cart. If the cost depends on the delivery country or address, ask for it in the cart with a short field, or say plainly what the final step will add.
Tax display differs by country. Some shoppers expect prices to include sales tax or VAT, others expect it added at the end, and the rules for your products and destinations are for your accountant to confirm. Pick one clear presentation and use it everywhere. If you sell to several countries, the guide to selling internationally from an online store covers currency, duties and delivery questions the cart has to answer.
Where you offer free delivery above a minimum order, a single line in the cart that tells shoppers how far they are from it is enough. Do not turn the cart into a banner wall.
Cart page or cart drawer
A full page suits most stores. A drawer, which slides over the current page, suits stores where baskets are small and quick. Many stores use both: a drawer when an item is added and a full page for review.
| Question | Full cart page | Drawer |
|---|---|---|
| Room for shipping estimates, notes and gift options | Plenty | Limited |
| Keeps the shopper browsing | No, they leave the product list | Yes, they stay where they were |
| Suits baskets of one or two simple items | Works, but adds a step | Good fit |
| Suits complex baskets with variants and bundles | Good fit | Cramped on a phone |
| Accessibility work needed | Standard page behaviour | Needs focus control, a close button and keyboard support |
| Easy to link to or share | Has its own address | No address of its own |
On a phone, a full-height drawer behaves like a page and loses the benefit of staying in place. Judge it on the device most of your visitors use. Your platform may already decide this for you, and changing it can mean theme work or a custom build.
Doubts that stop people at the cart
Most hesitation at the cart falls into a few kinds, and each has a practical answer.
- The shopper does not know what delivery will cost or how long it will take. Show an estimate and a delivery window you can keep.
- The shopper is unsure they can send the item back. Put a one-line returns summary beside the checkout button, linked to the full policy.
- The shopper expects to be forced to create an account. Say that guest checkout is available.
- The shopper is worried about paying on the site. Show the payment methods you accept and any real security signals you have, in small and calm form.
- The shopper has a code and cannot find where to enter it. Keep the field present but modest, so it helps those with a code without inviting everyone else to go hunting.
- The shopper wants to compare. Let them save the cart and return, or move items to a wishlist if your platform has one.
Delivery dates and stock must be honest
If every item ships from your own stock, one delivery line is enough. If some items come from a supplier who sends directly, the cart should say that the order will arrive in more than one parcel and give each estimate. The guide to dropshipping versus holding stock explains why the two models behave differently in the cart.
When an item has become unavailable since it was added, tell the shopper in the cart, next to that item, with the choice to remove it or save it. Do not let them reach payment and fail there. Low-stock messages are fine only when they are true.
Suggestions on the cart page
A small number of relevant add-ons can raise the order value, but the cart is a poor place for a long carousel. The shopper has already decided; anything that pushes the checkout button down or confuses the total costs you orders. Show one short row of items that clearly belong with what is in the basket, and keep it below the main action on mobile. The guide to upselling and cross-selling for online stores covers how to choose them.
The empty cart and the saved cart
An empty cart is a page too. It should say the cart is empty, give a link to the main categories and, for signed-in visitors, show saved items. A blank page with no next step ends the visit.
Returning visitors should find their basket where they left it, whether through the browser or an account. Saving across devices needs an account or a sign-in link, so decide whether that is worth asking for. Emails that remind shoppers about a basket are a separate topic from the cart page and depend on consent rules in each country.
Carts on phones
On a phone, the cart is cramped. Buttons need space around them so a thumb does not press the wrong one, a sticky checkout button helps when the basket is long, and number fields should open a numeric keypad. Test with one hand. The guide to mobile checkout tips for online stores continues from here into forms and payment.
How to test your cart page
- Add one item, then several, with options, and check the cart shows what the product page promised. The ecommerce product page checklist is the first place to check that price, variant and delivery wording match.
- Change quantities up and down, remove the last item and look at the empty state.
- Try an invalid code, an expired code and a valid one.
- Switch the delivery country and watch what changes.
- Put an item out of stock in the test store and see what the cart says.
- Use a phone on a slow connection and complete the path one-handed.
- In your analytics, compare how many visitors reach the cart with how many go from there to checkout, before and after each change, and change one thing at a time.
Cart pages are not usually meant to appear in search results, and your platform probably handles that already. For the design and build work behind a cart, the ecommerce solutions page describes what Liftup Technologies builds.
Related guides
- Ecommerce solutions
- Upselling and cross selling for online stores
- Dropshipping vs holding stock
- Ecommerce product page checklist
- Mobile Checkout: Practical Tips for Online Stores
- Website contact forms best practices
Questions and answers
What should a cart page show?
Each item with its image, name, chosen options, quantity and line total, then a subtotal with an estimate of shipping and tax. Add delivery timing, a short returns summary and one clear checkout button. Let shoppers change quantities or remove items without leaving the page.
How do I reduce cart abandonment on this page?
Remove surprises: show shipping and tax early, give honest delivery dates and offer guest checkout. Keep the checkout button prominent and the page free of distractions. Then test one change at a time and judge it by completed orders.
Should the cart be a page or a drawer?
Use a full page when baskets have variants, notes or delivery choices, and a drawer when baskets are small and quick. Many stores use a drawer on adding an item and a full page for review. Check the drawer works with a keyboard and on a phone.
Should I show shipping costs in the cart?
Yes, as an estimate at least. If the cost depends on the country or address, ask for that in the cart or state clearly what checkout will add. A new cost at the final step is a common reason for leaving.
Do I need a promo code box in the cart?
Only if you issue codes. Keep it small, so shoppers who have one can use it, and so those without one are not prompted to leave and search for a code.
What should an empty cart show?
A plain message that the cart is empty, links to the main categories, and any saved items for signed-in visitors. A blank page with no next step ends the visit.
Should the cart page keep the site menu?
Usually a trimmed menu works: logo, search and a way back to shopping. A full mega menu competes with the checkout button. Test it on your own store.
Tell us what you are building.
A short call, a written plan and a fixed quote. No obligation.