Add icon to add to cart button - DAWN

[PyroProducts]

Hello,

I hope somebody can help me. I’ve been looking at how to get an icon for the text ‘add to cart’ from a shopping cart for some time now. Just like in the example pictures. I hope someone can help me with a piece of custom code. I think it shouldn’t be very difficult.

Current button needs to stay the same only add a nice cart icon.

example of icon

Please look at https://pyroproducts.nl/products/tobaliq-black-turbo-aansteker

[TerenceKEANE]

Hi,

The following code will do what you want. You can change the values as you like. If you encounter any issues again, feel free to write, I’ll help.

Navigate to the ‘Edit Code’ option in your theme settings, then search for “base.css” in the search bar and add below codes.

button.product-form__submit.button.button--full-width.button--primary > span {
    position: relative;
}

button.product-form__submit.button.button--full-width.button--primary > span::before {
    position: absolute;
    background: url(https://www.iconpacks.net/icons/2/free-add-to-cart-icon-3046-thumb.png) no-repeat;
    background-size: cover;
    width: 25px;
    height: 25px;
    content: "";
    left: -30px;
    top: -3px;
    filter: invert(1);
}

Terence

[PyroProducts]

Thanks for your work! Maybe you can help me change it :
The alignment on mobile is not that nice. And is it possible to do a other icon? Would like little more thicker one.
maybe not as thick an icon as this but a little less

[TerenceKEANE]

You are welcome.

I actually recommend that you don’t use the icon I sent. Find your own icon online and upload it to Shopify. Then, replace it using the link above. I hope I understood correctly. You can use the website below for icons. Once you find the icon, let me know and we’ll also fix the mobile area.

https://www.svgrepo.com/

[PyroProducts]

This one looks good for me: Cart Plus Vector SVG Icon (10) - SVG Repo

[TerenceKEANE]

Yes, it looks great. Let me know once you upload it to your system and change the link above. Let’s also fix the mobile section!

[PyroProducts]

I have uploaded the white PNG image to shopify, put the link in the code. But on my store it is showing in black? Tobaliq Black Turbo Aansteker - PyroProducts And can you also please tell what code to add to center the text with icon on mobile. (see picture)

button.product-form__submit.button.button--full-width.button--primary > span {
position: relative;
}

button.product-form__submit.button.button--full-width.button--primary > span::before {
position: absolute;
background: url(https://cdn.shopify.com/s/files/1/0595/0285/4318/files/cart-plus-svgrepo-com.png?v=1716988315) no-repeat;
background-size: cover;
width: 25px;
height: 25px;
content: "";
left: -30px;
top: -3px;
filter: invert(1);
}

[TerenceKEANE]

First, you need to remove the ‘filter: invert(1);’ code I sent earlier.

I didn’t fully understand the other thing you mentioned. Which text do you want to center on mobile? If it’s the one below, isn’t it already centered?

[PyroProducts]

Look it is not centered well in the button. Also maybe need some extra space between icon and text

[VARTIX]

Hi!

I’m trying to do this on the latest dawn theme, but its not working for me. Could you help?
Thanks a lot!

VARTIX.