How to increase cart drawer width

Store Design
1

How to increase cart drawer width

1 Like
2

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 tag:

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 :heart_eyes:

3

@NOT1 , add this one to base.css file

.drawer__inner {
    width: 54rem !important;
}
4

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

1 Like
5

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

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.

7

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

1 Like
8

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 tag:

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 :heart_eyes:

9

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

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

Result:

BSSCommerceB2B_0-1726754913818.png
BSSCommerceB2B_0-1726754913818.png451Ă—921 31.7 KB

10

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

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

Result:

BSSCommerceB2B_0-1726754913818.png
BSSCommerceB2B_0-1726754913818.png451Ă—921 31.7 KB

11

how can i remove the commas

1 Like
12

Pls remove commas in file cart-drawer.liquid:

BSSCommerceHDL_2-1726756033624.png
BSSCommerceHDL_2-1726756033624.png1666Ă—767 114 KB

13

how can i decrease the box size of quantity

1 Like
14

@NOT1 , use this code

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

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 tag:

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 :heart_eyes:

16

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

1 Like
17

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 tag:

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 :heart_eyes: