Re: Customizeing cart and login icons

How can I customize cart and login icons?

Czaban
Excursionist
36 0 9

Hello friends! Quick question, how can i change the icons in the red circle

Czaban_0-1693736126539.png

Im talking about changing the icons to one like these

Czaban_1-1693736156743.png

And making them slightly bigger.

Reply 1 (1)

Harsita
Shopify Partner
46 10 23

Hi @Czaban 

 

Thank you for reaching out to the Shopify community.

 

In order to change the cart icon go to your theme code editor and search for file named icon-cart.liquid and icon-cart-empty.liquid in Snippets folder. There remove the svg code and add the the svg code of icons of your choice in both the files . Example -

 

<svg xmlns="http://www.w3.org/2000/svg" version="1.0" class="icon icon-cart-empty" width="24.000000pt" height="24.000000pt" viewBox="0 0 24.000000 24.000000" preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,24.000000) scale(0.100000,-0.100000)" fill="#ffffff" stroke="none">
<path d="M10 211 c0 -5 6 -11 14 -14 23 -9 41 -79 27 -106 -11 -21 -10 -21 64 -21 43 0 75 4 75 10 0 6 -27 10 -62 10 -70 0 -70 17 1 22 41 3 45 6 62 45 l18 43 -79 0 c-47 0 -80 4 -80 10 0 6 -9 10 -20 10 -11 0 -20 -4 -20 -9z"/>
<path d="M54 49 c-10 -17 13 -36 27 -22 12 12 4 33 -11 33 -5 0 -12 -5 -16 -11z"/>
<path d="M154 49 c-10 -17 13 -36 27 -22 12 12 4 33 -11 33 -5 0 -12 -5 -16 -11z"/>
</g>
</svg>

To adjust the height and width you can go base.css file in assets folder and search for class .header__icon--cart .icon and change the height and width accordingly.

 

Similarly for account icon you can go to icon-account.liquid file and change the svg code there.

Example- 

<svg xmlns="http://www.w3.org/2000/svg" version="1.0" class="icon icon-account" width="24.000000pt" height="24.000000pt" viewBox="0 0 24.000000 24.000000" preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,24.000000) scale(0.100000,-0.100000)" fill="#ffffff" stroke="none">
<path d="M90 195 c-15 -18 -10 -45 13 -59 34 -22 73 27 47 59 -16 19 -44 19 -60 0z"/>
<path d="M58 84 c-16 -8 -28 -23 -28 -34 0 -18 7 -20 90 -20 83 0 90 2 90 20 0 42 -97 64 -152 34z"/>
</g>
</svg>

 

Please give it a try and let me know if this was helpful.

 

Thanks

Harshita || Recurpay Subscriptions

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution