Configuration

Configure your Shopify store in Weevio Cloud and add the widget to your theme.

After setting up your Shopify Custom App and obtaining API tokens, you'll configure the integration in Weevio Cloud and add the widget code to your Shopify theme. This guide covers both steps in detail.

Part 1: Weevio Cloud Configuration

Step 1: Navigate to Shopify Integration

  1. Log into your Weevio Cloud account
  2. Click Store Management in the sidebar
  3. Go to Integrations > Shopify
  4. You'll see the Shopify integration configuration page

Step 2: Configure PIMS Settings

Before connecting your Shopify store, configure your PIMS integration settings:

Required settings:

  • Shipping Part Code - The PIMS part code used for shipping charges (e.g., "SHOPIFY-SHIPPING")
  • Discount Part Code - The PIMS part code used for discounts (e.g., "SHOPIFY-DISCOUNT")

Optional settings:

  • Location Code - PIMS location for inventory (defaults to "MAIN")
  • NB Substitution Prefix - Prefix for non-billable substitutions

Step 3: Connect Your Shopify Store

  1. Click Add Store button
  2. Enter your Shopify Domain (e.g., your-store.myshopify.com)
  3. Paste your API Key from the Shopify Custom App
  4. Paste your Access Token (Admin API access token)
  5. Click Connect to validate credentials

If the connection is successful, you'll see a green checkmark and "Connected" status.

Troubleshooting connection issues:

  • Verify your domain is correct (should be your-store.myshopify.com)
  • Check that you copied the entire access token without spaces
  • Ensure your Custom App has all required API scopes
  • Try refreshing the page and connecting again

Step 4: Configure Order Sync Webhooks

Choose when orders should sync from Shopify to PIMS:

Options:

  • Don't sync orders - Manual order management only
  • Order placed by customer (orders/create) - Sync immediately when order is placed
  • Order marked paid (orders/paid) - Sync only after payment is confirmed (recommended for most stores)

Select the option that matches your workflow and click Save.

Step 5: Purchase Features

The widget features are available through plan purchases in Weevio Cloud:

Available Features:

  • Basic Shipping ETAs - Static shipping timeframe messaging
  • Premium Shipping ETAs - Zip code-based estimates with USPS integration
  • In-Stock Recommendations - Alternative product suggestions
  • Cross-Sell Recommendations - Complementary product suggestions
  • Vendor Integrations - Multi-source inventory (Ingram Micro, TD SYNNEX)

Purchase the features you need for your business. Features can be added anytime.

Step 6: Copy Widget Code

After connecting your store, Weevio Cloud generates personalized widget code:

  1. Scroll to the Widget Code section
  2. Review the generated Liquid template code
  3. Click Copy Code to copy to clipboard
  4. Keep this handy for the next step

The generated code includes:

  • Configuration object with your Team ID and domain
  • HTML container element
  • Script tag to load the widget

Part 2: Shopify Theme Integration

Now you'll add the widget code to your Shopify theme so it appears on product pages.

Step 1: Access Theme Code Editor

  1. Go to your Shopify Admin panel
  2. Click Online Store > Themes
  3. On your active theme, click Actions > Edit code
  4. You'll see the theme code editor

Step 2: Locate Product Template

Find your product template file. The location varies by theme:

Common locations:

  • Dawn theme (Shopify's default): sections/main-product.liquid
  • Older themes: templates/product.liquid
  • Other themes: sections/product-template.liquid or similar

Use the search box to find files containing "product" in the name.

Step 3: Choose Insertion Point

Decide where to place the widget on your product page. Common locations:

Recommended placement:

  • After product title and price
  • Before the add-to-cart button
  • Inside the product form container

Example placement in Dawn theme:

<div class="product__info-wrapper">
  <div class="product__title">
    <h1>{{ product.title }}</h1>
  </div>

  <div class="product__price">
    <!-- Price information -->
  </div>

  <!-- INSERT WIDGET CODE HERE -->

  <product-form class="product-form">
    <!-- Add to cart button -->
  </product-form>
</div>

Step 4: Paste Widget Code

  1. Find your chosen insertion point
  2. Create a new line
  3. Paste the widget code you copied from Weevio Cloud
  4. Click Save (top right)

Step 5: Verify Installation

Test that the widget appears and works correctly:

  1. Go to your live store (not preview - use actual domain)
  2. Navigate to any product page
  3. You should see the widget displaying shipping estimates or availability
  4. Open browser console (F12) and check for errors
  5. Try changing variants to ensure the widget updates

Widget Code Structure

Understanding the widget code helps with customization:

<script>
  window.weevioWidgetConfig = {
    // Required configuration
    shopifyDomain: '{{ shop.permanent_domain }}',
    teamID: 'your_team_id',
    baseURL: 'https://cloud.weevio.co',
    productId: '{{ product.id | json }}',
    variantId: '{{ product.selected_or_first_available_variant.id | json }}',
    productType: '{{ product.type | json }}',
    widgetType: 'product-page',

    // Optional configuration
    customerId: '{{ customer.id | json }}',  // For B2B pricing

    // Feature flags
    enableCrossSell: false,
    enableImprovedVariantSelection: false,

    // Feature configuration
    storefrontAccessToken: '',  // For improved variant selection
    shippingEstimates: {
      enableDeliveryEtas: true,
      enableLocalPickupEtas: true,
      useStaticZipCode: false
    }
  };
</script>

<!-- Widget Container -->
<div id="Weevio-eCommerce-Widget-Root"></div>

<!-- Widget Script -->
<script defer src="https://api.weevio.com/ecommerce-widget/index.js"></script>

Customizing Widget Configuration

After installation, you can customize the widget by editing the configuration object:

Enable Cross-Sell

enableCrossSell: true,

Enable Improved Variant Selection

enableImprovedVariantSelection: true,
storefrontAccessToken: 'your_storefront_token_here',

Configure Shipping Estimates

shippingEstimates: {
  enableDeliveryEtas: true,          // Show delivery estimates
  enableLocalPickupEtas: true,       // Show pickup options
  useStaticZipCode: false            // Or "12345" for fixed zip
}

Enable B2B Pricing

customerId: '{{ customer.id | json }}',  // Shows B2B pricing for logged-in customers

Learn more about configuration options in the Configuration Guide.

Verification Checklist

After installation, verify:

  • Widget appears on product pages
  • Shipping estimates display correctly
  • Variant changes update the widget
  • No JavaScript errors in browser console
  • Features you purchased are working
  • Widget styling matches your theme

Common Issues

Widget Not Appearing

Check:

  • Verify <div id="Weevio-eCommerce-Widget-Root"> exists in template
  • Ensure widget script URL is accessible
  • Check browser console for JavaScript errors
  • Verify teamID and shopifyDomain are correct

Features Not Working

Check:

  • Verify features are purchased in Weevio Cloud
  • Check feature flags in widget configuration
  • Ensure API credentials are valid
  • Verify required tokens are configured (Storefront API for variant selection)

Styling Issues

Check:

  • Widget may inherit theme styles
  • Add custom CSS to adjust appearance if needed
  • Ensure widget container has enough space
  • Check for CSS conflicts with theme styles

For detailed troubleshooting, see the Troubleshooting Guide.

Next Steps

After successful installation:

Need Help?

If you encounter issues during configuration:

  • Review the Prerequisites Guide for setup requirements
  • Check the Troubleshooting Guide for solutions
  • Contact Weevio support with:
    • Your Team ID
    • Shopify domain
    • Description of the issue
    • Screenshots of configuration and any errors

Need Help?

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