I'm working on a checkout flow where a cart summary panel appears on the right hand side of the checkout form. We want the user to be able to remove a product, but due to legal and compliance reasons we also need to be able to show more information relating the product.

In saying that, there is a lot of information that needs to be shown against each product, so we want to hide it until the user reveals it. There can be anywhere from 1 to 3 products in the cart at once, so showing all the information rather than hiding it makes the summary too large and hard to read/scan.

We're exploring something like the below as I haven't found any similar patterns during my travels. We also looked at swapping the remove and hide/show buttons around so it was more of an accordion/collapsible panel pattern, but it didn't feel right.

My question is does an approach like this make sense? Or is there another way to solve that I'm missing?

cart summary

  • could a prodruct + its details fill the whole screen? Commented Apr 18, 2020 at 18:05
  • @AlejandroVeltri quite easily, on a smaller screen height some details would be below the fold and that’s just for one product.
    – dmcleod
    Commented Apr 18, 2020 at 19:47

1 Answer 1


You don't have a whole lot of options here.

  • The one you propose and it's variants
  • If you need to display a lot of data or allow many interactions inside the details, you could show them in a separate view, exclusive for the details, but it seems to be overkill in this use case.
  • Some kind of modal dialog, but on these times is kinda deprecated, with only a few exceptions which does not include this one.

So you're in the right path, I'd only try to fine tune your current design and then user test it with small variations to check if people find some annoyance/difficulty or just better flow in one of those. Some variants:

  • Keep the show/hide button in the same place (always above details instead of moving it to the bottom)
  • Also you could show the "hide details" both at the top (replacing the "show details" when clicked or tapped) and at the bottom. It doesn't add any relevant space or clutter and you get sure they always find the way to collapse it, whether they scroll/swipe up or down.
  • If the details usually get quite long in your target-users displays, you may consider floating the "collapsed/main" product container and the "show/hide details" action while the details are in the viewport, so they don't lose context.
  • 1
    Thanks for your detailed response. I like the idea of showing the ‘hide details’ in its original position and again at the bottom of the expanded panel. We’re also considering moving the ‘remove icon’ to sit within expanded panel, but it doesn’t feel right to hide the action. As for a modal, this is how the plan summary is brought up mobile due to lack of real estate, so we’re trying to avoid more modals.
    – dmcleod
    Commented Apr 18, 2020 at 19:57

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.