How to Install the Agent on Shopify

Learn where to insert the code in your Shopify theme, how the agent reads your store's catalog, what to do with the cart and checkout, and how to verify the installation.

September 6, 2026

Shopify already has a machine-readable catalog, so the agent collects product data more accurately than anywhere else: prices, variants, availability, and photos come directly from the store.

Step 1. Insert the code into your theme#

1. In your Shopify admin, open Online Store → Themes.
2. For your active theme, click … → Edit code.
3. In the file list, find layout/theme.liquid.
4. Insert the code line from your account directly before the closing </body> tag.
5. Save.

An alternative without editing the theme: Online Store → Preferences → Custom code or any app for script insertion. The result is the same.

    <!-- Commerce Agents -->
<script src="https://comag.vibevox.pro/widget.js" data-slug="your-slug" async></script>
  </body>
</html>

Get the exact line from your account using the "Copy code" button: it already includes your storefront's address.

Step 2. Build your catalog#

In the settings, specify your store's address and start the analysis. The Shopify crawler reads structured product data: name, price, currency, availability, description, and photos. Variants (sizes, colors) appear on the product card as characteristics.

Re-running the analysis updates prices and availability. Run it after major inventory changes: the agent does not connect directly to your database but works with the collected catalog.

Step 3. Let the store handle payments#

On Shopify, you don't need to enable in-chat payments. The correct workflow is:

1. In your store settings, specify the cart link — usually https://your-domain/cart.
2. The agent selects a product, displays its card, and a button leads the customer to the Shopify cart.
3. Checkout and payment proceed as usual, with all your shipping and tax rules applied.

To see which conversations result in a purchase, insert the purchase pixel snippet onto your thank you page. In Shopify, this is Settings → Checkout → Order status page → Additional scripts. The snippet, with order number and amount placeholders, is in your account, under the "Widget and Link" section.

Product goes to cart without interrupting the conversation#

This is where Shopify excels compared to other platforms. The agent displays product cards with a photo, price, and button, but the button doesn't just lead to a page — it adds the product to the store's cart.

Here's how it works: a Shopify product link contains a variant ID, and the agent passes it to your cart via the standard /cart/add.js interface. The page does not reload, the conversation is not interrupted, the customer sees a brief confirmation and continues browsing. The product is already in the Shopify cart, complete with all your discount, tax, and shipping rules.

If there's no variant in the link, the agent opens the product card, and the customer adds it themselves. Nothing breaks, it's just one extra click.

When the customer is ready, the "Proceed to checkout" button leads to /cart, where everything is already gathered. From there, it's the standard Shopify checkout.

And a note on context: the agent reads the structured data of the page where the chat is open. A customer looking at a specific product asks "is it available in size L?" — the agent understands what they mean without asking for clarification.

• Open your store in incognito mode, and wait for the chat button to appear.
• Ask about a product by name — a product card with a price should appear.
• Click "Proceed to checkout" — the Shopify cart should open.
• Place a test order and confirm that the purchase is marked in "Orders".

Chat that matches your storefront#

Your Shopify theme sets the tone for your entire store, and the chat should blend in seamlessly. The widget settings offer three options: light, dark, and "as per visitor's device," which follows the customer's device settings.

For stores with a dark theme, set the dark option explicitly; for light themes, set the light option. The accent color of the buttons remains yours in both cases.

Step 4. Test it#

Common Issues#

Widget disappeared after theme change. The code resides within the theme file. Changing or updating the theme erases the modification — re-insert the code or use Custom code, which is theme-independent.

Catalog not fully collected. The crawler collects products from public pages. Products hidden from the catalog and drafts are not included, which is correct.

Catalog prices are outdated. Run the site analysis again; it will update prices and availability for existing product cards.

Widget conflicts with a chat app. Keep only one chat: two windows in the same corner interfere with each other and confuse the customer.

Frequently Asked Questions#

Is an app from the Shopify App Store required#

No. The agent connects with a single line of code; no app installation is needed.

Can the agent display product variants#

Yes, variants appear on the product card as characteristics: size, color, volume. The customer selects the specific variant in the Shopify cart.

What about multiple currencies#

The agent displays prices in the catalog currency, which it determines during crawling. Shopify's multi-currency functionality works further down the line, on the cart and payment side.

Will the agent know about stock levels#

Availability is captured at the time of analysis. For products that frequently run out of stock, run the analysis more often or add a disclaimer that availability is confirmed at checkout.

Does the widget affect store speed#

The script loads asynchronously and does not block rendering. This has virtually no impact on Core Web Vitals metrics.