.svg)
Consider just using a sidecart
This serves the same purpose and enables users to see the order totals and make adjustments faster and more conveniently.
Have the following sections covered
The site-wide pre-header
A great place where to introduce information about delivery, returns, and unique selling points! Make sure the Return policy is clear, visible, and friendly.
The cart minimized header
Show a back option, cart title (and amount of items in the cart), cart sharing options (via social and via email or URL), and support contacts! This will provide a great deal of value for your users. As a bonus show a success state as soon as an item has been placed in the cart!
The delivery progress bar
Push people to add more to the cart, and show a Free delivery threshold progress bar! How much does the user have to add to the cart to get free shipping - show it visually (You are €9.00 away from free shipping!)
The payment options
Promote and show the key payment methods people can use and boost trust and authority.
The cart items
The item(s) the user has in the cart: Thumbnail (link to product), brand, the product title (link to product), variation selected, price, save for later (add to wishlist), price incl. discount and saving if any, edit quantity (+ - and also freeform numerical input) and remove the item from the cart - and separator if more than one items in the cart.
The saved items
If the user has added something to the wishlist and saved it for later, show a section on the sidecart, so the user can quickly add more to the cart!
The redeem a coupon
Present a compact and minimal call to action to redeem a coupon or a gift card, which will lead the user to a dedicated slide-in view. These allow people to enter the code in the input and show clear validation of success and error. As a bonus, you can present available coupons too to push new visitors toward sales faster. Make it simple to remove the promotion and add it right back too for extra points!
The shipping calculator
Present a compact and minimal call to action (incl. time and cost estimate) to open up the shipping costs and calculator view slide-in. Once opened allow the user to choose the destination (country or county, zip, etc you use) and show the free shipping progress bar too. Top up the emotions by showing around three benefits to indicate why your shipping is so good for the user or environment. After the user has made changes, show the updated cost estimate immediately, and later reflect the selection to checkout too. Enable a clear path to return to the previous screen and to update the costs.
The order summary
Always show a clear and accurate overview of the costs ahead, including shipping, taxes, product totals, discounts, and order total to pay.
The sticky call to action bar
Especially on mobile, keep the bottom of the screen for calls to action such as Back and Proceed to checkout together with the total to pay amount. It helps users to proceed faster to checkout.
The pre-footer: The payment options
Showcase different options people can use to pay, and bet big on buy now and pay later options. Make people trust you more, and help them get products faster and more conveniently.
The bonus checklist
The “please avoid” checklist
Avoid poor page speed
One two three four five six .... Bye-bye. Speed equals money in your pocket. Remember that, keep your Google page speed index above 90 on desktop and above 70 on mobile.
Avoid poor design, bad use of colors, and low contrast
It has been proven with research, that every 1 USD you invest in design and user experience improvements brings back 100 USD on average (https://tinyurl.com/wunderfront). Do not underestimate design, first impressions, and color psychology. Keep navigation and call to action of high contrast.
Avoid reinventing the wheel
Instead, use plugins, and ready-made software to cover these core guidelines.
Emptying the cart and instead keeping the cart session alive as long as possible
Users often add items to their cart and return to them at a later time. You will miss out on some purchases because the items disappear from the cart unexpectedly for the users.
Too prominent ads and promotions inside the cart
Help people to make the purchase, and better try to upsell right after the purchase or via email marketing automation.
.webp){kind=logo}
.png){kind=logo}
