Free
UChat Official
Introduction
Adding a live chat feature to your Shopify store can significantly enhance customer engagement and support.
However, Shopify's interface isn't always intuitive for custom script integration.
This guide provides a clear, step-by-step method to install a web chat widget, specifically using UChat, onto your Shopify store.
By following these instructions, you can seamlessly add a floating chat icon in the bottom right corner of your site, improving user experience and boosting conversions.
Step-by-Step Installation Process
1. Configure the Web Chat Widget in u-chat
Navigate to u-chat platform.
Select Web Chat Widget.
Choose Display Style:
Floating Model (appears at the bottom right corner).
Copy the Installation Code provided.
2. Access Shopify's Code Editor
Log into your Shopify Admin Panel.
Go to Online Store > Themes.
Click the Actions dropdown and select Edit Code.
3. Insert the Script into Your Theme
Locate the
theme.liquidfile (usually under Layout).Search for the
<body>tag within this file.Insert the copied installation script just before the closing
</body>tag.Save your changes.
4. Whitelist Your Domain
Return to u-chat settings.
Access Web Chat Widget Settings.
Ensure your domain (e.g.,
yourstore.comormyshopify.com) is added to the Whitelist Domains.This step is crucial; otherwise, the widget may not display.
5. Preview and Verify
Use the Preview option in Shopify to view your store.
The chat widget should appear in the bottom right corner.
If it doesn't show:
Double-check the whitelisted domain matches your store URL.
Confirm the script was correctly inserted.
Troubleshooting Tips
Issue | Solution |
|---|---|
Widget not visible | Verify domain whitelist and script placement. |
Wrong domain displayed | Update whitelist with the correct domain. |
Script not working | Re-copy the code and re-insert, ensuring no errors. |
Summary Table: Key Steps
Step | Action | Details |
|---|---|---|
1 | Configure Web Chat in u-chat | Choose display style, copy code |
2 | Access Shopify code editor | Online Store > Themes > Edit Code |
3 | Insert script | Place before |
4 | Whitelist domain | Add your store's domain in u-chat settings |
5 | Preview | Confirm widget appears |
Final Thoughts
Adding a web chat widget to your Shopify store is straightforward once you understand the process. The key is correctly inserting the script into your theme files and ensuring your domain is whitelisted. This setup allows your visitors to access live support effortlessly, potentially increasing customer satisfaction and sales.
If you encounter issues, revisit each step carefully, especially the domain whitelist. Remember, a properly configured chat widget can be a powerful tool for your online store.
We hope this guide has been helpful! For further questions or assistance, feel free to reach out.