Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Change cart icon to custom .PNG image


PalmetteHome

Question

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

 

 

Edited by PalmetteHome
Link to comment

16 answers to this question

Recommended Posts

  • 0

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

 

Link to comment
  • 0

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
  • 0
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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...