Ptphotography Posted June 21, 2020 Share Posted June 21, 2020 Hello everyone, I would like to know if it is possible to change the position of the cart icon. I am attaching Before and After picture of the look I would like to achieve. I'd like to have it placed underneath SHOP text if possible. My site: https://caterpillar-antelope-zbjy.squarespace.com/shop password: ptphoto Thank you in advance, Best regards, P p.s I have set the cart to only appear on the 'SHOP' page, in case this info is helpful Link to comment
jpeter Posted July 3, 2020 Share Posted July 3, 2020 @Ptphotography You can add the following JavaScript and CSS below. Feel free to update the TEXT variable in the JavaScript code to whatever you want:JavaScript (function(document){ // Customize TEXT variable. var TEXT = 'Cart'; /******************************************************************** * DO NOT MODIFY CODE BELOW, unless you know what you're doing. *******************************************************************/ if(document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init(){ var cartInner = document.querySelector('.Cart-inner'); if(cartInner) { var qty = document.querySelector('.icon-cart-quantity'); var div = document.createElement('div'); div.setAttribute('class', 'Cart-inner-content'); div.innerHTML = TEXT; cartInner.insertBefore(div, qty); } } })(document); CSS .Cart-inner { display: flex; align-items: center; } .Cart-inner-content { text-transform: uppercase; } .icon-cart-quantity, .sqs-cart-quantity { position: static; padding: initial; font-size: 0.8rem; } .icon-cart-quantity { margin-left: 5px; position: static !important; } .sqs-cart-quantity:after { content: ')'; } .sqs-cart-quantity:before { content: '('; } .header .header-actions-action--cart a.icon { width: auto; height: auto; padding: .8rem; background-color: #eee; } .header .header-actions-action--cart svg.icon--cart { width: 25px; height: 20px; padding: 0 5px 0 0; } .header-display { /* flex-wrap: wrap; */ } .header-actions--right { /* width: 100%; */ } @media (min-width: 1180px) { .header-actions-action--cart a.icon { position: absolute; bottom: -2rem; right: 1rem; } } Be sure to add the JavaScript between <script> tags and the CSS between <style> tags, example: <style> /* Add CSS Code here */ </style> <script> // Add JS code here </script> I would use Site-wide code injection, see article https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript Ptphotography 1 Link to comment
Ptphotography Posted July 9, 2020 Author Share Posted July 9, 2020 @jpeter You are a genius! Thank you for this, you are the best! 🙌 Link to comment
trusocialite Posted June 4, 2021 Share Posted June 4, 2021 (edited) @jpeter Does this code work if I want to move the standard cart? I'd like to move it from its position in the upper right of the site to the same line as my navigation and the standard options don't allow it in this layout. Site: https://gracespaceboutique.squarespace.com/ PW: Welcome1 Edited June 4, 2021 by trusocialite updated domain Link to comment
tuanphan Posted June 5, 2021 Share Posted June 5, 2021 22 hours ago, trusocialite said: @jpeter Does this code work if I want to move the standard cart? I'd like to move it from its position in the upper right of the site to the same line as my navigation and the standard options don't allow it in this layout. Site: https://gracespaceboutique.squarespace.com/ PW: Welcome1 Hi. Move 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
trusocialite Posted June 8, 2021 Share Posted June 8, 2021 (edited) @tuanphan Yes, move the cart straight down directly on the inside of the margin on top of the horizontal line instead of down and left (in line with the rest of the navigation). Edited June 8, 2021 by trusocialite Link to comment
tuanphan Posted June 10, 2021 Share Posted June 10, 2021 On 6/9/2021 at 3:27 AM, trusocialite said: @tuanphan Yes, move the cart straight down directly on the inside of the margin on top of the horizontal line instead of down and left (in line with the rest of the navigation). Add to Settings > Advanced > Code injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.header-display-desktop .header-actions-action.header-actions-action--cart').appendTo('nav.header-nav-list'); }); </script> <style> svg.icon.icon--cart { stroke: black; } nav.header-nav-list>div:last-child { display: none; } </style> 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
trusocialite Posted September 27, 2021 Share Posted September 27, 2021 Thank you! Sorry for such a long delayed response! Do you know how I can get the top margin of my first section to show like an inset instead of the header falling over it? I would like the green to show on all four sides. Link to comment
tuanphan Posted September 29, 2021 Share Posted September 29, 2021 On 9/28/2021 at 4:13 AM, trusocialite said: Thank you! Sorry for such a long delayed response! Do you know how I can get the top margin of my first section to show like an inset instead of the header falling over it? I would like the green to show on all four sides. Can you share link to page in screenshot? 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
trusocialite Posted September 30, 2021 Share Posted September 30, 2021 gracespaceboutique.com/home PW: Welcome1 Link to comment
tuanphan Posted October 3, 2021 Share Posted October 3, 2021 On 10/1/2021 at 5:45 AM, trusocialite said: gracespaceboutique.com/home PW: Welcome1 You can add a blank section with minium height on top of current section, then let me know. We will give some code to achieve your request 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
Anele0610 Posted November 18, 2021 Share Posted November 18, 2021 On 6/9/2021 at 7:35 PM, tuanphan said: Add to Settings > Advanced > Code injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.header-display-desktop .header-actions-action.header-actions-action--cart').appendTo('nav.header-nav-list'); }); </script> <style> svg.icon.icon--cart { stroke: black; } nav.header-nav-list>div:last-child { display: none; } </style> Hey @tuanphan, This works great, but the cart is just slightly above the main line of the navigation. Any suggestions? Thanks! Anele Link to comment
Anele0610 Posted November 18, 2021 Share Posted November 18, 2021 Website: https://lavender-caper-k5h2.squarespace.com/ Password: 123 Link to comment
tuanphan Posted November 20, 2021 Share Posted November 20, 2021 On 11/18/2021 at 9:24 AM, Anele0610 said: Website: https://lavender-caper-k5h2.squarespace.com/ Password: 123 Add to Design > Custom CSS /* align cart icon in main navigation */ nav.header-nav-list { align-items: center; } Anele0610 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