Shopify AI Chatbot: Add a Shopping Agent

Add an AI chatbot to your Shopify theme in minutes. Learn where the script goes, what it reads from your catalogue and what to test first.

To add a Shopify AI chatbot, connect your catalogue and store policies, then install its widget in a duplicate of your live theme. Yes, shoppa works with Shopify through its native app or a two-line embed. It is an AI shopping agent that helps customers find, compare and buy products in the chat.

Keep your current theme live while you preview the installation. The widget appearing is the first check. Product answers, basket actions and order support need checks too.

Shopify Chat Options Compared

Shopify Inbox lets your staff chat with shoppers, and Shopify also documents an optional Inbox agent that answers automatically. Apps from the Shopify App Store add other chat and support workflows. An embedded shopping agent puts product discovery and buying inside the conversation on your own storefront.

A text-only chatbot replies to questions. An AI shopping agent can act on the shopper’s request, such as adding a selected product to the basket. With shoppa, shoppers compare products and pay in the chat, then return to the conversation for order support.

Choose by the workflow your store needs. Test an answer against the catalogue’s actual price and stock. Check whether the shopper can add the correct variant to the basket and retrieve an order’s status. These checks tell you more than the appearance of the chat button. The shoppa and Shopify Inbox comparison explains their different uses in more detail.

Keep email marketing flows running in your existing email tool. Assign each customer message to one sender, particularly abandoned-basket reminders and order notifications. If a chat workflow triggers an email flow, prevent a second automation from sending the same message.

Shopify Plus adds advanced checkout customisation, including eligible apps on the information, shipping and payment pages and access to the Checkout Branding API. Storefront live chat does not require those checkout features. Plus is not a requirement for every chat app, and an individual app’s supported plans still decide whether it runs on your store.

Shopify Apps That Work Alongside the Agent

Reviews, subscriptions, loyalty and returns apps can keep doing their jobs alongside the shopping agent. A loyalty app maintains points and rewards. A subscription app manages recurring purchase arrangements. Adding chat does not replace those systems automatically.

Keep one shopper-facing chat button active. Two chat widgets compete for the same conversation and can obscure each other on a phone. Pop-up tools, sticky basket controls and floating loyalty buttons also need space beside the agent.

Information stored inside another app reaches shoppa when you supply it through the catalogue or store documents it reads. Put approved review material into those sources for review summaries. Include the applicable returns rules in the store documents. Installing both apps does not itself give the agent access to the other app’s data.

How the Chatbot Integration Connects to Your Store

The storefront script loads the widget, the catalogue feed supplies products and store documents supply policy answers. Each part has a separate job. A visible widget alone does not prove that its product data is ready.

For the Shopify connection, the store owner approves the connection in Shopify admin. Connect the intended store and review the approval screen before proceeding. Keep product data separate from documents covering delivery, sizing and returns.

shoppa looks up orders from the connected store when a shopper asks for an order’s status. Customers can use an order number, while signed-in customers can see their orders across devices. Product search and order lookup use different information, so test both after connecting the store.

The catalogue-to-agent process explains the feed and embed stages that apply across storefront platforms. The platform integration guides cover installation on other store systems.

Adding the Script to Your Shopify Theme

Install the two-line embed in a duplicate theme before changing the live storefront. Shopify’s code editor opens through the theme’s actions menu in Online Store.

  1. In Shopify admin, open Online Store and find the live theme. Open its actions menu and select Duplicate.
  2. Select Edit code from the duplicate theme’s actions menu.
  3. Open layout/theme.liquid. Find the closing </body> tag near the bottom of the file.
  4. Paste your store’s supplied two-line embed immediately before that tag. Keep both lines in their supplied order and leave the surrounding Liquid unchanged.
  5. Save the file, then preview the duplicate theme. Open the agent on the home page, a product page and the basket page.
  6. Complete the checks below before publishing the duplicate theme.

The shared layout puts the widget on pages that use that layout. A custom page using a different layout needs its own placement check. Keep a record of the addition because a later theme update can remove incompatible code changes.

If your installed chat app supplies an app embed, use the theme editor instead of pasting its script. Select Edit theme, open App embeds in the sidebar and activate the app’s toggle. Save and preview the store. Use one installation route so the widget loads once. When changing themes later, reactivate the app embed in the new theme.

