Change quantity selector and delete icon position in DAWN

Store Design
, ,
1

Hello.

So, I recently changed my cart drawer style and added custom code, but I don’t like the way the quantity selector and delete icon location.
Can someone help me find a way to place them as it shows in the image?

Or just remove the extra space.

Thanks

www.blankstudiocy.com

trt4t4www.PNG
trt4t4www.PNG953×893 88.6 KB

2

@StudioBlank

yes can you please confirm this look!

KetanKumar_0-1718520658109.png
KetanKumar_0-1718520658109.png1920×922 91.6 KB

3

This is Noah from PageFly - Shopify Page Builder App

Hi @StudioBlank To do that you need to change the structure in the cart-drawer file. You can contact theme support for support or you can send me the source code image so I can help you.

Best regards,

Noah | PageFly

4

Sorry for the late reply.

I’ve redesigned the cart drawer and now I just need a “Remove” text under the product.

Like this.

www.blankstudiocy.com

reg.PNG
reg.PNG1901×881 87.4 KB

5

@StudioBlank no rush thanks for update can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-cart-drawer.css ->paste below code at the bottom of the file.
.cart-drawer .cart-items .cart-item__quantity {
    position: absolute;
    left: -105px;
    bottom: -30px;
}
.cart-drawer .cart-item {
    position: relative;
    margin-bottom: 30px;
}
.cart-drawer .cart-item:last-child {
    margin-bottom: 30px;
}

KetanKumar_0-1718693274770.png
KetanKumar_0-1718693274770.png1920×919 85.5 KB

6

Hello,

Sorry for the delay.

Yes, but I don’t want the trash icon, I want text that says " REMOVE"

Also, if it’s possible to add the quantity selector on the right side like this.

reg.PNG
reg.PNG1878×884 155 KB

This is basically my final cart drawer design.

I will really appreciate it if you could make it look like the image above and make it work for mobile also.

I’ve been working on the cart drawer for a very long time, and I still can’t figure it out.

7

@StudioBlank yes its possible to make more customization code