Cart Widget Installation - Weevio Cloud

This guide walks you through adding the Weevio Cart Widget to your Shopify store. The process involves creating a Liquid snippet in your theme and rendering it on your cart page.

Prerequisites

Before you begin, make sure you have:

An active Weevio Cloud account with the Shopify integration enabled
Your Shopify store domain (e.g., your-store.myshopify.com)
Access to your Shopify theme editor (Admin > Online Store > Themes)
Your Weevio Team ID, Base URL, and Shipping ETAs Plan values (provided by Weevio support)

Note:

If you already have the Product Page Widget installed, you likely already have these values configured. The Cart Widget uses the same Weevio Cloud account.

Installation Steps

Create the Liquid Snippet

In your Shopify Admin, go to Online Store > Themes > Actions > Edit code.

Under the Snippets folder, click Add a new snippet and name it weevio-cart-widget.

Paste the following template into the file:

<div class="bss-b2b-custom-fields" id="weevio-cart-widget-custom-fields"
     style="display: none;">
    <div class="cart-note cart__note field">
        <label class="cart-note__label">Cart ID BSS</label>
        <textarea class="cart_token_bss" data-weevio="true"></textarea>
    </div>
</div>

<script>
    window.weevioCartConfig = {
        shopifyDomain: 'your-store.myshopify.com',
        enableWidget: true,
        enableDeliveryEtas: true,
        enableLocalPickup: false,
        enableLoadingText: true,
        fontSize: '',
        verboseText: false,
        useStaticZipCode: false,
        toastBottomOffset: '0px',
        cartItemsSelector: '',
        zipcodeAndDisclaimerSelector: '',

        /* Do not change the values below */
        widgetType: 'cart',
        teamID: '{{teamID}}',
        baseURL: '{{baseURL}}',
        shippingEtasPlan: '{{shippingEtasPlan}}'
    };

    if (window.weevioCartConfig.shopifyDomain
          === 'your-store.myshopify.com') {
        console.error(
            'Weevio Cart Widget Configuration Error: ' +
            'Please replace shopifyDomain with your actual Shopify domain.'
        );
    }
</script>

<div id="Weevio-Cart-Widget-Root"></div>

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />

<script defer type="module" crossorigin
        src="{{baseURL}}/ecommerce-widget/cart/cart-main.js"></script>

Note:

Replace 'your-store.myshopify.com' with your actual Shopify domain. The widget will log an error to the console if this placeholder is not changed.

Add the Snippet to Your Cart Template

You need to render the snippet on your cart page. In the Shopify theme editor, open your cart template (usually templates/cart.json or sections/cart-template.liquid depending on your theme).

For JSON templates (Dawn and similar themes):

Add a Custom Liquid section to your cart template. In the Shopify theme customizer:

Navigate to your Cart page
Click Add section and select Custom Liquid
In the Liquid code field, enter:

{% render 'weevio-cart-widget' %}

Position the section where you want estimates to appear

For classic Liquid templates:

Open your cart template file and add the render tag where you want the widget to load:

{% render 'weevio-cart-widget' %}

Replace Configuration Values

Update the configuration in your Liquid snippet with your actual values:

Placeholder	Replace With
`your-store.myshopify.com`	Your Shopify store domain
`{{teamID}}`	Your Weevio Team ID
`{{baseURL}}`	Your Weevio API base URL
`{{shippingEtasPlan}}`	Your shipping ETAs plan level

Note:

Contact Weevio support if you do not have your Team ID, Base URL, or Shipping ETAs Plan values.

Save and Test

Save all changes, then visit your store's cart page with at least one item in the cart.

You should see:

A zip code prompt asking the customer to enter their location
After entering a zip code, shipping estimates appear next to each cart item
A disclaimer note below the estimates

Verifying the Installation

Open your browser's developer console (F12) on the cart page and check for:

No errors related to weevioCartConfig — if you see a domain error, update the shopifyDomain value
Network requests to your Weevio API base URL — successful requests return shipping estimate data
The widget mount point — look for a <div id="Weevio-Cart-Widget-Root"> element in the DOM

Next Steps

Once the widget is installed and working with default settings, see the Configuration Reference to customize features, display options, and selectors for your specific theme.

Need Help?

For assistance, please send a message to our Support page.

Cart Widget Configuration Reference