Adding a Minicart to your Ecwid store

Last updated

The minicart widget allows your customers to open their cart where they can proceed to checkout. You can add the minicart to any pages of your site or to all pages.

Generate your code


Where to get your store ID?

<div id="my-cart-"></div> <div> <script type="text/javascript" src="https://app.ecwid.com/script.js?" charset="utf-8"></script> <!-- remove layout parameter if you want to position minicart yourself --> <script type="text/javascript"> xMinicart("layout=attachToCategories", "id=my-cart-"); </script> </div>

Currently, minicart can be displayed in the following modes:

Normal view

Shopping bag in a normal view shows an icon of a bag with a number of items in the cart. 

Fixed mode

Add it to your site using the following widget HTML code(without any 'layout' parameters). If you do so, the MiniCart will always be visible and stay right where you've placed it.

<div>
<script type="text/javascript" src="https://app.ecwid.com/script.js?STORE_ID"></script>
<script type="text/javascript"> xMinicart("style="); </script>
</div>

You should use this mode, if you want to place minicart in your site's sidebar or in any other specific place. 

Attached to categories

If this mode is used, the minicart will be attached to horizontal categories widget. In order to enable this mode, add the "layout=attachToCategories" parameter to the minicart widget. E.g.: 

<div>
<script type="text/javascript" src="https://app.ecwid.com/script.js?STORE_ID"></script>
<script type="text/javascript"> xMinicart("style=","layout=attachToCategories"); </script>
</div>

Floating mode

In this mode the minicart will float over the site and stay on the same place of the screen when you scroll  (the right bottom corner of a page, by default). You can also move it around with your mouse. In order to enable this mode, add the "layout=floating" parameter. E.g.:

<div>
<script type="text/javascript" src="https://app.ecwid.com/script.js?STORE_ID"></script>
<script type="text/javascript"> xMinicart("style=","layout=floating"); </script>
</div>

How to change minicart position in a floating mode

Mini view

Shopping bag in a mini view is smaller than in a normal view. It shows "shopping cart" text with a number of items in the cart. If you hover over the text, a cart total will also be shown. Important note: drag-n-drop doesn't work with this type of shopping bag. Also: How to show a cart total in a minicart

Mini Fixed mode

Add it to your site using the following widget HTML code(the "layout=Mini" parameter is used). If you do so, the minicart will always be visible and stay right where you've placed it. 

<div>
<script type="text/javascript" src="https://app.ecwid.com/script.js?STORE_ID"></script>
<script type="text/javascript"> xMinicart("style=","layout=Mini"); </script>
</div> 

Mini and Attached to the product browser

If this mode is used, the minicart will be attached to the "product browser" widget and will be shown near the "Sign in" link. In order to enable this mode, add the "layout=MiniAttachToProductBrowser" parameter to the minicart widget. E.g.: 

<div> 
<script type="text/javascript" src="https://app.ecwid.com/script.js?STORE_ID"></script>
<script type="text/javascript"> xMinicart("style=","layout=MiniAttachToProductBrowser"); </script> 
</div> 
Back to top
Has the article answered your question?

Please send us that question. We will be happy to help by email.

Send a message