change cart icon on Brooklyn

Highlighted
New Member
3 0 0

Hi,

 

Trying to change the cart icon on Brooklyn. Anyone know how please?

 

Thanks

0 Likes
Highlighted
Shopify Staff
Shopify Staff
31 0 4

Hi Lai,

Jana here from the Shopify Guru team :)

This is something that we would be able to do for you, as a part of your 60 minutes design time and our Design Policy - if you would like us to do so, please drop us an email to support@shopify.com, with the specifics of what you would like us to change the icon to. 

If you would prefer to do it yourself the cart icon can be edited in the theme.liquid template.

In Brooklyn, the code you want to look for is

<span class="icon icon-cart" aria-hidden="true"></span>

 You can edit this to edit your icon. Some examples would be - if you want the word “CART” instead of an icon, you can change it to

<span>CART</span>

 If you want to replace it with another image, you can change it to

<span><img src=“yourimagename.png”></span> 

or if you have Font Awesome installed on your theme and want to use one of their icons, you could do something like

<span><i class="fa fa-shopping-cart" aria-hidden="true"></i></span>

Please don't hesitate to get in touch with me directly by replying to this post with any more questions or for any clarification :)

Cheers,

Jana A. | Shopify Guru
support@shopify.com

1 Like
Highlighted
New Member
3 0 0

Thanks Jana, that's super helpful - gonna give it a try!

 

0 Likes
Highlighted
Shopify Partner
18 0 0

I have the same question in the Supply theme.

It seems to use an icon font for the cart button so it might not be as straightforward. In the UK colloquially we say "shopping baskets" not "shopping carts", so I've changed the text label to say "Basket" - now just need to change the image too.

Why's this important? The customers for the store I'm working on are in their 60s, 70s, and 80s, and they don't do a lot of online shopping. They have a traditional British outlook and have not become accustomed to Americanised language like "Cart".

Any help would be much appreciated!

0 Likes
Highlighted
New Member
1 0 0

I just tried this for Brooklyn and I didn't find the language mentioned specifically <span class "icon cart" aria hidden="true"><span> . The closest I see is is

 

< span class=  "icon icon-salestag" aria hidden="true"><span>

 

what am I missing?

 

0 Likes
Highlighted
New Member
5 0 0

Maybe it's too late already, but I hate to see unanswered questions, specially the ones I can help

 

Instead of theme.scss.liquid you can find it here:

Sections - header.liquid 

 

Cheers

0 Likes
Highlighted
New Member
2 0 0

Hi Jana, 

 

I would like to change the colour of the cart and navigation dots to a different colour as the are not showing on a black background 

0 Likes
Highlighted
Tourist
15 0 1

A bit late here, but have tried to follow these steps.

1) I uploaded my custom shopping cart image to files. 

2) Then I went to Sections - header.liquid as KingKang suggested

3)Then input this in the code with my image name 

<span><img src=“yourimagename.png”></span> 

 

Rather than getting my image, all I get is this:

Zag4242_0-1599499958779.png

Could anyone please advise on what I am missing?

Thank you

0 Likes
Highlighted
Tourist
15 0 1

Figured it out for anyone curious. The solutions mentioned about did not work.

1) Upload your png image to Settings > Files

2) Copy the URL once its uploaded

3) Locate this code in Header.Liquid (there are two locations, find both) 

<span class="icon icon-cart" aria-hidden="true"></span>

4) Past in the URL of your image 

<span><img src="URLofYourImage.png"></span>

 

1 Like
Highlighted
New Member
1 0 0

YOU are a life saver! I just freaked a little when the image didn't shrink, note, upload the image at the size you need it

0 Likes