Solved

Can you change the cart icon on a premium Shopify theme?

Keekee
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

 

Accepted Solutions (2)
Jasoliya
Shopify Expert
4808 621 1217

This is an accepted solution.

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Jasoliya
Shopify Expert
4808 621 1217

This is an accepted solution.

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

.header-minicart{width:30px;}
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 28 (28)

Jasoliya
Shopify Expert
4808 621 1217

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Keekee
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?

Jasoliya
Shopify Expert
4808 621 1217

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Keekee
Tourist
15 0 0

Should I add this type of code:

<img class="my-image" src="{{ "image.svg" | img_url: '24x24'  }}" alt="{{ shop.name }}" ...
Jasoliya
Shopify Expert
4808 621 1217

This is an accepted solution.

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Keekee
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>
Jasoliya
Shopify Expert
4808 621 1217

This is an accepted solution.

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

.header-minicart{width:30px;}
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Keekee
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?

Jasoliya
Shopify Expert
4808 621 1217

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Keekee
Tourist
15 0 0

Thank you very much for your help. I will look into it.

MauiSounds
Visitor
1 0 0

Hello , can I hire you to help me change the cart logo on my shopify site ?

 

Thank you 

 

plantyeco
Excursionist
17 0 4

Hi Keekee

 

I'm trying to do the same, but where should I store the new icon?  Do I need to upload it somewhere?

Jasoliya
Shopify Expert
4808 621 1217

You can upload icon or image in setting->file section.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
plantyeco
Excursionist
17 0 4

Hi, thanks for the reply.

I have a problem for several days. I'm using the Debut theme but in the header.liquid I cannot find the "exist-minicart".

Do you know if in debut theme the svg icons are located in another page?

 

Jasoliya
Shopify Expert
4808 621 1217

You can open you header.liquid file and find "site-header__icon".

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
plantyeco
Excursionist
17 0 4

yeah, found it.

But then, if I want to replace the existing cart icon, where should I specify my new icon in the code?

This is a sample of my page code:

<a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
            {% include 'icon-cart' %}
            <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
            <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}" data-cart-count-bubble>
              <span data-cart-count>{{ cart.item_count }}</span>
              <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
            </div>
          </a>

Thanks much.

Jasoliya
Shopify Expert
4808 621 1217

You have to change this "{% include 'icon-cart' %}"

this is icon code.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
plantyeco
Excursionist
17 0 4

Right, I opened icon-cart and I replaced the existing code:

<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-cart" viewBox="0 0 37 40"><path d="M36.5 34.8L33.3 8h-5.9C26.7 3.9 23 .8 18.5.8S10.3 3.9 9.6 8H3.7L.5 34.8c-.2 1.5.4 2.4.9 3 .5.5 1.4 1.2 3.1 1.2h28c1.3 0 2.4-.4 3.1-1.3.7-.7 1-1.8.9-2.9zm-18-30c2.2 0 4.1 1.4 4.7 3.2h-9.5c.7-1.9 2.6-3.2 4.8-3.2zM4.5 35l2.8-23h2.2v3c0 1.1.9 2 2 2s2-.9 2-2v-3h10v3c0 1.1.9 2 2 2s2-.9 2-2v-3h2.2l2.8 23h-28z"/></svg>

with the new icon code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg id="i-cart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"  fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
    <path d="M6 6 L30 6 27 19 9 19 M27 23 L10 23 5 2 2 2" />
    <circle cx="25" cy="27" r="2" />
    <circle cx="12" cy="27" r="2" />
</svg>

But then the icon disappears completely from my website.

Do you know why?

hfound
Excursionist
14 0 3

Just watch this.  SO easy!  https://www.youtube.com/watch?v=ES8pGBMy7Ro

Glamwiz
Visitor
2 0 0

Hi Jasoliya, can you whatsapp me at 9643464116. We are looking to hire someone to make changes to our site

MRamzan
Shopify Partner
92 1 19
What is your country code
Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112
MRamzan
Shopify Partner
92 1 19

I am sorry I don't able to know from which country you are because of missing country code in your whatsApp number which you added. If possible then please here is my whatsApp: +91-9145985880

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112
Lashay7187
Tourist
23 0 2

Hi when you change your cart icon did it change the buy now channel mini cart

sarahhagger
New Member
4 0 0

Hi Jasoliya,

 

I am trying to change the wording in my header (see picture)

sarahhagger_0-1635124823302.png

to actual icons (like picture)

sarahhagger_1-1635124870116.png

I would also like to change the 'Cart' to the search and remove the search below the wording (see picture)

sarahhagger_2-1635124932813.png

Is this something you may be able to help with?

I have other queries also but this one has been bugging me. 

My URL is www.oliveandaugust.com.au there is no password on page.

Thank you,

Sarah

 

Jasoliya
Shopify Expert
4808 621 1217

Hi,

for that need more code changes, you can change that code from header.liquid file but you need code knowledge for that my be you have to hire developer for that

Best regard

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

MRamzan
Shopify Partner
92 1 19

Hi. I have solved this and uploaded video. https://www.youtube.com/watch?v=ES8pGBMy7Ro

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112
hfound
Excursionist
14 0 3

I wasted SO much time trying to figure this out!  THANK YOU SO MUCH!  It's SO easy!  Your instructions were great.  Thanks again!

ChristinaZ
Tourist
13 0 2

Hi there, I followed the steps in your video but the cart icon is still the same sadly. This is how the code looks if that helps:
Screenshot 2022-12-11 at 12.20.45.png

Why do you think is that?

 

Many thanks