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

Using custom cart icon


puddingxo

Question

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 post
  • Answers 15
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add to Home > design > Custom CSS span.Cart-label { visibility: hidden; } span.Cart-label:after { visibility: visible; content: ""; background: url(https://beaverhero.com/wp-

Can you share site url? We can check easier

Thank you so much! 

Posted Images

15 answers to this question

Recommended Posts

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

 

Link to post
  • 0

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

 

Link to post
  • 0

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.

Screen Shot 2020-09-13 at 6.51.56 PM.png

Edited by Ndi
Link to post
  • 0
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 post
  • 0
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

Link to post
  • 0

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! 

 

Link to post
  • 0
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;
}
}

 

Link to post
  • 0
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 post
  • 0

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

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...