How to increase cart drawer width

[NOT1]

How to increase cart drawer width

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, 

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>
.drawer__inner {
    width: 52rem !important;
}
</style> 

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-B2B · Accepted solution]

@NOT1 , add this one to base.css file

.drawer__inner {
    width: 54rem !important;
}

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, Pls replace old code to this new code:

<style>
.drawer__inner {
    width: 52rem !important;
    padding-right: 30px !important;
}
</style> 

[dws_pvt_ltd · Accepted solution]

Hello @NOT1 Please follow these steps to add this CSS code:
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your component-cart-drawer.css CSS file.
5. Update the following code at the end of the file.

Find the CSS with class ".drawer__inner" and set width of drawer as you want.

.drawer__inner {
    height: 100%;
    width: 50rem; /* update this CSS */
    max-width: calc(100vw - 3rem);
    padding: 0 1.5rem;
    border: .1rem solid rgba(var(--color-foreground), .2);
    border-right: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translate(100%);
    transition: transform var(--duration-default) ease;
}

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, 

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>
#CartDrawer .cart-item__name +.product-option {
    display: none;
}
</style>

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]

Pls remove commas in file cart-drawer.liquid: 

[BSSCommerce-B2B · Accepted solution]

@NOT1 , use this code

.quantity-popover-container {
  max-width: 12rem;
}

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, 

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>
quantity-input.quantity.cart-quantity {
    min-height: 43px !important;
    max-width: 112px !important;
}
</style>

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 @NOT1, 

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>
.drawer__inner {
    width: 52rem !important;
}
</style> 

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 😍

[NOT1]

How can i change the total price padding to -30px

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, Pls replace old code to this new code:

<style>
.drawer__inner {
    width: 52rem !important;
    padding-right: 30px !important;
}
</style> 

[NOT1]

How can I remove the price under the title which is at grey color 

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, 

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>
#CartDrawer .cart-item__name +.product-option {
    display: none;
}
</style>

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 😍

[NOT1]

how can i remove the commas

[BSSCommerce-HDL · Accepted solution]

Pls remove commas in file cart-drawer.liquid: 

[NOT1]

how can i decrease the box size of quantity

[BSSCommerce-B2B · Accepted solution]

@NOT1 , use this code

.quantity-popover-container {
  max-width: 12rem;
}

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, 

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>
quantity-input.quantity.cart-quantity {
    min-height: 43px !important;
    max-width: 112px !important;
}
</style>

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 😍

[NOT1]

How can  i put the price at the same line as the quantity card

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, 

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>
#CartDrawer .cart-item {
    position: relative;
}

#CartDrawer td.cart-item__totals.right {
    position: absolute;
    bottom: 20px;
    right: 0;
}
</style>

 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-B2B]

@NOT1 , to remove the price under the title which is at grey color use this code

.cart-item__details > .product-option {
   display: none;
}

Result:

[BSSCommerce-B2B · Accepted solution]

@NOT1 , add this one to base.css file

.drawer__inner {
    width: 54rem !important;
}

[BSSCommerce-B2B]

@NOT1 , to remove the price under the title which is at grey color use this code

.cart-item__details > .product-option {
   display: none;
}

Result:

[dws_pvt_ltd · Accepted solution]

Hello @NOT1 Please follow these steps to add this CSS code:
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your component-cart-drawer.css CSS file.
5. Update the following code at the end of the file.

Find the CSS with class ".drawer__inner" and set width of drawer as you want.

.drawer__inner {
    height: 100%;
    width: 50rem; /* update this CSS */
    max-width: calc(100vw - 3rem);
    padding: 0 1.5rem;
    border: .1rem solid rgba(var(--color-foreground), .2);
    border-right: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translate(100%);
    transition: transform var(--duration-default) ease;
}

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.