Jump to content

Replace cart with another SVG (7.1)

Recommended Posts

Tried searching the forum but seems no one's asked on how to use an SVG as a replacement for the cart icon. I don't want to use a PNG, because I wouldn't be able to control the color at that point.

I started using the following code to replace the default cart icon but the SQS interface wouldn't let me upload an SVG (odd, right?), so I couldn't define a background-image url. Since I can't upload an SVG file (unless I'm missing something), how can I leverage the raw SVG code to replace the default cart icon?

 

https://broccoli-parakeet-js8k.squarespace.com/

Site Password: duckdogelk

 

// cart icon
.header .header-actions-action--cart svg {
  stroke:transparent!important
} .header-actions-action--cart .icon-cart-quantity {
  display:none
} .header .header-actions-action--cart {
  background-image: url(image-url-here); background-size: contain
}

 

Link to comment

You can upload an CVG file by going to the pages menu, then adding a link, click file, then upload the SVG there, and make note of the file URL. Then go back to the CSS and add that file URL. Hope that helps!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Hmm.. the icon seems to not be reliably showing up after implementing the code below. It seems to only be visible when I'm in the Custom CSS view. Thoughts anyone?

 

Custom CSS view

711318497_Screenshot2022-11-18at4_22_53PM.thumb.png.c49c657364ee68b353019731933231ec.png

 

Standard view

2023411240_Screenshot2022-11-18at4_23_16PM.thumb.png.94b7e314ef07ebda8fb9332824a5a42c.png

 

// cart
.header .header-actions-action--cart svg {
  stroke: transparent !important;
} .header-actions-action--cart .icon-cart-quantity {
  display: none;
} .header .header-actions-action--cart {
  background-image: url('/s/shopping-cart.svg');
  background-size: contain;
}

 

Edited by jorohaco
Link to comment

Sorry, I'm not sure, have you tried viewing the website in an incognito window to check if it's working live?

It's possible that the code is not sizing the SVG correctly, can you try adding a small height and width value to the CSS?

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Neither of those seemed to work 😕. Still getting the same behavior (visible in Custom CSS view, not anywhere else including in an incognito window).

 

// CUSTOM ICONOGRAPHY
// cart
.header .header-actions-action--cart svg {
  stroke: transparent !important;
}
.header-actions-action--cart .icon-cart-quantity {
  display: none !important;
}
/* .header .header-actions-action--cart {
  background-image: url('/s/shopping-cart.svg') !important;
  background-size: contain !important;
  height: 32px !important;
}*/
.icon--cart {   
  svg {     
    display: block !important;
  }   
  background-image: url('https://broccoli-parakeet-js8k.squarespace.com/s/shopping-cart.svg') !important;   
  background-size: 32px 32px !important;   
  background-repeat: no-repeat !important; 
}

 

Link to comment

pretty certain your url didn't upload correctly as if you visit the svg link directly it's just a blank screen. To be honest though, for just a small SVG like this, I'd encode it with a data url and then you can just do it all in CSS and you won't have to upload it anywhere.

  • go to a website like this SVG to Data URI encoder (heyallan.github.io),
  • copy your svg code in (just open your file with a text editor)
  • click encode
  • copy the output into your url (it will read something like url("data:image/svg+xml,....."))


should work just fine.

further thought:
If I was being totally honest, I'm not mad keen on the idea of putting the background-image rule directly on the SVG. doesn't sit right with me. I think it would be better to hide the SVG and then apply your background css rules to the containing link element. something like this

.header-actions-action.header-actions-action--cart svg,
.header-actions-action.header-actions-action--cart .icon-cart-quantity {
  display: none !important;
}

.header-actions-action.header-actions-action--cart a {
	display:block;
	width: 32px;
	height: 32px;
	background-size: 32px 32px;
	background-image: url("data:image/svg+xml,%3Csvg stroke='currentColor' fill='currentColor' stroke-width='0' viewBox='0 0 24 24' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Shopping_Cart' dataName='Shopping Cart'%3E%3Cpath d='M2.86,3.95H2.85l.05.53Z'%3E%3C/path%3E%3Cg%3E%3Cpath d='M6.217,15.662a2.492,2.492,0,0,0,2.49,2.27h9.07a2.492,2.492,0,0,0,2.49-2.27l.67-7.52a1.478,1.478,0,0,0-.39-1.15,1.507,1.507,0,0,0-1.11-.49H6.407l-.14-1.82a1.752,1.752,0,0,0-1.74-1.61h-.97a.5.5,0,0,0-.5.5.508.508,0,0,0,.5.5h.97a.752.752,0,0,1,.75.69Zm13.05-.09a1.492,1.492,0,0,1-1.49,1.36H8.707a1.492,1.492,0,0,1-1.49-1.36L6.487,7.5h12.95a.49.49,0,0,1,.37.16.516.516,0,0,1,.13.39Z'%3E%3C/path%3E%3Ccircle cx='9.946' cy='19.928' r='1'%3E%3C/circle%3E%3Ccircle cx='16.436' cy='19.928' r='1'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

 

Dave Hart. Software/Technology Consultant living in London

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...

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.