Minicart

Last updated
  1. Widget code
  2. Normal view
  3. The mini cart is not shown by default but the Floating mode is enabled if there's any product in shopping bag
  4. Mini view
  5. Additional Settings

Widget code

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

The minicart is not shown by default but the Floating mode is enabled if there's any product in shopping bag

Just do not add the code of the minicart widget to your site. By default it will not be shown. The minicart will appear automatically when you add a product to cart and it will act as in the "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> 

Additional Settings

Was this article helpful?
4 out of 10 found this helpful
Questions?
Get help
  • Presales Chat

    Need help choosing the right Ecwid plan? Our Sales team has the answer you’re looking for.

  • Forums

    Join the Ecwid community. Discuss support topics and store ideas with other Ecwid users.

  • Contact us

    Still have questions about Ecwid? Let us know! We will be glad to help you with your Ecwid store.

  • Status Monitor

    Get real time status updates on Ecwid services here, 24/7