.

.

Which jQuery did you try?

Well I figured it after several hours of trial and error. I hope I can make someones day who comes searching in the future. 

Put the following code into the header section of code injection 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$( document ).ready(function() {
	$( ".header-actions-action.header-actions-action--social" ).append("<div class='ec-cart-widget'></div>");
});
</script>

and then a bit of css to make the bag the same size as the other icons and change the color to be the same. 

.ec-minicart--no-shape{
  padding: 0px !important; 
}
.ec-minicart__icon{
  height: 30px !important;
  width: 30px !important;
}
.ec-minicart__icon .icon-default path[stroke], .ec-minicart__icon .icon-default circle[stroke]{
  stroke: #(color code you want) !important;
}

HI-I tried to insert the code into the header, and the cart shows up on all pages except the 'shop' page, where my Ecwid store is. Also, the cart is not clickable-it's just an icon. When you click on it, nothing happens. If anyone has any ideas how I can fix this--or what I'm doing wrong--I'd love your help!!

@AKAVAN I put the code below on every page that doesn't have an Ecwid store on it.

And the 2nd code below is put on every page with an Ecwid store on it.

I've done some CSS design changes you'll have to update or remove.

Code for pages without Ecwid Store

<div data-fixed-shape="RECT" data-layout="BIG_ICON_TITLE_SUBTOTAL" data-icon="cart" data-horizontal-indent="50px" data-responsive="FALSE" class='ec-cart-widget' style="color: #ffffff00;"></div>
<div>
<script data-cfasync="false" type="text/javascript" 
src="https://app.ecwid.com/script.js?28194192&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

Code for pages with Ecwid Store

<div data-fixed-shape="RECT" data-layout="BIG_ICON_TITLE_SUBTOTAL" data-icon="cart" data-horizontal-indent="50px" data-responsive="FALSE" class='ec-cart-widget' style="color: #ffffff00;"></div>

On 8/4/2020 at 3:45 PM, clarson1229 said:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$( document ).ready(function() {
	$( ".header-actions-action.header-actions-action--social" ).append("<div class='ec-cart-widget'></div>");
});
</script>

and then a bit of css to make the bag the same size as the other icons and change the color to be the same. 

.ec-minicart--no-shape{
  padding: 0px !important; 
}
.ec-minicart__icon{
  height: 30px !important;
  width: 30px !important;
}
.ec-minicart__icon .icon-default path[stroke], .ec-minicart__icon .icon-default circle[stroke]{
  stroke: #(color code you want) !important;
}

 

@clarson1229 this was so helpful, thank you!! do you know if there is way to make it so the cart icon is to the left of the CTA button? Also - how to show it in mobile?

I modified the code to be .header-actions-action--CTA but it puts it below the CTA on the left side, whereas I want it to be the same level to the left of the CTA.

Site: https://magnolia-sawfish-bdxx.squarespace.com/

Pass: demo

Also in case you're not an active user anymore, @tuanphan any ideas?