I've a problem with a two tab shopping cart. I'm working on a e-commerce which has both digital and non-digital products, if user adds both digital and non digital products to the shopping cart two separate tabs appears. I'm wondering how to solve this problem because user needs to go through the process two times.

I can't provide only 1-click payment like Amazon does for e-products. If there is no option to remove these tabs maybe is there any good example how to minimize the friction.

two tabs shopping cart

  • 1
    When you say "card", do you mean "cart"?
    – Matt Obee
    Sep 2, 2013 at 10:36
  • I would move to having both on the same page/area with headers for each and a summary at the bottom, it may be misleading to not show certain products to the user causing them to duplicate orders. Sep 2, 2013 at 11:08
  • Digital an non digital should go to same cart amazon don't give that option but oreilly.com put them in same basket. You could sort cart to regroup digital and non digital product for easy reading. In supermarket you have only one ticket with all the products, even if you buy food and soap.
    – ColdCat
    Sep 2, 2013 at 11:18

2 Answers 2


Even if you're not a clothing retailer, use tags.

Implementing tag-based sorting within your shopping cart can do the trick quite easily. This can equate to the UX for clothing stores - some retailers add "tags" to clothes to signify that it's "Mens", "Large", "Kids", etc. All of my items go to the same shopping cart, and I can (at all times) see which tags apply to which items. That way, if I accidentally added a "small" shirt, but wanted a "medium", I could have every reasonable opportunity to notice and correct this.

Adding a sorting option (the "Only" function) can further help sort the products and identify which is which, through the use of tags. Additionally, adding an icon to each thumbnail to alert a user that a product is digital (or physical - whichever is "less common") could help. Upon mouseover it would let the user know "This item is a digital-download".

The main idea here is to let customers have every opportunity to understand what a product is before paying for it.


download bmml source – Wireframes created with Balsamiq Mockups

  • Thanks for reply, but my main argument for two tabs is that I want to give a user chance to download faster his digital products. If there aren't any tabs and user adds some digital and non digital products to the cart he has to provide delivery address for physical products goes to the payment, pays for whole cart (digital +physical) and after that he could download digital products. If there are two tabs he could download digital products faster - no need to provide delivery address, but unfortunately he has to go through buying process two times. Sep 5, 2013 at 9:30
  • The point of using the tags is that if they only wanted digital, they could find their way to just the "Downloadable" products. While it might not be the easiest solution, coding in that digital products don't require a delivery address would be the better route. Something that says, logically, "If type = digital, then address required = no". A UX design is only as strong as the barriers put up that you work around... ;)
    – Arman
    Sep 5, 2013 at 14:53

Part of the question here is why it is currently two tabs. Is this a technical limitation or simply a solution for making it clear which items are digital and which are physical products? If it is the latter then you could use badges/icons to help identify which are downloadable versus those that require shipping. Perhaps even the image with the product can show the physical packaging for shipped products and digital always have a similar flat look. The simple difference between "3D" product images versus flat icons can make it obvious at a glance, but requires consistent product imagery to pull off. That is why a lot of sites will put an icon or banner across a product image to help differentiate. Then your checkout process simply needs to be clear about which items are being shipped along with delivery dates and your digital products need clear instructions about how they will receive their download links.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.