Before you begin, make sure you have:
An Echo already created and published
Access to the Embed Widget section in your Echo dashboard
A Shopify store with access to theme editing
Step 1: Open Your Echo's Embed Widget Settings
Log into your Echo dashboard. Locate the Echo you want to embed. Click the settings menu on the Echo card and select Embed Widget from the dropdown. You can also access it from inside the Editor.
<img class="max-w-full h-auto rounded-xl my-4" alt="Open your embed widget page">Step 2: Customize Your Widget Appearance
Before generating the code, configure how your Echo will look on your website. The left panel shows all customization options:
Position: Choose where the chat button appears (Bottom Right, Bottom Left, Top Right, or Top Left)
Button Roundness: Adjust the shape from square to fully circular
Chatbox Roundness: Control the corner style of the chat window
Chatbox Size: Select the size of the expanded chat interface
Button Size: Control the size of the floating trigger button
Remove "Powered by Echo AI": Toggle off the branding if your plan allows it
Widget Logo: Choose between the default Echo logo, your Echo avatar, or upload a custom logo (with separate light and dark theme versions)
These settings directly affect how the widget renders on your website.
<img class="max-w-full h-auto rounded-xl my-4" alt="">Step 3: Generate and Copy Your Embed Code
On the right side of the page under Preview & Code, you can toggle the preview to see how the widget will look on both light and dark backgrounds.
When you are happy with the appearance:
Click Generate
Your HTML embed code will appear in the Embed Code section
Click Copy to copy it to your clipboard
Alternatively, click Download to save the code as a file
This code contains the iframe and positioning logic that loads your Echo on any website.
<img class="max-w-full h-auto rounded-xl my-4" alt="">Step 4: Log into Your Shopify Admin
Go to your Shopify admin panel by visiting your-store.myshopify.com/admin or logging in at shopify.com.
Step 5: Open the Theme Code Editor
In the Shopify admin sidebar, go to Online Store then Themes
Find the theme you want to edit (usually your live theme)
Click the three-dot menu (...) on the theme card
Select Edit code
This opens the Shopify theme code editor where you can add custom scripts.
<img class="max-w-full h-auto rounded-xl my-4" alt="">Step 6: Find and Edit the theme.liquid File
In the left sidebar of the code editor, look under the Layout folder
Click on theme.liquid
Scroll down to the bottom of the file and find the closing </body> tag
This is the main layout file that loads on every page of your store. Adding code here ensures the widget appears site-wide.
<img class="max-w-full h-auto rounded-xl my-4" alt="">Step 7: Paste Your Echo Embed Code
Place your cursor on a new line just before the closing </body> tag
Paste the embed code you copied from Echo
Make sure the code is placed inside the body, not after it
Your code should look something like this in the editor:
<img class="max-w-full h-auto rounded-xl my-4" alt="">Step 8: Save and Preview Your Store
Click the Save button in the top-right corner of the Shopify code editor
Click Preview to open your store in a new tab and verify the widget appears
You should see the Echo chat button in the position you configured
Step 9: Test Your Echo
Open your live store URL
Refresh the page
Click the Echo chat button to expand the widget
Send a test message to confirm it is working
Test on different devices (desktop, tablet, mobile) to make sure it is responsive
Your Echo is now live and interactive on your Shopify store.
<img class="max-w-full h-auto rounded-xl my-4" alt="">Troubleshooting
Widget not appearing? Make sure you pasted the code before the closing </body> tag, not after it. Also check that you saved the file.
Widget appears on wrong position? Go back to the Echo Embed Widget settings, adjust the position, regenerate the code, and replace it in Shopify.
Changes not showing? Try clearing your browser cache or opening the site in an incognito window.