Jump to content

Recommended Posts

  • Replies 5
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Posted (edited)

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;
}

 

Edited by clarson1229
  • 4 months later...
Posted

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!!

Posted

@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>

 

  • clarson1229 changed the title to .
  • 1 year later...
Posted
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? 

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.