Make "Drawer" cart style full height

[nativesons]

We are currently using the "Drawer" style cart on our Shopify store but it only seems to be taking up a portion of the designated space cutting off any longer list of items.

How would we edit this to make it full height instead of having the bottom portion be the blank space?

Our URL is: https://native-sons-roasters-3430.myshopify.com/

[BSSCommerce-HDL · Accepted solution]

Hi @nativesons, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
.ajax-cart.ajax-cart--drawer .ajax-cart__form {
    max-height: 100vh !important;
}

#theme-ajax-cart.is-drawer {
  overflow: hidden !important;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @nativesons, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
.ajax-cart.ajax-cart--drawer .ajax-cart__form {
    max-height: 100vh !important;
}

#theme-ajax-cart.is-drawer {
  overflow: hidden !important;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[ZestardTech · Accepted solution]

Hi @nativesons 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > styles.css and paste this at the bottow of the file:

.ajax-cart.ajax-cart--drawer .ajax-cart__form {
max-height: 100vh !important;
}
#theme-ajax-cart.is-drawer {
overflow: hidden !important;
}