How to Add an AI Shopping Assistant to Shopify or WooCommerce

You can put an AI shopping assistant on a Shopify or WooCommerce store in an afternoon. Most of the work is copy and paste. The one step that needs a little code, connecting the chat's "Add to cart" button to your real cart, takes a few lines you can copy from this guide. The walkthrough follows the AskMerra documentation and also applies to Magento 2 and custom-built shops.

Before you start

You need four things:

• An AskMerra account and a shop. You enter your website domain when you create the shop, because the widget only runs there.
• Your product data, as an export file or a feed URL.
• Access to your theme files, a header/footer plugin or Google Tag Manager.
• Your public site key (it starts with pk_live_), shown in Dashboard → Install.

Step 1: Import your catalog

AskMerra only recommends products that are in your catalog, so a complete and fresh catalog is the most important input. There are three ways to bring products in today:

• File upload (CSV, JSON or XML): the quickest way to get started. Files can be up to 25 MB, and CSV separators and encodings are detected automatically.
• Feed URL: if you already publish a product feed, for example for Google Shopping, AskMerra re-syncs it automatically every 1 to 6 hours depending on your plan. A Google Merchant Center XML feed works as is.
• Push API: for custom platforms and ERPs that need stock and prices in real time.

Where the data comes from on each platform

On Shopify, install a Google Shopping feed app and add its feed URL, or upload a CSV export. On WooCommerce, use a product feed plugin or a CSV export. On Magento 2, use a feed extension or the Push API. Native Shopify and Magento apps with automatic sync are on the roadmap. Until they ship, the feed and the APIs cover the same ground.

Mapping and enrichment

After the upload, AskMerra suggests how your columns map to its fields (id, name, price, sale price, availability, categories, brand and so on). Check the mapping before you import. Columns you map to attribute:<name>, such as attribute:skin_type, become searchable product attributes.

Each product is then enriched: AI extracts use cases, skin or hair types, concerns, key ingredients or specs, and routine steps, and indexes the result for semantic search. Later price and stock changes apply immediately and do not trigger enrichment again. Products missing from a new full sync are deactivated, never deleted.

Pushing products from your backend

If you sync from your own system, send batches of up to 500 products, authenticated with your secret key:

curl -X POST "https://api.askmerra.com/v1/catalog/products:batchUpsert" \
  -H "Authorization: Bearer $ASKMERRA_SECRET_KEY" \
  -H "Content-Type: application/json" \
  -d '{"products":[{"external_id":"LUM-SE-01","name":"Hydra Glow Serum 30 ml","price":39,"in_stock":true}]}'

Always send the complete product: an upsert replaces what is stored, so fields you leave out are cleared.

Step 2: Add one script tag

Copy your snippet from Dashboard → Install and paste it just before the closing </body> tag on every page where the assistant should appear:

<script src="https://cdn.askmerra.com/v1/widget.js" data-site-key="pk_live_…" async></script>

The script is about 27 KB gzipped. It waits until your page has loaded and the browser is idle, then renders only the launcher button. The chat renders inside a Shadow DOM, so your theme's CSS cannot break it and its CSS cannot leak into your theme.

Shopify

Go to Online Store → Themes → Edit code, open layout/theme.liquid and paste the snippet before </body>.

WooCommerce and WordPress

Add the snippet with a header/footer plugin such as WPCode, in the footer section. If you prefer code, put it in your child theme's footer.php before wp_footer().

Google Tag Manager

Create a Custom HTML tag that fires on All Pages. Some GTM setups strip data-* attributes, so use the settings object instead:

<script>
  window.AskMerraSettings = { siteKey: 'pk_live_…' };
</script>
<script src="https://cdn.askmerra.com/v1/widget.js" async></script>

On Magento 2, add the snippet under Content → Design → Configuration → HTML Head → Scripts and Style Sheets. Single-page apps (React, Vue, Next.js) load it once in the root layout, and the conversation stays open across client-side navigation.

Step 3: Set your allowed domains

Your site key only works on the domains listed in Settings → Allowed domains. shop.com also covers www.shop.com, and *.shop.com covers every subdomain. Add your staging domain too, or the widget will refuse to run there.

One warning: the snippet must contain your pk_live_ site key. Never paste an sk_live_ secret key into a web page. The widget endpoints reject it anyway.

Step 4: Give the assistant product-page context

On a product page, AskMerra can know which product the shopper is looking at, so "Is this good for oily skin?" just works. It reads the product from the page's schema.org JSON-LD (Product.sku, then productID, then mpn). On WooCommerce, the JSON-LD from your SEO plugin is used. If your theme outputs none, set the product yourself:

<script>
  window.AskMerraSettings = { productId: 'LUM-SE-01' };
</script>

The value must match the product's external_id or sku in your AskMerra catalog.

Step 5: Connect "Add to cart"

Product cards in the chat can show an "Add to cart" button. Turn it on in the widget behavior settings, then handle the add_to_cart event with your platform's cart API. Without a handler, the button simply opens the product page.

On Shopify, externalId is the variant id when your catalog comes from Shopify:

AskMerra.on('add_to_cart', async ({ externalId }) => {
  await fetch('/cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ items: [{ id: Number(externalId), quantity: 1 }] }),
  });
});

On WooCommerce, externalId is the WooCommerce product id:

AskMerra.on('add_to_cart', async ({ externalId }) => {
  const body = new URLSearchParams({ product_id: externalId, quantity: '1' });
  await fetch('/?wc-ajax=add_to_cart', { method: 'POST', body });
  document.body.dispatchEvent(new Event('wc_fragment_refresh'));
});

The widget script loads asynchronously, so the safest place to register handlers is the onReady callback in window.AskMerraSettings. The same JavaScript API lets you open the chat from your own "Ask an expert" button with AskMerra.sendMessage(), follow your site's language switcher with AskMerra.setLocale(), and forward open, product_click and add_to_cart events to your analytics.

Step 6: Check the installation

Open your shop in a browser, then go to Dashboard → Install. It shows when and where the widget was last seen, which also covers tag manager installs. The Check now button fetches your domains and reports whether the snippet was found, whether a different site key is installed, or whether the site could not be reached.

If the launcher does not appear, open the browser console. The widget logs a clear warning: unknown site key, domain not allowed, or shop paused. If your site sends a Content Security Policy header, allow https://cdn.askmerra.com in script-src and https://api.askmerra.com in connect-src.

A few finishing touches:

• Hide the launcher on checkout with a path rule such as /checkout*, so the purchase flow stays free of distractions.
• Ask real customer questions in the Playground before you go live. Its debug panel shows which products were retrieved and which route answered.
• Design changes you publish from the dashboard reach your site within about a minute, with no change to the snippet.

Get started

To follow these steps on your own store, create your account, or book a demo if you would like a guided walkthrough. The full reference lives in the installation docs and the JavaScript API docs. If you are still weighing the idea, start with what an AI shopping assistant is and how it differs from a classic search box in conversational product search vs keyword search.