How to change the trash bin icon in cart to something like an "X" instead ?

Store Design
, ,
1

How do I change the trash bin icon in the cart (to remove something) to something like an “X” instead ?
I’m using the Dawn theme if that helps.
Thanks x

2

Hi @nanahcubotal

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
div#CartDrawer-CartItems .cart-item__quantity-wrapper.quantity-popover-wrapper button.cart-remove-button span.svg-wrapper::before {
    content: "X";
    font-size: 20px;
    color: red;
    font-weight: bold;
}
div#CartDrawer-CartItems .cart-item__quantity-wrapper.quantity-popover-wrapper button.cart-remove-button span.svg-wrapper > svg {
    display: none !important;
}

Here is the result: https://prnt.sc/WQGGYT_ZuOHO

If you don’t want it to be red, please remove the color line on the code
If you don’t want it to be bold, please remove the font-weight line in the code

I hope this helps

Best,

Daisy

3

THANK YOU. The Custom CSS section wasn’t accepting this code, so I placed it at the bottom of the base.css asset.
Now my next question, it is still a trash bin on the full cart page — any way of changing this to remain cohesive with the cart drawer?

4

HI @nanahcubotal

The code is supposed to work on the cart drawer only, not cart page https://prnt.sc/WQGGYT_ZuOHO

It turned out to be work on the cart page not cart drawer at the moment? May I have the screenshot, please?

Best,

Daisy

5

It is working on the cart drawer, the result isn’t reflected on the full cart page

6

Hi @nanahcubotal

Please add this code more

td.cart-item__quantity cart-remove-button > a > span.svg-wrapper::before {
    content: "Remove";
    font-size: 14px !important;
}
td.cart-item__quantity cart-remove-button > a > span.svg-wrapper > svg {
    display: none;
}

I saw that you have changed the text to remove, so I change the code to " remove" also

Here is the result: https://prnt.sc/fthy7UQh6T_J

Best,

Daisy

7

YES! beautiful, thank you!