How to add icon to CTA button?

New Member
2 0 0

Hi please i need help i want to add "cart icon" to ADD TO CART button on my theme (brooklyn) i want it to look like that.

0 Likes
Shopify Staff
Shopify Staff
578 37 55

Hello!

Ted here from Shopify, thanks for reaching out to us.

That's a great question! Are you familiar with HTML? If you are, you should be able to add the cart icon to the button as shown below.

  • Upload your preferred cart image to the Settings > Files section of your admin.
  • After that, you should be able to change the size of the file as shown here. For best results, your image should be approx 30px x 30px and it should be a transparent .png file the same color as your Add to Cart button text.
  • Once you've successfully uploaded the image, please copy the URL that's provided as shown here.

From here, you will now need to change the theme's code slightly.

  • Please click Online Store and then Themes.
  • Next, click on Actions and select Edit Code as shown in this example.
  • After that, select the Assets file and click on theme.scss.liquid as shown here.
  • Scroll to the very bottom of the file and enter the below code.
  • Make sure to change the URL listed in the below code to the correct image URL as mentioned above.
  • Click Save.

#AddToCart--product-template {

  & .btn__text {

    background: url('https://cdn.shopify.com/s/files/1/0115/0074/8859/files/12-44-aby07-3cjfe_fba86bd2-f073-4f3f-9774-c38...') left center no-repeat;

    padding-left: 32px;

  }

}

The padding-left may need to be adjusted to suit the width of your image but you can change this at any stage.

If you would prefer us to change this for you, please let me know. Let me know how this goes!

Thanks a mill,
Ted

Ted | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Shopify Partner
6 0 0

Thanks for the steps - I've given it a go on Narrative theme but I just can't get the icon to display.

 

I've managed to get a padlock onto the "BUY IT NOW" button with the help of @BrianAtWork but the "ADD TO BASKET" / "ADD TO CART" I can't get to do anything.

 

Screenshot 2019-07-18 at 15.03.33.png

0 Likes
Shopify Partner
236 59 74

@Matt_D Send me a link to your store. I'll show you how to fix this. 

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

1 Like
New Member
5 0 0

i can't put it in my booster, can you help-me please ?

 

0 Likes
New Member
5 0 0

i can't put it in my booster, can you help-me please ?

0 Likes
New Member
3 0 0

Hi, thank you for the tutorial. I've followed all the steps but it hasn't worked for me. Not sure what I've done wrong but could you please help with changing my icon for me? 

Thank you 

DStore1

0 Likes
Shopify Partner
6 0 0

@Hiden - what do you mean exactly?

 

@DStore1 - below is the code I used for my theme - but you may need to tweak it depending on the theme you're using / the css class names (and you'll also have to update the url to your icon for the top one).

 

.product__add-to-cart-button span::before {
  @extend .custom-button-icon;
  content: url("https://cdn.shopify.com/s/files/basket_18x18_f55fddb7-4e65-4627-857c-09eadc575bd1.png?1331");
}

.shopify-payment-button__button--unbranded::before {
  @extend .custom-button-icon;
  margin-right: 10px;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' class='icon icon-lock' viewBox='0 0 17 20' version='1.1'%3E%3Cpath fill='{{ settings.color_button_text | replace: '#', '%23' }}' d='M15.725 8.333H15.3V6.875C15.3 3.02 12.313 0 8.5 0 4.687 0 1.7 3.02 1.7 6.875v1.458h-.425C.571 8.333 0 8.893 0 9.583v9.167C0 19.44.571 20 1.275 20h14.45c.704 0 1.275-.56 1.275-1.25V9.583c0-.69-.571-1.25-1.275-1.25zM4.25 6.875C4.25 4.381 6.077 2.5 8.5 2.5s4.25 1.88 4.25 4.375v1.458h-8.5V6.875zm5.95 8.142c0 .91-.754 1.65-1.683 1.65h-.034c-.93 0-1.683-.74-1.683-1.65v-1.7c0-.911.754-1.65 1.683-1.65h.034c.93 0 1.683.739 1.683 1.65v1.7z'/%3E%3C/svg%3E") !important;
}

 

0 Likes
New Member
3 0 0
Hi Matt_D,
Thank you for getting back to me. I'd like to add the image below as my
icon where the shopping cart is, where the add to cart button is, but I've
had no luck so far. I've tried to add the url:
https://cdn.shopify.com/s/files/1/1900/5973/files/1cauldron-clipart-red-23.jpg?v=1577022809
from my files, but it didn't work. I'm not very good with theme codes and
haven't got a clue what most of it is about. If you could help me with this
and show where I'm meant to insert the code etc. I 'd really appreciate it.
Kind regards,
Debra
[image: cauldron-clipart-red-23.png]
0 Likes
Shopify Partner
6 0 0

Hi Debra - the code should go into the "theme.scss.liquid" file - I normally put it at the end.  Another Shopify expert helped me identify the correct class name for the buttons.  If you're unsure of it, please provide the site link and we can help check the class name for you.  Just re-reading your message - if the theme already has an icon, have you checked to see if its changeable in the theme settings area?  Which theme is it?

0 Likes