ECWID - cart icon customization

Hi,
I am using Ecwid and it’s nice but I have a problem
the shopping cart is nearly invisible and I can’t figure out where to paste the additional codes to customize it provided
in this page so I get a lot of abandoned carts (people really don’t see it)
Anyone succeded in customizing the cart?

thanks

The link you gave above is to the ECWID help area.

Could you give a link to your page that has the cart?

here is the link

the problem is the code in the page Ecwid i linked, I can’t figure out where to paste it

The help page you are looking for is for the ec-cart-widget. I’m not experienced with ECWID but I think that “widget” is for placing a separate cart on the header of the page.

It looks like you have an HTML stack that you put a my-store- widget in. The cart is at the bottom of that widget. But it’s a different cart than the stand-alone one is.

I think you should consider putting that separate cart widget on the page. Website best practices say that most folks look for the shopping art up in the header (top left). I don’t know if the theme you are using has any way of adding extra content to the header.

If you go to this page on the ECWID site, and scroll down to the instructions for Adding a shopping bag to a custom-built website. Grab that widget and place it near the top of the page.

1 Like

thanks
I’m doing the website from scratch as I am switching to Foundry
The problem with the separate shopping bag is that it is still almost invisible and I can’t follow the procedures to make it look like this (as explained in the Ecwid help page) shopping-bag-big-icon-details-subtotal

If you have a page with a separate shopping bag on it, we can probably help you make it more visible with some CSS.

1 Like

thanks
so this is the separate shoping bag

<div class="ec-cart-widget"></div>
<div>
<script data-cfasync="false" type="text/javascript" src="https://app.ecwid.com/script.js?28334007&data_platform=code&data_date=2020-05-18" charset="utf-8"></script>
<script type="text/javascript">Ecwid.init();</script>
</div>

and this is what I am supposed to “add” to it.
I don’t know what it means

<div data-layout="BIG_ICON_DETAILS_SUBTOTAL" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

if it’s a stacks page, add an html stack and paste it inside that.

yes I used an html frame.
the first code works but when I add the second part it doesnt change anything, it just pops another shopping bag

Here is the code with your store stuff in the lBig-icon version:

<div data-layout="BIG_ICON_DETAILS_SUBTOTAL" class="ec-cart-widget"></div>
<div>
    <script data-cfasync="false" type="text/javascript"
    src="https://app.ecwid.com/script.js?28334007&data_platform=code&data_date=2020-05-18" charset="utf-8"></script>
    <script>
        Ecwid.init();
    </script>
</div>
1 Like

wow thanks.
there is no way I could have figured this out following Ecwid explanation.

1 Like

By the way, if you have just one product and don’t expect a customer to “shop around”, it may make sense to send a customer to the shopping cart page right after they click “Buy”. You can do it by enabling the “Open bag when “Add to bag” is clicked” option in the Ecwid Control Panel. Screenshot: https://d.pr/free/i/igb1Mz .

1 Like

that’s a useful option and it makes sense, thanks