Customize Shopping Bag design

Last updated

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.

If you haven't added the Shopping Bag icon to your website page yet, learn how you can do it in the guide Adding Shopping Bag to your Ecwid store.

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 shopping-bag-small-icon.png
SMALL_ICON_COUNTER shopping-bag-small-icon-counter.png
COUNTER_ONLY shopping-bag-counter-only.png
TITLE_COUNTER shopping-bag-title-counter.png
MEDIUM_ICON_COUNTER shopping-bag-medium-icon-counter.png
MEDIUM_ICON_TITLE_COUNTER shopping-bag-medium-icon-title-counter.png
BIG_ICON_TITLE_SUBTOTAL shopping-bag-big-icon-title-subtotal.png
BIG_ICON_DETAILS_COUNTER shopping-bag-big-icon-details-subtotal.png

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-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 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 shopping-bag-bag.png
CART shopping-bag-cart.png
BASKET shopping-bag-basket.png

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

You can use a custom icon for the Shopping bag by adding the parameter data-custom-icon-url to the "ec-cart-widget" container in the integration code, as shown in the example below:


<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>

where:
VALUE is either a URL to the custom icon file or an SVG markup;
STORE_ID is 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 to a specific place within your pages
data-fixed-position TOP_LEFT / TOP_RIGHT / BOTTOM_LEFT / BOTTOM_RIGHT Pins the Shopping Bag to the screen making the icon follow as you scroll through the page
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

Apply redirect on click to Shopping Bag

You can add the redirect URL to a custom page on click to the Shopping Bag by means of the data-store-redirect-url parameter specified for the "ec-cart-widget" container in the integration code, as shown in the example below:


<div data-store-redirect-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>

where:
VALUE is the URL of the redirect page;
STORE_ID is the ID of your Ecwid store.

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.

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