Written by William Cooke · Founder at VocUI
How to Embed a Chatbot in Shopify
Adding a chatbot to your Shopify store lets you answer product questions, shipping inquiries, and return policy questions automatically — 24 hours a day. No Shopify app required. Just one script tag pasted into your theme, and your AI assistant is live.
Step-by-Step: Adding the Embed Code to Shopify
Follow these steps to add the VocUI chatbot to your Shopify store. The entire process takes about three minutes.
Deploy Tab
<script src="vocui.com/widget.js" ...>HTML <head> or <body>
<script src="vocui.com/widget.js" ...>- Copy your embed code. Log in to your VocUI dashboard, open your chatbot, and go to the Deploy tab. Copy the JavaScript embed snippet.
- Open your Shopify theme editor. In your Shopify admin, go to Online Store > Themes. Click the three-dot menu on your active theme and select Edit code. For advanced customization, Shopify's Theme App Extensions documentation covers the full theme architecture.
- Find the theme.liquid file. In the Layout folder on the left sidebar, click on
theme.liquid. This is the master template that wraps every page in your store. For more on how Shopify handles scripts, see the Shopify JavaScript and Stylesheet Tags documentation. - Paste the embed code. Scroll to the bottom of the file and paste the VocUI script tag just before the closing
</body>tag. This ensures the chatbot loads on every page of your store. - Save. Click Save in the top right corner. Visit your store and you should see the chat widget in the bottom corner.
That's it. No app to install, no monthly app subscription, and no risk of plugin conflicts. The script tag approach is the cleanest way to add third-party tools to Shopify.
Why Shopify Stores Need a Chatbot
Cart abandonment is the single biggest revenue leak in ecommerce. A shopper hesitating on a product page — wondering about sizing, return windows, or shipping speed — will close the tab if they cannot get an answer in seconds. An AI chatbot trained on your product catalog and store policies answers those questions at the exact moment of hesitation, keeping the shopper moving toward checkout instead of bouncing.
Shopify includes Shopify Inbox for live chat, but it requires a human on the other end. Outside business hours — evenings, weekends, holidays — messages go unanswered. An AI chatbot fills that gap completely. It handles "What material is this made of?" and "Can I exchange for a different size?" at 2 AM the same way it does at 2 PM, with no staffing cost.
Product pages also have limited real estate. You cannot fit every detail about shipping zones, care instructions, and compatibility into the description without creating a wall of text that nobody reads. A chatbot lets shoppers ask the specific question they have and get a direct answer — no scrolling, no searching, no navigating to a separate FAQ page.
What You Need Before Starting
- Shopify admin access with theme editing permission. — You need the Owner role or a Staff account with "Themes" permission enabled. Check under Settings > Users and permissions in your Shopify admin.
- Know where theme.liquid lives. — Go to Online Store > Themes > Actions > Edit code. In the Layout folder, you'll see
theme.liquid— this is where your embed code goes. - A VocUI chatbot trained on your store content. — Create a chatbot in VocUI and add your store URL as a knowledge source so it can learn your products, shipping policy, and return policy. Our chatbot setup guide walks through the full process.
This works on every Shopify plan — Basic, Shopify, Advanced, and Plus. The one exception: embedding on checkout pages requires Shopify Plus, which gives access to checkout.liquid. On standard plans, the chatbot covers every other storefront page.
Training the Chatbot on Your Store Content
A chatbot is only as good as the content it's trained on. For a Shopify store, you'll want to cover the topics shoppers ask about most:
- Product details. — Add your store’s URL as a knowledge source and VocUI will crawl your product pages. The bot can then answer questions about sizing, materials, features, and availability.
- Shipping information. — Upload or link to your shipping policy page. Shoppers constantly ask about delivery times, shipping costs, and international availability.
- Return and refund policies. — These are among the most-asked questions in ecommerce. Make sure your bot can explain the process clearly.
- Store FAQ. — If you have an existing FAQ page, add it as a knowledge source. The bot will pull answers directly from your existing content.
For more advanced training strategies, check out our guide on chatbots for ecommerce.
Matching the Widget to Your Shopify Theme
Your chat widget should look like it belongs in your store, not like a third-party add-on. Start by grabbing your theme's accent color: go to Online Store > Themes > Customize, then open Theme settings > Colors. Copy the hex value for your primary or accent color and paste it into the VocUI widget color picker in your dashboard.
Widget position matters on ecommerce storefronts. Bottom-right is the standard placement, but if your Shopify theme uses a cart drawer that slides in from the right side of the screen (common in Dawn, Refresh, and many custom themes), switch the widget to bottom-left to prevent the chat bubble from overlapping the cart panel. You can change this in one click from the VocUI widget settings.
Welcome message, avatar, and all other appearance options are configured in the VocUI dashboard under your chatbot's Deploy tab — no code changes needed after the initial embed.
Shopify-Specific Troubleshooting
Most Shopify embeds work immediately. When they don't, these are the Shopify-specific causes:
- Script not loading on Online Store 2.0 themes. — Newer Shopify themes use sections and blocks architecture, but theme.liquid still exists and still wraps every page. If you cannot find theme.liquid, check under the Layout folder in the code editor, not Sections or Templates.
- Liquid syntax error after pasting. — Make sure you paste the VocUI script tag as raw HTML, not inside a Liquid
{{...}}or{%...%}block. The script tag should be plain HTML placed before the closing</body>tag. - Chatbot not visible in theme preview. — Shopify’s theme preview sometimes does not execute third-party scripts. Publish the theme and check your live storefront URL instead.
- Shopify speed report flags the script. — The Shopify speed report lists all third-party scripts. VocUI will appear in the list but will not reduce your score because it loads asynchronously and does not block rendering. You can safely ignore this line item.
- Password-protected storefront blocking the widget. — If your store is password-protected (common during development), the chatbot script still loads behind the password wall but is not visible to public visitors. Remove the password to test the live experience.
If you also run a site on another platform, our general embed guide covers the process for any website.
FAQ
- Should I use a Shopify app or a script tag to add a chatbot?
- A script tag is simpler and avoids the overhead of Shopify apps. Apps require granting store permissions, add monthly subscription fees, and can conflict with other apps. A script tag in theme.liquid loads independently, has no app-level permissions, and cannot be affected by Shopify app updates or compatibility issues.
- Can I add the chatbot using Shopify Theme App Blocks instead of editing theme.liquid?
- Theme App Blocks are designed for Shopify apps distributed through the App Store and require a published app listing. For a direct script tag embed like VocUI, editing theme.liquid is the correct approach. It takes 30 seconds and works on every Shopify theme, including Online Store 2.0 themes.
- Will the chatbot affect my Shopify Speed Score?
- No measurable impact. The VocUI script loads asynchronously and does not block rendering, so it does not affect Largest Contentful Paint (LCP) or Total Blocking Time (TBT). Shopify speed reports may show the external request, but it will not reduce your score because async scripts are not render-blocking.
- Can the chatbot appear on checkout pages?
- On standard Shopify plans, checkout pages use a restricted template that does not load theme.liquid, so the chatbot will not appear there. On Shopify Plus, you can add the script to checkout.liquid to enable the chatbot on checkout and thank-you pages. For non-Plus stores, the chatbot covers product, cart, collection, and all other storefront pages.
- How does the chatbot work with Shopify Markets and multi-language stores?
- The chatbot embed code is the same across all Shopify Markets. The VocUI widget responds in the language of the visitor query regardless of which market subdomain they are on. To ensure accurate answers in each language, add your translated product pages and policy pages as separate knowledge sources in VocUI.