Do You Need a Shopify Developer or Shopify Expert

An owner comfortable with Shopify’s code editor can paste the supplied embed into a duplicate theme and preview it. Hire a Shopify developer in Australia, or a Shopify Partner often called a Shopify Expert, for a heavily customised theme. Developer help also fits custom layouts or strict script security rules.

Ask the developer to check the script’s placement and loading order. They must also look for duplicate installations and conflicts with existing app widgets. Give them the product and basket pages you use most, plus a phone-sized view to check.

A headless store needs the developer or agency responsible for its front end. That installation lives outside Shopify’s theme editor.

Chat Widget Settings and Page Speed

Set the chat button’s position and branding before publishing the theme. Use colours with readable contrast and a label that tells shoppers what the agent helps with. Leave space for the mobile basket button and cookie controls.

Choose an agent name and avatar that identify it as AI. A store logo can suit the avatar, with a display name such as ‘AI shopping agent’. Avoid a staff member’s photo if it implies that a person is answering.

shoppa’s widget is under 64 KB compressed, and its styles are isolated from the store’s styles. Placing the supplied script near the end of the body lets the preceding page markup load first. Keep the supplied loading order intact because the initialisation line depends on the widget script.

Measure page speed before and after installation using the same product page and device settings. Repeat each run to account for network variation. Compare loading speed and layout movement, then open chat and check that the basket controls remain responsive. If the new theme slows down, resolve duplicate scripts or loading conflicts before publishing it.

What the Agent Reads Across Your Storefronts

shoppa reads the connected product catalogue and the store documents you provide. Shipping terms, returns rules and sizing guidance belong in those documents. The agent also knows which page and product the shopper is viewing, so a question about ‘this dress’ has context.

When the store passes signed customer details, shoppa can personalise the greeting with the customer’s name and loyalty tier. The store’s signed data protects those details from being faked. Keep personalisation tied to the shopper’s actual account.

Give each brand storefront its own catalogue and policies. A returns rule for one brand must not answer a question on another brand’s site. Before sharing one agent across stores, confirm which store supplies the product results and where each order belongs. Preview each storefront separately, including any regional delivery rules.

Catalog, Storefront and Headless Store Connections

The catalogue feed brings the Shopify product range into the agent.

shoppa reads that catalogue for product answers. Include the information shoppers need to compare your products in the connected data.

Shopify automatically generates sitemap.xml with links to product pages and other public content. A sitemap helps a crawler discover URLs. It does not replace the product feed or prove that a new product has reached the agent.

A newly published product can appear on the storefront before the next catalogue sync reaches the agent. During that gap, it can be absent from chat recommendations. Search for a recent addition in the private test agent after syncing, then compare its details with the product page.

A headless Shopify store uses its own front end, often backed by the Storefront API. Add the widget to that front end’s shared page layout instead of theme.liquid. The developer or agency that built the site usually handles loading the widget once and preserving it across navigation.

Limits and Checks Around Going Live

shoppa answers from your catalogue and documents, not from pages elsewhere on the web. Supply the policy that governs an answer before expecting the agent to use it. Keep order-status checks separate from requests to edit an existing Shopify order.

Run the following checks on mobile and desktop before publishing the theme.

  • Ask about a sold-out product. Check that the answer reflects its stock status and does not present it as available to buy.
  • Ask a sizing question. Compare the answer with your sizing document, including any product-specific guidance.
  • Ask about delivery to a regional postcode. Check the answer against your delivery areas and charges.
  • Look up an order with a known status. Compare the result with the connected store and test the signed-in customer view separately.
  • Add a product to the basket and complete a purchase using your store’s test-payment setup. Confirm the selected variant and quantity.
  • Compare page speed with the unchanged theme under the same conditions. Check for layout movement when the widget opens.

Publish only after those checks produce the expected results. Keep the previous theme available for recovery and repeat the checks after a theme change.

Shopify AI Chatbot or ChatGPT Selling

An assistant on your Shopify store helps visitors already on your site. Selling products through ChatGPT or another AI channel puts discovery on a separate service. A theme embed installs the storefront agent, and does not itself publish your products to those channels.

For tools used by your team inside Shopify admin, read about Shopify’s built-in AI tools. For this storefront installation, finish the duplicate-theme checks before making the agent visible to shoppers.