Customizing shopping bag icon style
You can change the look and feel of the shopping bag icon, define its position on the page, apply the redirect to a custom page or animated effects by means of special parameters that are added to the integration code.
You can combine multiple parameters within one integration code to create the Shopping Bag icon that best matches your website design.
In this article:
Change shopping bag layout
You can change the layout of the shopping bag by adding the parameter data-layout to the "ec-cart-widget" container in the integration code, as shown in the example below:
<div data-layout="VALUE" 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>
where:
VALUE is one of the supported values for the data-layout parameter;
STORE_ID is the ID of your Ecwid store.
You can find the supported values and see how each layout looks in the table below.
Value | Layout |
SMALL_ICON | ![]() |
SMALL_ICON_COUNTER | ![]() |
COUNTER_ONLY | ![]() |
TITLE_COUNTER | ![]() |
MEDIUM_ICON_COUNTER | ![]() |
MEDIUM_ICON_TITLE_COUNTER | ![]() |
BIG_ICON_TITLE_SUBTOTAL | ![]() |
BIG_ICON_DETAILS_SUBTOTAL | ![]() |
Show or hide empty shopping bag
You can show or hide the shopping bag when it’s empty by means of the data-show-empty-cart parameter specified for the "ec-cart-widget" container in the integration code, as shown in the example below:
<div data-show-empty-cart="VALUE" 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"data-fixed="TRUE"></script><script>Ecwid.init();</script></div>
where:
VALUE is either TRUE or FALSE;
STORE_ID is the ID of your Ecwid store.
Change shopping bag icon
You can change the default shopping bag icon by adding the parameter data-icon to the "ec-cart-widget" container in the integration code, as shown in the example below:
<div data-icon="VALUE" 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>
where:
VALUE is one of the supported values for the data-icon parameter;
STORE_ID is the ID of your Ecwid store.
You can find the supported values and see how each icon looks in the table below.
Value | Icon |
BAG | ![]() |
CART | ![]() |
BASKET | ![]() |
Change shopping bag border shape
You can change the shape of the border around the shopping bag by adding the parameter data-fixed-shape to the "ec-cart-widget" container in the integration code, as shown in the example below:
<div data-fixed-shape="VALUE" 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>
where:
VALUE is NONE (no border) / RECT (rectangle border) / PILL (rounded rectangle border);
STORE_ID is the ID of your Ecwid store.
Apply custom shopping bag icon
To use a custom shopping bag icon on your website:
- Upload your icon image to your hosting or to any image hosting where you can get a direct link to the image. Or create an SVG image of your shopping bag icon.
- Use the following code to add a shopping bag to your website:
<div data-custom-icon-url="VALUE"
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>
and replace:
VALUE with either a URL to the custom icon file or an SVG markup;
STORE_ID with the ID of your Ecwid store.
Change shopping bag position
You can change the shopping bag position by means of several parameters added to the "ec-cart-widget" container in the integration code.
<div data-fixed="VALUE"
data-fixed-position="VALUE"
data-fixed-shape="VALUE"
data-horizontal-indent="VALUE"
data-vertical-indent="VALUE" 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>
where:
VALUE is one of the supported values for each parameter;
STORE_ID is the ID of your Ecwid store.
You can find the parameters that allow to change the shopping bag position and their supported values in the table below.
Parameter | Value | Description |
data-fixed | TRUE / FALSE | Makes the shopping bag stick on a page as you scroll through. Use the "data-fixed-position" parameter to define the position of the bag. |
data-fixed-position | TOP_LEFT / TOP_RIGHT / BOTTOM_LEFT / BOTTOM_RIGHT | Defines the position where the fixed shopping bag appears. To use a shopping bag in a fixed mode, also include the "data-fixed" parameter in your code. |
data-horizontal-indent | Positive integer including zero | Defines the horizontal margin between the shopping bag widget and the edge of the screen or an iframe container. |
data-vertical-indent | Positive integer including zero | Defines the vertical margin between the shopping bag widget and the edge of the screen or an iframe container. |
Show or hide shopping bag animation
You can show or hide the animated effect when items are added to the shopping bag by means of the data-show-buy-animation parameter specified for the "ec-cart-widget" container in the integration code, as shown in the example below:
<div data-show-buy-animation="VALUE"
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>
where:
VALUE is either TRUE or FALSE;
STORE_ID is the ID of your Ecwid store.
Use the same shopping bag design on all devices
You can disable responsiveness of the shopping bag widget to make it look the same in different screen sizes, desktop and mobile. For this, include the data-responsive parameter into the "ec-cart-widget" container in the integration code, as shown in the example below:
<div data-responsive="VALUE"
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>
where:
VALUE is either TRUE (the cart automatically adapts to different screen sizes) or FALSE (the cart has the same design on different screen sizes);
STORE_ID is the ID of your Ecwid store.