AL-FQR Posted February 17, 2021 Share Posted February 17, 2021 Site URL: https://contrabass-sprout-yeka.squarespace.com/config/ Hello, I run my ECommerce through Ecwid and I have been having difficulty displaying their Shopping Bag icon on my sites headers. They provide an html code, but I haven't had success making it jive with Custom CSS: <div class='ec-cart-widget'></div> Any insight would be helpful, thank you! Link to comment
paul2009 Posted February 18, 2021 Share Posted February 18, 2021 This isn’t CSS, it is HTML. It can be inserted in Settings > Advanced > Code Injection. About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
AL-FQR Posted February 19, 2021 Author Share Posted February 19, 2021 Ive attempted to inject the HTML into the Header and Footer Coding Windows with not luck. I have my Ecwid store code injected into the Footer per their instructions, and the store works great, but I can't get their little shopping bag icon to appear on my sites header. Link to comment
AL-FQR Posted February 25, 2021 Author Share Posted February 25, 2021 On 2/18/2021 at 12:24 AM, paul2009 said: This isn’t CSS, it is HTML. It can be inserted in Settings > Advanced > Code Injection. Figured out step one of the issue: the icon is there in the header, but it remains hidden beneath the header's theme. In other words, it doesn't show up unless I make my header color theme "transparent". Any way I can get the icon to appear on top of a color theme? Thank you! Link to comment
tuanphan Posted March 1, 2021 Share Posted March 1, 2021 On 2/25/2021 at 10:17 AM, AL-FQR said: Figured out step one of the issue: the icon is there in the header, but it remains hidden beneath the header's theme. In other words, it doesn't show up unless I make my header color theme "transparent". Any way I can get the icon to appear on top of a color theme? Thank you! What is access password? 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
nicolettely Posted March 7, 2021 Share Posted March 7, 2021 How do you get this Ecwid Shopping bag aligned right with the existing header elements? . I would love for it to be next to the button. www.tothebrimrefill.com Link to comment
tuanphan Posted March 15, 2021 Share Posted March 15, 2021 On 3/7/2021 at 9:36 PM, nicolettely said: How do you get this Ecwid Shopping bag aligned right with the existing header elements? . I would love for it to be next to the button. www.tothebrimrefill.com Hi. It looks like you solved this? Footer on tablet doesn't look good. Do you want to resize contact column width? 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
nicolettely Posted March 16, 2021 Share Posted March 16, 2021 On 3/15/2021 at 5:01 AM, tuanphan said: Hi. It looks like you solved this? Footer on tablet doesn't look good. Do you want to resize contact column width? Thanks for pointing that out! I will fix the footer, but I still need help with the shopping bag. I had to delete it temporarily until I figure out what code I need. Here is the code to add to the site: <div class='ec-cart-widget'></div> What do I need to add to line it up to the left of the social symbols? Link to comment
nicolettely Posted March 19, 2021 Share Posted March 19, 2021 @tuanphan I added the shopping bag back- Its hidden under the announcement banner on my screen. How can I move it down into the navigation bar? Link to comment
tuanphan Posted March 22, 2021 Share Posted March 22, 2021 On 3/19/2021 at 9:20 PM, nicolettely said: @tuanphan I added the shopping bag back- Its hidden under the announcement banner on my screen. How can I move it down into the navigation bar? Add to Design > Custom CSS .ec-cart-widget { top: 40px; z-index: 999; position: relative; right: 50px; } 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
nicolettely Posted March 22, 2021 Share Posted March 22, 2021 Thanks so much @tuanphan! Hate to bother you with this more, but is there a way to position it so it doesn't overlap any navigation on tablet and mobile? Link to comment
tuanphan Posted March 24, 2021 Share Posted March 24, 2021 On 3/22/2021 at 10:01 PM, nicolettely said: Thanks so much @tuanphan! Hate to bother you with this more, but is there a way to position it so it doesn't overlap any navigation on tablet and mobile? Try adding to Design > Custom CSS /* ecwid on mobile */ @media screen and (max-width:991px) { .ec-cart-widget { top: 150px; right: 0; } } 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
UniversalBakehouse Posted March 27, 2021 Share Posted March 27, 2021 (edited) HI @tuanphan I was wondering if i can get some assistance for my site - universalbakehouse.my/beta. I am trying to move my cart to the right hand side as well, but it's still not working. the code i'm using is this .ec-cart-widget { top: 40px; z-index: 999; position: relative; right: 50px; } Currently my theme has this css that was suggested by you previously @media screen and (max-width:767px) { /* Careers */ body#collection-5f522ac37f1ce932fd6c872b #page section:first-child { min-height: 20vh; margin-top: 5vh; } /* about us slide */ body#collection-5f4efaea74b92128fd3cf61e .gallery-fullscreen-slideshow { height: 45vh !important; } /* homepage first slide */ .homepage .gallery-fullscreen-slideshow { height: 45vh !important; } } Hoping you will be able to help 🙂 Thanks in advance. Edited March 27, 2021 by UniversalBakehouse Link to comment
tuanphan Posted March 31, 2021 Share Posted March 31, 2021 On 3/27/2021 at 7:42 PM, UniversalBakehouse said: HI @tuanphan I was wondering if i can get some assistance for my site - universalbakehouse.my/beta. I am trying to move my cart to the right hand side as well, but it's still not working. the code i'm using is this .ec-cart-widget { top: 40px; z-index: 999; position: relative; right: 50px; } Currently my theme has this css that was suggested by you previously @media screen and (max-width:767px) { /* Careers */ body#collection-5f522ac37f1ce932fd6c872b #page section:first-child { min-height: 20vh; margin-top: 5vh; } /* about us slide */ body#collection-5f4efaea74b92128fd3cf61e .gallery-fullscreen-slideshow { height: 45vh !important; } /* homepage first slide */ .homepage .gallery-fullscreen-slideshow { height: 45vh !important; } } Hoping you will be able to help 🙂 Thanks in advance. Hi. The url doesn't exist. Can you check it again? 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
smarta Posted February 1, 2022 Share Posted February 1, 2022 @paul2009 I'm having issues getting the Ecwid shopping bag showing up in the navigation. I did the code injection and custom css code from this thread. I have a lot of custom css so it might be interferring. www.tower4relief.com Link to comment
paul2009 Posted February 2, 2022 Share Posted February 2, 2022 17 hours ago, smarta said: I'm having issues getting the Ecwid shopping bag showing up in the navigation. There are some errors on the site right now, so it's difficult to test externally: The site isn't connecting to the Ecwid store - I can't see any products. Some script is expecting jQuery but this hasn't been added to the site. That said, I think you'll need some amended CSS for the site to resolve the cart positioning issue. Instead of the CSS you've used from the thread above, try this: .ec-cart-widget { position: absolute; right: 150px; top: 49px; z-index: 11; } smarta 1 About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
smarta Posted February 2, 2022 Share Posted February 2, 2022 THANK YOU @paul2009!! That totally fixed it. You rock!! 6 hours ago, paul2009 said: There are some errors on the site right now, so it's difficult to test externally: The site isn't connecting to the Ecwid store - I can't see any products. Some script is expecting jQuery but this hasn't been added to the site. That said, I think you'll need some amended CSS for the site to resolve the cart positioning issue. Instead of the CSS you've used from the thread above, try this: .ec-cart-widget { position: absolute; right: 150px; top: 49px; z-index: 11; } paul2009 1 Link to comment
dv_louise_designs Posted February 24, 2022 Share Posted February 24, 2022 (edited) Hi - I have managed to get my ECWID cart icon over to the right, but want to make it so it is responsive and stays in that space regardless of size of window or device being used to view it. Also - since it putting it in code injection header I no longer am able to view the store. Site: magnolia-sawfish-bdxx.squarespace.com Pass: Employee180! This is the code I was using, that I took down in order to have the store visible while editing: <div data-layout="MEDIUM_ICON_COUNTER" class='ec-cart-widget'></div> <div><script data-cfasync="false" type="text/javascript" src="https://app.ecwid.com/script.js?72483289&data_platform=code" charset="utf-8"></script><script>Ecwid.init();</script></div> Edited February 24, 2022 by dv_louise_designs Link to comment
tuanphan Posted February 27, 2022 Share Posted February 27, 2022 On 2/25/2022 at 2:47 AM, dv_louise_designs said: Hi - I have managed to get my ECWID cart icon over to the right, but want to make it so it is responsive and stays in that space regardless of size of window or device being used to view it. Also - since it putting it in code injection header I no longer am able to view the store. Site: magnolia-sawfish-bdxx.squarespace.com Pass: Employee180! This is the code I was using, that I took down in order to have the store visible while editing: <div data-layout="MEDIUM_ICON_COUNTER" class='ec-cart-widget'></div> <div><script data-cfasync="false" type="text/javascript" src="https://app.ecwid.com/script.js?72483289&data_platform=code" charset="utf-8"></script><script>Ecwid.init();</script></div> It looks like you removed icon? We don't see ecwid icon on header now 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
dv_louise_designs Posted March 2, 2022 Share Posted March 2, 2022 On 2/27/2022 at 2:40 AM, tuanphan said: It looks like you removed icon? We don't see ecwid icon on header now I updated to include in header with code injection- it causes glitching in my Ecwid store though, because store is no longer visible in Order > Menu. Link to comment
tuanphan Posted March 3, 2022 Share Posted March 3, 2022 use this CSS html#ecwid_html body#ecwid_body .ec-minicart { position: fixed; top: 2vw; right: 3vw; } 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
dv_louise_designs Posted April 3, 2022 Share Posted April 3, 2022 On 3/3/2022 at 8:31 AM, tuanphan said: html#ecwid_html body#ecwid_body .ec-minicart { position: fixed; top: 2vw; right: 3vw; } hey @tuanphan, I am still having issues with this. It unfortunately didn't work for me 😞 Link to comment
MirMur Posted February 7 Share Posted February 7 Hello, I'm trying to find code to add the Ecwid Shopping Cart to the navigation panel / header panel of the Squarespace site. https://distriktbymia.ie/store I have the code for the Ecwid Store widget (<div class='ec-cart-widget'></div>) but don't know if it is possible to add / replace the Squarespace shopping cart with the Ecwid code in the navigation. I would like the cart to be visible on all page on the website so the customer can check-out easily from any page. Is there code to do this and where do I add it? Grateful for any insights on this Link to comment
tuanphan Posted February 10 Share Posted February 10 Try adding this to Settings > Advanced > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function() { $('div#block-yui_3_17_2_1_1667325983187_7107').appendTo('.header-actions-action.header-actions-action--social'); }); </script> <style> header#header .ec-minicart__icon .icon-default path[stroke] { stroke: var(--navigationLinkColor); } .header-actions-action.header-actions-action--social { flex-direction: row-reverse; align-items: center; } </style> MirMur 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
Illusterre Posted February 27 Share Posted February 27 (edited) hi @tuanphan and @paul2009, i have the same problem with my shopping cart. How can i get my edwic cart (marked with red) in the exact place of the squarespace cart, so that it looks good on both desktop and mobile? the password for my shop page is illusterreshop if you need it, it is still offline: https://illusterre-sample.squarespace.com/config/pages . The url to my website is https://illusterre.nl/ . I removed the shopping cart of squarespace so only the edwic one is visible. Edit: I managed to get it on the right side, and now it is looking good in the mobile version, but the position is off in the desktop (and probably tablet) version. Also my logo is now off centre. Is there maybe some code to fix this for all devices? Thanks in advance! ❤️ Edited February 27 by Illusterre 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