A shopping bag helps customers see how many items they’ve added to their order and proceed to checkout. When you embed your online store, separate products, or Buy buttons to a website, the shopping bag icon will appear on that page automatically as soon as at least one product is added to the cart.
You also have an option to add an additional shopping bag to other pages on your website or put it in the website header. This icon will let website visitors know that you have an online store where they can shop. Also, you can modify the design of the shopping bag: choose the icon, the info to display (number of items, subtotal, etc.), set the position where it will display, etc.
Adding a shopping bag to a website
You can add a shopping bag to your website pages so that customers can go to the cart page from any page on your website. Also, a shopping bag icon will remind customers that they’ve added products to their cart encouraging them to complete the purchase.
To add a shopping bag to website pages:
- Go to your store admin → Website.
- Scroll down to the "Add your store to one more website" section and click Pick Platform → Other platforms and sitebuilders.
- Click Add shopping bag. The shopping bag code for your store will be copied to the clipboard.
- Go to your website editor and open the page where you want to add the shopping bag.
- Paste the code to the source code of the page. That may be HTML or source tab or a separate button to add codes. That varies depending on the website builder you use.
- Save and publish the page changes.
The additional shopping bag icon will appear on your website.
Customizing shopping bag design
You can customize the design of the shopping bag to make it match your website design better. To change the default shopping bag design, you need to change the default code of the shopping bag and add a new piece of code that will make the desired change. You will see the codes for different design changes below.
To change the design of your shopping bag icon:
- Select the desired design change below.
- Copy the code under the desired design change.
- Replace VALUE with one of the suggested values and STORE_ID with the ID of your store that you can copy in your store admin, in the bottom left corner.
- Go to the editor of your website and open the page where you want to add the shopping bag.
- Paste the code to the source code of the page. That may be HTML or source tab or a separate button to add codes. That varies depending on the website builder you use.
- Save and publish the changes.
Layout
| 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 |
Here is a code to change the shopping bag layout:
<div data-layout="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code"charset="utf-8"></script>
<script>Ecwid.init();</script>
</div>
where:
VALUE is the name of the layout that you want to apply to your shopping bag icon. Copy it from the left column in the table above.
STORE_ID is the ID of your store that you can copy in your store admin, in the bottom left corner.
Icon
| Value | Icon |
| BAG | |
| CART | |
| BASKET |
Here is a code to change the shopping bag icon:
<div data-icon="VALUE" class="ec-cart-widget"></div>
<div><<script data-cfasync="false" type="text/javascript"
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code"
charset="utf-8"></script>
<script>Ecwid.init();</script>
</div>
where:
VALUE must be replaced with BAG, CART, or BASKET depending on what icon you want to use.
STORE_ID is the ID of your store that you can copy in your store admin, in the bottom left corner.
To add a custom image as a shopping bag icon, use this code:
<div data-custom-icon-url="VALUE" class="ec-cart-widget">
</div><div><script data-cfasync="false" type="text/javascript" src="https://app.shopsettings.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. To get an URL to your icon, upload your image to any image hoster where you can get a direct link to an image.
STORE_ID is the ID of your store that you can copy in your store admin, in the bottom left corner.
Border shape
To change the shape of the border around the shopping bag icon, use this code:
<div data-fixed-shape="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code"
charset="utf-8"></script><script>Ecwid.init();</script>
</div>
where:
VALUE must be replaced with NONE for no border, RECT for a rectangle border, or PILL for a rounded rectangle border.
STORE_ID must be replaced with the ID of your store that you can copy in your store admin, in the bottom left corner.
Position
| 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 |
Here is a code to change the shopping bag position:
<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.shopsettings.com/script.js?STORE_ID&data_platform=code"
charset="utf-8"></script><script>Ecwid.init();</script></div>
where:
VALUE must be replaced with one of the values from the table above depending on what position you want to apply to your shopping bag.
STORE_ID must be replaced with the ID of your store that you can copy in your store admin, in the bottom left corner.
Animation
You can show or disable the animation effect when an item is added to cart by using the following code:
<div data-show-buy-animation="VALUE"
class="ec-cart-widget"></div>
<div><script data-cfasync="false"
type="text/javascript"
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code"
charset="utf-8"></script><script>Ecwid.init();</script>
</div>
where:
VALUE must be replaced with TRUE for showing the animation or FALSE for disabling it.
STORE_ID must be replaced with the ID of your store that you can copy in your store admin, in the bottom left corner.
Use the same shopping bag design on all devices
The shopping bag icon adapts to the screen width and may look differently on devices with different screen width. To force the shopping bag to use the same design on all devices, use this code:
<div data-responsive="VALUE"
class="ec-cart-widget"></div>
<div><script data-cfasync="false"
type="text/javascript"
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code"
charset="utf-8"></script><script>Ecwid.init();</script>
</div>
where:
VALUE must be replaced with TRUE for the cart to automatically adapt to different screen sizes or FALSE for the cart to have the same design on different screen sizes.
STORE_ID must be replaced with the ID of your store that you can copy in your store admin, in the bottom left corner.