Add a Shopping Bag Widget to Your Website
When you set up your Store, you can add a Shopping Bag widget to your website so that users can navigate to their cart and check out after adding products, regardless of which page they're viewing.
Set up a shopping bag widget
- Select the Pages tab at the top of your Websites app.
- On the right-hand sidebar, under Global Content, click on Footer.
-
Select the (+) button at the bottom of the page or in between the content blocks, where you'd like to add the HTML block.
- Select HTML from the menu that appears.
- In the newly-created HTML Block, paste the following code to display the Shopping Bag widget:
<!--SHOPPING BAG-->
<div data-responsive="TRUE"
data-show-buy-animation="TRUE"
data-layout="MEDIUM_ICON_COUNTER"
data-fixed="TRUE"
data-fixed-position="BOTTOM_RIGHT"
data-fixed-shape="PILL"
data-horizontal-indent="20"
data-vertical-indent="20"
data-icon="CART"
data-show-empty-cart="TRUE"
class="ec-cart-widget">
</div>
<div>
<script data-cfasync="false" type="text/javascript"
src="https://app.shop.websites360.com/script.js?xxxxxxxx&data_platform=code"
charset="utf-8"></script>
<script>Ecwid.init();</script>
</div>
Note: You can change the location of your Shopping Bag icon by changing the information in the data-fixed-position field to "BOTTOM_LEFT", "TOP_LEFT", or "TOP_RIGHT", as well as adjust the icon's padding by editing the numerical values in the data-horizontal-indent and data-vertical-indent fields. - Replace 'xxxxxxx' with your store ID from. Pro Tip: Use the Find & Replace feature!
You can find your store ID in your Shop App dashboard. Click Shop App from the Marketing 360® dashboard or from the App Menu near the top-left corner of the page. - Click Save on the HTML block.
The result will be a 'floating' widget in the top right corner of the browser that displays once the user adds a product to their shopping bag.
Note: It's important to make sure that all pages on the site use the global footer. This allows the Shopping Bag widget to be displayed on all pages.
Related Articles
Add a 'Buy Now' Button or Widget to Your Website
Any product can be prominently featured on your website's homepage or anywhere else with the "Buy Now" feature. Customers can select options and checkout right from the page! You can find the HTML code for Buy Now widgets in your Shop App dashboard. ...Add PayPal Checkout to Your Store
You can accept payments on your online store using PayPal. To use PayPal in your store, you need a Business PayPal account. You can integrate it with your store by following the steps below. Setup the PayPal connection Part 1: Create your PayPal ...Creating Custom Fields at Checkout
Custom fields allow you to collect extra data like country-specific tax IDs, notes on how to fulfill orders or any other information from your customers at checkout. You can add as many custom fields as you want. The information that your customers ...Upload Your Product Feed to Google Shopping
You can sync your Google Shopping Ads with your store by linking Shop App to the Google Merchant Center. Store Requirements Before you upload your product feed to Google Merchant Center, you need to make sure that your store meets the Google Merchant ...Tracking and recovering abandoned carts
When a customer adds products to a cart, goes to checkout, specifies their email address, and then leaves the store without placing an order, an abandoned cart is saved in your store. You can track and recover abandoned carts by sending your ...