Add Chatbot to Shopify
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.
[Placeholder: /images/placeholders/shopify-step1.png]
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.
[Placeholder: /images/placeholders/shopify-step2.png]
Edit Theme Code
Find your current theme and click the three dots (...) menu. Select "Edit code" to open the theme editor.
[Placeholder: /images/placeholders/shopify-step3.png]
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.
[Placeholder: /images/placeholders/shopify-step4.png]
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>[Placeholder: /images/placeholders/shopify-step5.png]
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.
[Placeholder: /images/placeholders/shopify-step6.png]
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.