Jump to content

Using custom cart icon

Recommended Posts

Site URL: https://orbitcoffee.squarespace.com/

Hi, 

On my site, the nav consists of "Beans, Roasters, About Us" and the cart which is not coupled with the nav.
Just wanted to know if this was possible, I am trying to replace the "stock" cart icon and " other available cart icons offered by the template with my very own icon that I have a url to.

I am using: Version 7.0-Brine family(Brine Timeplate)

I have uploaded my custom icon/image into Design > Custom CSS > Manage Custom Files which gives me a url, lets say this is https://examplepic.png
I have tried setting custom CSS but it does not work:

.Header .Cart .Cart-label { 
	background-image: "https://examplepic.png"
}

I was wondering if I could maybe perhaps use the "Inject Code" functionality and target the .Cart-label class or the appropriate class and replace with something like <img src="https://examplepic.png" /> 

Other documentation I have looked into:
https://support.squarespace.com/hc/en-us/articles/212838128#toc-header 
https://insidethesquare.co/carticon

Expectation: To be able to use my custom cart icon and still preserve the cart counter and all cart functionalities

 
Please help if this is possible, or whether this is a limitation to this customizing this template.

Thank you in advance!

Edited by puddingxo
Link to comment
55 minutes ago, puddingxo said:

Hi tuanphan,

Thank you for your response 🙂

Yes, that is correct. I want to replace the text "Cart" with my own icon/png.

 

Add to Home > design > Custom CSS

span.Cart-label {
    visibility: hidden;
}
span.Cart-label:after {
    visibility: visible;
    content: "";
    background: url(https://beaverhero.com/wp-content/uploads/2019/11/List-71.png) center center no-repeat;
    background-size: cover;
    display: inline-block;
    width: 30px;
    height: 30px;
}

 

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
  • 3 months later...
  • 4 weeks later...
  • 3 weeks later...
  • 2 months later...
On 8/24/2020 at 1:23 AM, tuanphan said:

Add to Home > Design > Custom CSS


span.Cart-inner .icon--cart {
    display: none;
}
span.Cart-inner .icon-cart-quantity:after {
    content: ")";
}
span.Cart-inner .icon-cart-quantity:before {
    content: "Cart (";
}

 

Thanks for the code — worked perfect! Was this second question ever solved? I'm also trying to get cart quantity on the same line as "Cart". 

Example: "Cart (2)"

 

Thanks!

Link to comment
On 12/4/2020 at 6:10 AM, haley_mo said:

Thanks for the code — worked perfect! Was this second question ever solved? I'm also trying to get cart quantity on the same line as "Cart". 

Example: "Cart (2)"

 

Thanks!

Can you share site url? We can check easier

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
On 12/7/2020 at 1:49 AM, haley_mo said:

While you're on the site actually, I'm also trying to disable the quick view button on mobile only, I haven't been able to figure that one out. Thank you so much again, I've been so stuck! 

 

Add to Home > Design > Custom CSS

.header-actions--right .header-actions-action {
    margin-left: 0 !important;
    width: 100px;
}
.header-actions--right .header-actions-action a {
    margin-right: 0 !important;
    width: 100px !important;
}
/* remove mobile quick view */
@media screen and (max-width:767px) {
span.sqs-product-quick-view-button {
    visibility: hidden;
}
}

 

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
On 12/8/2020 at 12:32 AM, tuanphan said:

Add to Home > Design > Custom CSS


.header-actions--right .header-actions-action {
    margin-left: 0 !important;
    width: 100px;
}
.header-actions--right .header-actions-action a {
    margin-right: 0 !important;
    width: 100px !important;
}
/* remove mobile quick view */
@media screen and (max-width:767px) {
span.sqs-product-quick-view-button {
    visibility: hidden;
}
}

 

Thank you so much! 

Link to comment
  • 3 months later...

Hi,

I have tried to follow this. I have uploaded the PNG to custom CSS and then inserted this code, but it doesnt appear to have worked.

i labelled the file "bag.png". I have tried a number of URLs, but they dont appear to work.

Can you help? Many thanks for the support.

Link to comment
On 3/27/2021 at 11:57 AM, NomadLad said:

Hi,

I have tried to follow this. I have uploaded the PNG to custom CSS and then inserted this code, but it doesnt appear to have worked.

i labelled the file "bag.png". I have tried a number of URLs, but they dont appear to work.

Can you help? Many thanks for the support.

@tuanphan apologies- this is what im trying to do, not make the cart disappear.

apologies for the confusion.

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.