puddingxo Posted April 19, 2020 Share Posted April 19, 2020 (edited) 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 April 19, 2020 by puddingxo Link to comment
tuanphan Posted April 20, 2020 Share Posted April 20, 2020 Hi, You want: replace cart text with cart icon? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
puddingxo Posted April 21, 2020 Author Share Posted April 21, 2020 Hi tuanphan, Thank you for your response 🙂 Yes, that is correct. I want to replace the text "Cart" with my own icon/png. Link to comment
tuanphan Posted April 21, 2020 Share Posted April 21, 2020 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; } Ptphotography 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MoonMama Posted July 31, 2020 Share Posted July 31, 2020 Hi, I would like to replace cart icon with Cart ( 0 ) on https://www.tribeandsol.com example https://abronzeage.com Link to comment
tuanphan Posted August 24, 2020 Share Posted August 24, 2020 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 ("; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MoonMama Posted September 13, 2020 Share Posted September 13, 2020 (edited) 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. Edited September 14, 2020 by Ndi Link to comment
haley_mo Posted December 3, 2020 Share Posted December 3, 2020 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
tuanphan Posted December 6, 2020 Share Posted December 6, 2020 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 haley_mo 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
haley_mo Posted December 6, 2020 Share Posted December 6, 2020 Thank you for getting back to me! https://kale-manatee-f42f.squarespace.com/ Password: password Link to comment
haley_mo Posted December 6, 2020 Share Posted December 6, 2020 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 comment
tuanphan Posted December 8, 2020 Share Posted December 8, 2020 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
haley_mo Posted December 10, 2020 Share Posted December 10, 2020 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! LotNotes 1 Link to comment
NomadLad Posted March 27, 2021 Share Posted March 27, 2021 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
NomadLad Posted March 28, 2021 Share Posted March 28, 2021 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
tuanphan Posted March 31, 2021 Share Posted March 31, 2021 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment