Change cart icon to custom .PNG image

Site URL: http://www.palmettehome.com

Hi! I'm wanting to change the stock cart/bag icons to a custom bag image I've created. I found some code online but it's not working. Is this possible? I have a .PNG file created and uploaded in my managed files. For reference, here is the code I found as a starting point. I did insert the URL path to the image in the code in the custom CSS section. Per their video, the cart image changed however mine did not. They are also using the same template as mine. Any help would be greatly appreciated!

website:

www.palmettehome.com

reference code:

.icon--cart {
svg {
display:none;
}
background-image: url(IMAGE HERE);
background-size: 20px 20px;
background-repeat: no-repeat;
}

Add to Home > design > Custom CSS

.tweak-header-cart-style-bag .Header .Cart>* {
    visibility: hidden !important;
}
.tweak-header-cart-style-bag .Header .Cart {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

Thanks! This worked! However I don't see the number for the number of items in the cart (Default zero (0)). Any help with that?

Thanks!

sorry one other question! am i able to adjust the size?

Hi just following up on this one! 

Hi,
Change your second CSS like this

.tweak-header-cart-style-bag .Header .Cart {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100px; /* Change to anything you like */
    height: 100px;  /* Change to anything you like */
}

Please use the like button if it helps you!

Best,
Leopold

Hi,

This helped the sizing, thank you. However, I still do not see the number listed for the number of items in the cart. For example, "0". Is this hidden and can it be shown again?

Thanks

Hi,

Use this code to show it.

.tweak-header-cart-style-bag .Header .Cart .sqs-cart-quantity {
    visibility: visible !important;
}

Please use the like button if it helps you!

Best,
Leopold

Ok that worked. We are getting closer but I do have just a few more issues to solve:

1. I need to reposition the quantity number, as now it is sitting too low at the bottom of the bag image.

2. I need to also show this custom image on mobile. Can that be done?

Thanks!

1. Use this code

.tweak-header-cart-style-bag .Header .Cart .sqs-cart-quantity {
    visibility: visible !important;
    margin-bottom: 4px;
}

2. You need to use media query to do it.

Best,
Leopold

 

perfect, thank you! the margin-bottom worked.

i'm not sure i know what a media query is? can you assist me with that?

Write your code within this code

@media screen and (max-width: 640px) {



}

Could you please help with me the code within that code? That will be all I need!

What do you want to do?

I just want to show the same custom bag icon on mobile as it now shows on desktop. Now when I switch to mobile it shows the original icon. I want to show the custom bag icon on mobile also. Does that help?

Hello, Trying to change the cart icon, can you please explain why this isn't working?

On 3/9/2021 at 6:10 PM, Chrisprocreate said:

Hello, Trying to change the cart icon, can you please explain why this isn't working?

Hi. Can you share link to your site? We can help easier.

Each template will need a different code