jdillagodzilla Posted March 10, 2021 Share Posted March 10, 2021 Site URL: https://tuna-ladybug-3hgy.squarespace.com Hi there – I'd like to replace the cart icon with words that say "Cart" with the number adjacent. site: https://tuna-ladybug-3hgy.squarespace.com pass: brineintopedro Link to comment
tuanphan Posted March 20, 2021 Share Posted March 20, 2021 Hi. It looks like you solved this? 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
jdillagodzilla Posted March 27, 2021 Author Share Posted March 27, 2021 Yes, I added a button to the navigation and changed the style – couldn't figure out how to put it to the left of the cart quantity... here's the code for anyone who wants it! /* Remove cart icon */ header#header span.Cart-inner { } svg.icon.icon--cart { display: none; } /* Style cart quantity */ header#header .icon-cart-quantity { color: #E3E2E0; background-color:#151515; text-align:center; padding:8px; font-size: .7em; font-family: 'circular-book'; position:absolute; right:!important; left:0!important; top:0!important; bottom:0!important; } /* Style button */ .sqs-block-button-element, .image-button a, .header-actions .btn, .header-skip-link { color: #151515; font-family: 'circular-book'; text-transform: uppercase; font-size: .7em; letter-spacing: .1em; font-weight: 400; background-color:transparent!important; } Link to comment
creedon Posted March 27, 2021 Share Posted March 27, 2021 Quote couldn't figure out how to put it to the left of the cart quantity Try the following code. Make a copy of your code somewhere. /* Begin style header cart link */ /* reset to baseline to build our effect */ .header .header-actions-action--cart .icon { height : unset; width : unset; } .icon-cart-quantity { all : unset; } .Cart-inner .icon--cart { /* remove cart icon */ display : none; } .Cart-inner { /* common settings */ font-family : circular-book; font-size : 0.7em; vertical-align : middle; } /* cart quantity */ .icon-cart-quantity { background-color : #151515; padding : 8px; } body:not( .header--menu-open ) .header-actions .icon-cart-quantity { color : #E3E2E0; } .Cart-inner:before { /* cart text */ content : 'CART'; color : #151515; font-weight : 400; letter-spacing : 0.1em; margin-right : 0.5em; } /* End style header cart link */ This is for v7.1 and specific to the OP's needs. Let us know how it goes. tuanphan 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
jdillagodzilla Posted March 27, 2021 Author Share Posted March 27, 2021 @creedon worked like a charm, ty! creedon 1 Link to comment
artisanalies Posted November 10, 2021 Share Posted November 10, 2021 (edited) @creedon Would you be so kind to let me know how I could get it to appear as "Cart (0)" for example - just with the quantity in brackets? and also make it appear the same on mobile? with the "Cart" text left of the quantity "(0)"? Thank you so so much! Edited November 10, 2021 by artisanalies new info Link to comment
creedon Posted November 11, 2021 Share Posted November 11, 2021 @artisanalies Please post the URL for a page on your site where we can see your issue. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works. Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. We can then take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
ivnisigoth316 Posted November 21, 2021 Share Posted November 21, 2021 (edited) Hi there, I'm trying to achieve the same thing here, but the code isnt working for me. site URL: https://ladybug-chicken-2tp4.squarespace.com/ site pass: *3iRgpCKJ-8@bBZ7 any help would be amazing, thank you Edited November 21, 2021 by ivnisigoth316 Link to comment
creedon Posted November 21, 2021 Share Posted November 21, 2021 @ivnisigoth316 You have several effects going on at once related to the cart. Modifying the cart icon and adding a cart CTA. If you could describe what desired effect you are trying to achieve perhaps we can guide you. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
nicolusse88 Posted December 22, 2021 Share Posted December 22, 2021 Hello everyone, I've been able to replace the icon with text as well, but my text is stacked now and I can't find how to fix it. Here is the code: @media screen and (min-width:100px) { span.sqs-cart-quantity:before { content: "Panier ("; font-size: 1rem !important; } span.sqs-cart-quantity:after { content: ")"; } header#header svg.icon.icon--cart { display: none; } .header .header-actions-action--cart .icon { width: auto !important; } .icon-cart-quantity { position: static !important; font-size: 0.9rem !important; }} Thanks for your help! Link to comment
tuanphan Posted December 25, 2021 Share Posted December 25, 2021 On 12/22/2021 at 5:50 PM, nicolusse88 said: Hello everyone, I've been able to replace the icon with text as well, but my text is stacked now and I can't find how to fix it. Here is the code: @media screen and (min-width:100px) { span.sqs-cart-quantity:before { content: "Panier ("; font-size: 1rem !important; } span.sqs-cart-quantity:after { content: ")"; } header#header svg.icon.icon--cart { display: none; } .header .header-actions-action--cart .icon { width: auto !important; } .icon-cart-quantity { position: static !important; font-size: 0.9rem !important; }} Thanks for your help! Can you share link to your site? We can check easier 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
nicolusse88 Posted December 26, 2021 Share Posted December 26, 2021 @tuanphanabsolutely maisonmariet.fr Link to comment
tuanphan Posted December 28, 2021 Share Posted December 28, 2021 On 12/26/2021 at 5:41 PM, nicolusse88 said: @tuanphanabsolutely maisonmariet.fr Hi. I see it is fine here. Did you solve or which screen size do you see problem? 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
nicolusse88 Posted December 28, 2021 Share Posted December 28, 2021 Hi Tuanphan. No I didn't. On mobile and tablet it doesn't look right when the orientation is vertical Link to comment
tuanphan Posted January 1, 2022 Share Posted January 1, 2022 On 12/28/2021 at 7:49 PM, nicolusse88 said: Hi Tuanphan. No I didn't. On mobile and tablet it doesn't look right when the orientation is vertical Try adding to Design > Custom CSS @media screen and (max-width:1024px) { .header-actions.header-actions--right { flex: 0 0 100px !important; position: relative; left: -50px; } } nicolusse88 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment