How do I set up a chat widget for Shopify support?

Chatref gives you a single JavaScript snippet that powers the website-widget. Placing it takes one minute:

1. In your Chatref dashboard, go to the agent settings and copy the embed code.
2. In your Shopify admin, navigate to Online Store > Themes, click the three-dot menu on your live theme, and choose Edit code.
3. Open theme.liquid under the Layout folder and paste the snippet right before the closing </body> tag. Save the file.

The widget loads on every store page and starts accepting chats instantly. Because the snippet is origin-allowlisted, it works securely on your Shopify domain without additional configuration.

Before you enable live chat, load your store’s knowledge into the agent. The AI resolves questions directly from this content instead of guessing.

• Upload your return policy, shipping FAQ, sizing guides, and product descriptions as PDFs or plain text.
• Point Chatref at your existing help center or key product pages by providing their URLs.
• Use the playground to test how the agent answers typical customer questions (e.g., “What is your return window?”).

Once the knowledge base is ready, your widget handles repeat inquiries automatically, dropping your support team’s ticket volume from the first day.

Use the customization tools inside Chatref so the chat feels like a native part of your store.

• Change the widget’s primary color to your brand palette.
• Upload your logo and set the agent’s name and greeting message.
• Choose a launcher icon that matches your site’s style.

All these settings apply immediately without editing the code again. The result is a support window that reinforces your brand at every interaction.

When a question needs a human, Chatref’s shared-inbox lets your team step into the same thread with full context.

• Every chat appears in the real-time inbox accessible to your support agents.
• You can see the entire AI conversation before taking over, so the customer doesn’t repeat themselves.
• Assign conversations, add internal notes, and reply directly, all without leaving the shared workspace.

Because the AI handles the routine, your team only handles the cases that truly require a person, keeping response times low as your store grows.

How to add Chatref to Shopify store

Create a Chatref account, train your agent on store docs, then copy the embed snippet from the agent settings. Paste it into your Shopify theme’s theme.liquid file just before </body>. The widget will display on all pages immediately. No app installation is required, and the snippet can be removed or updated at any time.

Steps to enable live chat on Shopify

Sign up for Chatref (you receive $50 free credit, no card needed). Add your store’s content – product details, policies, and FAQ pages. Customize the widget’s color and branding to match your store. Copy the embed code and paste it into your Shopify theme. Test the widget by sending a few sample questions. Once live, your AI agent answers customer chats based on the documents you uploaded, and your team can monitor and take over from the shared inbox.

Customizing the Shopify support widget

Inside your Chatref agent’s customization panel, adjust the primary color, upload a logo, and set the widget’s greeting text. You can also pick from different launcher icon styles. Changes apply instantly without touching your Shopify theme code again. The widget inherits your brand identity, so it looks native to your store on desktop and mobile.