Adding shopping bag to a custom site

You can add a shopping bag icon on your custom website with the help of the Additional Shopping Bag store extension. The icon helps your customers see how many items they’ve added to their order and proceed to checkout.

You can also change the look and feel of the default 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. Combining multiple parameters within one integration code helps create the shopping bag icon that best matches your website design.

Adding a default shopping bag

If your Ecwid store is added to a custom website, you can add a shopping bag using a small piece of code. You will need to copy and paste this code to your website.

To add a shopping bag to a custom-built website:

1. From your Ecwid admin, go to Sales channels.
2. In the "Sell on your website" section, click on the Custom website block.
3. Scroll to Store extensions → Additional Shopping Bag.
4. Click Add Shopping Bag and the shopping bag code will be copied to your clipboard:
   
5. Log in to your website’s admin area and open the page where you want to display the shopping bag.
6. Paste the copied shopping bag code into the page source code. Depending on the platform you use, that may be HTML, source tab, or a separate button to add codes. If you are not sure how to add custom codes to your website, please contact your website developer for more detailed instructions.
7. Save and publish the changes.

Once you save and publish, a shopping bag icon will appear on your website.

Changing shopping bag layout

You can change the default 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

Showing or hiding 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.

Changing 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

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

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

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

Showing or hiding 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.

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