I've been trying to figure out how to have the Order Summary at the checkout page expanded on page load.

I attempted many approaches, all of which failed.

  • Please provide additional information where specifically you want something to happen. Also highlighting what approaches you tried so far will help in so far that no one will suggest you try the same. Jun 18 '16 at 17:51
  • Did you get any solution for this? Aug 31 '16 at 8:31

The full list of options for the collapsible widget can be seen on the dev docs here.

Finding the code

Navigate to vendor/magento/module-checkout/view/frontend/web/template/summary/cart-items.html and look at line 8 (on 2.1.1 at least), it should look like so:

<div class="block items-in-cart" data-bind="mageInit: {'collapsible':{'openedState': 'active'}}">

Copy the file into your theme

As we don't want to edit the core we need to copy this file into your theme, so duplicate it and move it to:


Set the collapsible widget to be active when initialised

Now you can pass the active option ('active': true) to it. So the full line should be like so:

<div class="block items-in-cart" data-bind="mageInit: {'collapsible':{'openedState': 'active', 'active': true}}">

Now clear your caches, pub/static, and var/view_preprocessed. You should hopefully have an open cart summary when the widget is initialised.

  • It looks like you're missing some code. So the full line should be like so:
    – Cam
    Dec 13 '16 at 14:47
  • @Cam Your code isn't displaying :(
    – Ben Crook
    Dec 13 '16 at 15:15
  • LOL. That's what I was trying to tell you about your answer. Anyway, it should look like this: <div class="block items-in-cart" data-bind="mageInit: {'collapsible':{'openedState': 'active', 'active': true}}">
    – Cam
    Dec 13 '16 at 17:55
  • 1
    I don't even have an excuse for that, I'm just stupid haha. I've sorted it now, thanks for pointing out
    – Ben Crook
    Dec 14 '16 at 9:25
  • Should that be app/design/frontend/**VENDOR**/**THEME**/Magento_Checkout/web/template/summary/cart-items.html? (note the added summary). Apr 9 '17 at 15:25

My solution is Css:

// force minicart on checkout to be open
.minicart-items{display:block !important}
.product-item-details .content{display:block !important}
  • This is not a bad solution if you want it to be expanded always, not collapsible at all. I gave this a +1 for thinking outside the box and using all available options. Sep 11 '18 at 13:00

in cart-items.js, I updated the return value for this function:

    isItemsBlockExpanded: function () {
        return true;

Go To Admin Content->Configuration and select your theme then edit.Under footer tab add this Css.You can either add it in css file. Thats it.

.content.minicart-items {
    display: block!important;

On Magento 2.3.x you can change your html template from:

<div data-mage-init='{"collapsible":{"openedState": "active", "saveState": true}}'>


<div data-mage-init='{"collapsible":{"openedState": "active", "active": true}}'>

hope can help someone on new magento installation :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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