Using custom cart icon

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!

Hi,

You want: replace cart text with cart icon?

Hi tuanphan,

Thank you for your response 🙂

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

 

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

Hi, 

I would like to replace cart icon with Cart ( 0 ) on https://www.tribeandsol.com 

example 

https://abronzeage.com

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

Thank you for responding is there a way it can be side by side Cart (0) instead of stacked like in the attached photo? The font is also off.

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!

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

Thank you for getting back to me!

https://kale-manatee-f42f.squarespace.com/

Password: password

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! 

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

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! 

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.

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.

On 3/29/2021 at 6:47 AM, NomadLad said:

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

apologies for the confusion.

Hi. can you share link to your site?