Change Shopping cart Icon to Shopping Bag

Highlighted
Tourist
34 0 2

Does anyone know how to change the Shopping cart Icon in the Brooklyn Theme to a Shopping Bag? My header on my homepage is White so I would need the bag to be White in color here and then on all my other pages the header is Black. Would this automatically change? I've looked at some other forums but I have't really seen a clear answer on this. Thank you

0 Likes
Highlighted
Excursionist
29 0 8

I'm having this same issue. Did you ever resolve?

0 Likes
Highlighted
Shopify Partner
72 12 34

Sure,

Create a new snippet in the theme code called "icon-bag.liquid" with this;

 

 

<svg version="1.1" class="icon icon-bag" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 407.453 407.453" style="enable-background:new 0 0 407.453 407.453;" xml:space="preserve">
<g>
	<path d="M255.099,116.515c4.487,0,8.129-3.633,8.129-8.129c0-4.495-3.642-8.129-8.129-8.129H143.486
		c-4.487,0-8.129,3.633-8.129,8.129c0,4.495,3.642,8.129,8.129,8.129H255.099z"/>
	<path d="M367.062,100.258H311.69c-4.487,0-8.129,3.633-8.129,8.129c0,4.495,3.642,8.129,8.129,8.129h47.243
		v274.681H48.519V116.515h44.536c4.487,0,8.129-3.633,8.129-8.129c0-4.495-3.642-8.129-8.129-8.129H40.391
		c-4.487,0-8.129,3.633-8.129,8.129v290.938c0,4.495,3.642,8.129,8.129,8.129h326.671c4.487,0,8.129-3.633,8.129-8.129V108.386
		C375.191,103.891,371.557,100.258,367.062,100.258z"/>
	<path d="M282.59,134.796c4.487,0,8.129-3.633,8.129-8.129V67.394C290.718,30.238,250.604,0,201.101,0
		c-49.308,0-89.414,30.238-89.414,67.394v59.274c0,4.495,3.642,8.129,8.129,8.129s8.129-3.633,8.129-8.129V67.394
		c0-28.198,32.823-51.137,73.36-51.137c40.334,0,73.157,22.939,73.157,51.137v59.274
		C274.461,131.163,278.095,134.796,282.59,134.796z"/>
	<path d="M98.892,147.566c0,11.526,9.389,20.907,20.923,20.907c11.534,0,20.923-9.38,20.923-20.907
		c0-4.495-3.642-8.129-8.129-8.129s-8.129,3.633-8.129,8.129c0,2.561-2.089,4.65-4.666,4.65c-2.569,0-4.666-2.089-4.666-4.65
		c0-4.495-3.642-8.129-8.129-8.129S98.892,143.071,98.892,147.566z"/>
	<path d="M282.59,168.473c11.534,0,20.923-9.38,20.923-20.907c0-4.495-3.642-8.129-8.129-8.129
		c-4.487,0-8.129,3.633-8.129,8.129c0,2.561-2.089,4.65-4.666,4.65c-2.577,0-4.666-2.089-4.666-4.65
		c0-4.495-3.642-8.129-8.129-8.129c-4.487,0-8.129,3.633-8.129,8.129C261.667,159.092,271.055,168.473,282.59,168.473z"/>
</g>
</svg>

 

 

 

Or any SVG picture you like, then goto header.liquid under Sections and change these lines as pictured

add the COMMENT each side of the existing red

add the green line

red-green.jpg

 

Then goto ASSETS and themes.scss.liquid, scroll all the way to the bottom and insert

 

 

/*  bag icon in header - watch the color change on sticky header and index page  */
.header-container .icon-bag { height: 25px; }
 @media screen and (min-width: 768px) {
   .header-container .icon-bag { height: 20px; } }  
.template-index .header-container .icon-bag { fill:#fff;}
.header-sticky .icon-bag { fill:#000 !important; }

 

 

 

which is the formatting. Now I know this is involved and needs quite a bit of editing. If you are not confident reach out to me for hire. This is working on Brooklyn.

Always happy to help the community

Dan from GC Web Team | Shopify Partner
If this was helpful then please Like and let me know!
If this answered your question click Accept as Solution
Want to modify or make custom changes on your store? I'm available for hire!
Website: GCWebteam.com
Highlighted
Shopify Partner
22 0 2

Hi @GCWebTeam 

Actually need help with this issue on my website as well. I wanted to replace the shopping cart with a custom icon I made. I originally had it implemented for me on an older version of Brooklyn but I've recently installed the latest version of Brooklyn and implementing it myself is difficult. Any help would be great, the image is called "heartbag_1.png".

My website: https://poisonjam.co

0 Likes