Ecwid Integration

Installation Guide

Add the widget to your Ecwid store using Custom JavaScript in your control panel.

1 Add Custom JavaScript

Go to Ecwid Control Panel → Settings → General → Cart & Checkout → Custom JavaScript. Paste:

<script src="https://cdn.gunupdate.com/widget/gunupdate-widget.js"
        data-store="YOUR_API_KEY"
        data-platform="ecwid"
        data-auto-detect="true"
        data-mode="compatibility"
        defer></script>

2 Ecwid API Method (advanced)

For more control, use the Ecwid JS API to pass product data:

Ecwid.OnPageLoaded.add(function(page) {
    if (page.type === 'PRODUCT') {
        var el = document.getElementById('gunupdate-widget');
        if (!el) {
            el = document.createElement('div');
            el.id = 'gunupdate-widget';
            el.dataset.store = 'YOUR_API_KEY';
            el.dataset.platform = 'ecwid';
            el.dataset.mode = 'compatibility';
            el.dataset.productId = page.productId;
            el.dataset.productName = page.name || '';
            el.dataset.productSku = page.sku || '';
            var cart = document.querySelector('.details-product-purchase');
            if (cart) cart.after(el);
        }
    }
});

Widget Modes

compatibility

"Does this fit my gun?" — customer uploads photo or selects model, gets yes/no answer + compatible products from your store.

builder

Interactive gun builder — clickable hotspot zones on a gun silhouette. Customers explore accessory categories visually.

configurator

Full experience — build + compatibility check + smart recommendations. Best for stores with 50+ gun accessories.

Data Attributes Reference

Attribute	Required	Description
data-store	Yes	Your API key
data-product-id	Yes	Product ID on your platform
data-product-name	No	Product name for better matching
data-product-sku	No	SKU for precise matching
data-mode	No	compatibility \| builder \| configurator
data-theme	No	light \| dark \| auto
data-platform	No	Platform identifier for analytics
data-lang	No	Language code (default: en)

Installation Guide

1 Add Custom JavaScript

2 Ecwid API Method (advanced)

Widget Modes

compatibility

builder

configurator

Data Attributes Reference

Requirements

Need an API key?

Other Platforms

Need Help?