How to add Ecwid cart to navigation header in Squarespace

On 2/10/2023 at 10:24 AM, tuanphan said:

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>

 

Hi @tuanphan, can you please help me to align my edwic cart in the right place? How can i get my edwic cart (marked with red) in the exact place of the squarespace cart (marked with green), 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! ❤️

On 2/10/2023 at 8:24 PM, tuanphan said:

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>

 

Hi Thank you! Thank you. I got it to work when I changed the Block ID. But it only works on Desktop. There is  no cart icon on Mobile... which is necessary.  It's there more code for mobile?

Hi @tuanphan Thank you! Thank you. I got it to work when I changed the Block ID. But it only works on Desktop. There is  no cart icon on Mobile... which is necessary.  It's there more code for mobile?

On 3/4/2023 at 5:44 AM, MirMur said:

Hi @tuanphan Thank you! Thank you. I got it to work when I changed the Block ID. But it only works on Desktop. There is  no cart icon on Mobile... which is necessary.  It's there more code for mobile?

What is your site url?

On 3/6/2023 at 8:13 PM, tuanphan said:

What is your site url?

www.distriktbymia.ie

On 3/17/2023 at 11:00 AM, MirMur said:

www.distriktbymia.ie

Thank you. It should be appear here or?

@paul2009 or @tuanphan — I'm hoping one of you can help me! I've been tracking this thread and trying the custom code you've suggested and I'm still having issues. The site is https://openroadbikes.com/shop (password: forthethrillofit)

The cart is way off the page:

What I'd like is to have it exactly where Squarespace's cart typically appears (to the left of the header button):

And same thing on mobile (making sure the Lightspeed / Ecwid cart essentially replaces the Squarespace cart with the same positioning):

 

@BethanyBoss Try this code (for desktop) to Custom CSS

@media screen and (min-width:992px) {
.ec-cart-widget {
    top: 10px;
    right: 20vw !important;
}
}

On 4/5/2024 at 4:13 AM, tuanphan said:

@BethanyBoss Try this code (for desktop) to Custom CSS

@media screen and (min-width:992px) {
.ec-cart-widget {
    top: 10px;
    right: 20vw !important;
}
}

@tuanphan — It's not aligning properly still. Is there another way to tweak the CSS so that it's more responsive?

On 4/18/2024 at 1:26 AM, BethanyBoss said:

@tuanphan — It's not aligning properly still. Is there another way to tweak the CSS so that it's more responsive?

You can adjust top and right value to what you want. If it still problem, you can let me know what problem, I can check again easier