Shopify Chatbot
Works with any Shopify theme
Get Your Embed Code
Log in to your Hyperleap dashboard. Navigate to your AI agent, then go to Channels > Website. Copy your unique embed code.
Your embed code contains your unique chatbotId and privateKey. Keep these secure.
Open Shopify Admin
Log in to your Shopify admin panel at yourstore.myshopify.com/admin. Navigate to Online Store > Themes.
Edit Theme Code
Find your current theme and click the three dots (...) menu. Select "Edit code" to open the theme editor.
Consider duplicating your theme first as a backup before making changes.
Open theme.liquid
In the Layout folder on the left sidebar, click on "theme.liquid". This file controls your entire store's layout.
Paste the Code
Scroll to the bottom of the file and find the closing </body> tag. Paste your Hyperleap embed code directly BEFORE this tag.
<script>
(function () {
window.userChatbotConfig = {
chatbotId: "YOUR_CHATBOT_ID",
privateKey: "YOUR_PRIVATE_KEY",
};
const chatbotScript = document.createElement("script");
chatbotScript.src = "https://chatjs.hyperleap.ai/chatbot.min.js";
chatbotScript.async = true;
document.head.appendChild(chatbotScript);
})();
</script>
</body>
Save and Test
Click "Save" in the top right corner. Visit your store's frontend and you should see the chat widget appear in the corner.
Clear your browser cache if you don't see the widget immediately.
Alternative: Using Custom Liquid Block
If you prefer not to edit theme code directly, you can use Shopify's Custom Liquid feature:
- Go to Online Store > Themes > Customize
- Navigate to the page template where you want the chatbot
- Click "Add section" and select "Custom Liquid"
- Paste your Hyperleap embed code wrapped in script tags
- Save and publish your changes
Note: This method only adds the chatbot to specific pages where you add the Custom Liquid block.
Troubleshooting
Chat widget not appearing?
Clear your browser cache, check if the code is placed before </body>, and verify your chatbotId is correct.
Widget appears on wrong pages?
The theme.liquid method shows the widget on all pages. For selective display, use the Custom Liquid block method instead.
Changes not saving?
Make sure you have the correct permissions. Store owners and staff with theme edit access can modify code.
Frequently Asked Questions
How do I add a chatbot to Shopify?▼
The fastest method: go to Shopify Admin > Online Store > Themes > Edit Code, open theme.liquid, and paste your Hyperleap embed script just before the closing </body> tag. Save and preview — the chatbot appears on all store pages immediately. No Shopify app required.
What is the best chatbot for Shopify?▼
Hyperleap AI is built for businesses that need an AI chatbot across their Shopify store website, WhatsApp, Instagram, and Facebook Messenger. It trains on your product FAQs, shipping policy, and return policy, then answers customer questions 24/7 — reducing support volume without additional staff.
Can a Shopify chatbot answer questions about my products?▼
Yes — when trained on your product information. Upload your product FAQs, sizing guides, shipping policy, and return policy to Hyperleap AI. The chatbot answers pre-purchase questions from that knowledge base. This covers the majority of questions Shopify customers ask before buying.
Do I need a Shopify app for a chatbot?▼
No. You can embed Hyperleap AI directly into your Shopify theme by editing theme.liquid — no Shopify app installation required. This works on all Shopify plans including Basic. Shopify app-based chatbots are also available but add app overhead and sometimes conflict with other apps.
Will a chatbot replace my Shopify customer support?▼
A chatbot handles the repetitive questions (shipping times, returns, sizing, product details) automatically. Complex or sensitive issues get routed to your support team. Most Shopify stores find that 60-70% of pre-purchase questions can be answered automatically, freeing your team for higher-value work.