Make cart scrollable on phone

[mich706e]

Hello guys, i added the express checkout icons to my my cart-drawer. It looks weird on mobile, because the icons always are visible. Is it possible to make the whole cart drawer scrollable on mobile? So like scrolling from the cart items down to the checkouts icons?

And is there a way to make the checkout icons a little smaller?

[mich706e]

So, you want money to do this? 

[namphan]

Hi @mich706e,

I checked and didn't find the buttons, can you send me the preview link showing it? I will check again

[mich706e]

Hello i added the buttons back now, i removed them before because it didnt look good:)

[namphan]

Hi @mich706e,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.dynamic-checkout__content {
  max-height: 150px;
  overflow-y: scroll;
}
.paypal-buttons,
.accelerated-checkout-button {
  max-height: calc(4.5rem + var(--buttons-border-width)* 2) !important;
}
shopify-google-pay-button {
  max-height: 4.5rem !important;
  display: block;
}

[mich706e]

Hello thanks for the help - but this is not what i meant. By doing this, the checkout options are scrolling - basically i want the whole cart drawer to be one page, where i can scroll up and down. Can you please PM me? So i can give u a link with a website that has the option 😄

[namphan]

Hi @mich706e,

Please change all code:

.drawer__inner {
    overflow: auto !important;
}
cart-drawer-items {
    overflow: initial !important;
}

[mich706e]

hey this doesnt seem to work,, its like the background is scrolling instead of the drawer

[namphan]

Hi @mich706e,

I checked and you added scroll to body that's why it always scrolls and you get this feeling.

Please remove it at theme.liquid file, it will work fine. Refer:

[mich706e]

what do i remove exactly ? I cant find anything with "overflow" or initial

[namphan]

Hi @mich706e,

It seems to be added by JS code, can I send you a collaborator invite? I will help you check it