Add icon to add to cart button - DAWN

PyroProducts
Excursionist
17 2 3

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.
4901bb71-e604-48ba-a0a6-ae256c1bc636.jpegexample of icon

 

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

 

 

Replies 8 (8)

TerenceKEANE
Shopify Partner
511 86 78

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);
}

 shopify.base.css.jpg

 

Terence

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
PyroProducts
Excursionist
17 2 3

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

 

U2NoZXJtwq1hZmJlZWxkaW5nLTIwMjQtMDUtMjQtb20tMTYuMjAuMjQuanBn.jpeg

TerenceKEANE
Shopify Partner
511 86 78

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/

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
PyroProducts
Excursionist
17 2 3

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

TerenceKEANE
Shopify Partner
511 86 78

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!

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
PyroProducts
Excursionist
17 2 3

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);
}



Scherm­afbeelding 2024-05-29 om 15.15.23.png

TerenceKEANE
Shopify Partner
511 86 78

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?

 

 

TerenceKEANE_0-1716993030648.png

 

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
PyroProducts
Excursionist
17 2 3

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

Scherm­afbeelding 2024-06-05 om 11.03.11.pngScherm­afbeelding 2024-06-05 om 11.03.03.png