Jump to content

Change cart icon to custom .PNG image

Recommended Posts

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;
}

 

 

Link to comment
  • Replies 16
  • Views 1.3k
  • Created
  • Last Reply

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
  • 6 months later...
  • 2 weeks later...
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?

image.png.fa6f758efd33303d0ba633b64cae5042.png

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

Each template will need a different code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.