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.

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:

1. 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.
2. 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.

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.