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.

For Instant Site, Wix and Wordpress users: follow the instructions on how to customize shopping bag icon on Instant Site (Header block), on Wix and Wordpress.

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 Overview.
  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:
    adding_shopping_bag.png
  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 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_SUBTOTAL shopping-bag-big-icon-details-subtotal.png

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.

The code works for floating shopping bag only.

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

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.

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.

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.

Was this article helpful?

Awesome! Thanks for your feedback!

Thanks for your feedback!

Sorry about that! What went wrong?
120 out of 193 found this helpful
10
We use cookies and similar technologies to remember your preferences, measure effectiveness of our campaigns, and analyze depersonalized data to improve performance of our site. By choosing «Accept», you consent to the use of cookies.
Accept cookies Decline