Change cart icon

Solved
Tourist
15 0 0

Hello everyone.

I have a quick question: is there a way to change the cart icon (see picture) to a custom cart icon I have? I am using a paid premium. I am familiar with coding and all I know is that the current cart icon (along with the search and user icons) was imported from FontAwesome. But I can't find a way to change it.

 

store link: https://pl8imze0d42ftblb-28166455356.shopifypreview.com

 

Thank you for your help.cacd6e11-8a41-4862-abe5-979a65a49953.png

 

0 Likes
Shopify Expert
2529 423 535

Hi @Keekee 

Normally yo can find this icon code in Section->header.liquid file.

find 'exist-minicart' class on page where its your cart icon 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Tourist
15 0 0

Thanks for your reply.

I already found it but what should I do next?

Here's the code: 

<div class="minicart-top  dropdown-toggle">
                <i class="exist-minicart icon"></i>
                <a class="minicart-toogle">
                  <span class="cart-text hidden">{{ 'layout.cart.shopping_cart' | t }}</span>
                  <span id="minicart-count">{{ cart.item_count }}</span>
                </a>
              </div>

How can I replace class="exist-minicart icon" with my custom svg or png file?

0 Likes
Shopify Expert
2529 423 535

here bellow code is icon of your cart,

<i class="exist-minicart icon"></i>

So you have change it with your icon or SVG but keep 'exist-minicart' and 'icon' class in new element. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Tourist
15 0 0

Should I add this type of code:

<img class="my-image" src="{{ "image.svg" | img_url: '24x24'  }}" alt="{{ shop.name }}" ...
0 Likes

Success.

Shopify Expert
2529 423 535

yes you can use like this but keep 'exist-minicart and icon' class, you have to manage this with css once you change existing icon 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Tourist
15 0 0

Thanks it works!

 

However how can I change the size of the icon? And also now i have a weird square next to the cart number. Here's the new code:

 <div class="minicart-top  dropdown-toggle">
                <img class="exist-minicart icon" src="{{ 'paper-bag.svg' | asset_url }} " alt="{{ shop.name }}" itemprop="cart"> 
                <a class="minicart-toogle">
                  <span class="cart-text hidden">{{ 'layout.cart.shopping_cart' | t }}</span>
                  <span id="minicart-count">{{ cart.item_count }}</span>
                </a>
              </div>
0 Likes

Success.

Shopify Expert
2529 423 535

Add this css in asset->theme.scss file at bottom:

.header-minicart{width:30px;}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Tourist
15 0 0

Thank you very much for your help!

One last thing is that now in mobile mode there's a tiny square that's supposed to show the hamburger menu for smartphone browser users. How should I proceed?

0 Likes
Shopify Expert
2529 423 535

For that you have to do major code with liquid, css and html

Do code in Section->header.liquid file

May be this link help you

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes