Add a Shopping Bag Widget to Your Website

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

  1. Select the Pages tab at the top of your Websites app.
  2. On the right-hand sidebar, under Global Content, click on Footer.

  3. Select the (+) button at the bottom of the page or in between the content blocks, where you'd like to add the HTML block.

  4. Select HTML from the menu that appears.

  5. 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.
  6. 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.
  7. 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.

websites-360-bag-widget-demo.gif

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.