How do I customize the Shopify support chat widget?

1. Log in to your Chatref account and open the agent you want to embed.
2. Navigate to Widget in the sidebar and copy the single-line embed snippet.
3. In your Shopify admin, go to Online Store > Themes, click … next to your theme, and choose Edit code.
4. Open the theme.liquid file under Layout and paste the snippet just before the closing </body> tag. Save.

The widget appears on every page of your storefront, ready to help customers right where they are.

Chatref gives you full control over the widget’s appearance, so it feels like a native part of your Shopify store.

• Primary color – Pick a color that matches your store theme, such as your logo’s accent color.
• Logo – Upload your brand mark; it sits in the widget header for instant recognition.
• Widget position – Choose bottom-right or bottom-left placement, and adjust the horizontal offset.
• Launcher icon – Use the default chat bubble or upload a custom icon that suits your brand.

All customization settings are agent-specific, meaning you can have different looks for different agents without changing your snippet.

A branded widget looks good, but the conversation itself is what builds trust. Chatref’s AI agent answers your customer questions from your own content, not from a generic internet search.

1. In the Content section of your agent, upload your store policies (returns, shipping, privacy), size guides, product descriptions, and any FAQ document.
2. Use the Playground to test how the agent answers common pre-sale questions like “What’s your return window?” or “Is this in stock?”.
3. Fine-tune the agent’s tone and behavior under Settings – make it friendly, professional, or match your brand voice exactly.

The result: an on-brand helper that resolves repeat questions instantly, reducing your support load while keeping the conversation grounded in your actual store rules.

Before the widget goes live, preview it in Chatref’s live demo mode and make adjustments.

• Use the Preview button in the Widget settings to open a mock chat session on a test page.
• Check how the widget looks on mobile and desktop; reposition it if anything overlaps.
• Review at least ten test questions. If the agent misses anything, add more content or adjust its instructions.

Once you’re satisfied, your Shopify store’s live chat is fully customized and ready to help shoppers.

How do I personalize Chatref for my Shopify store?

Open your agent in Chatref, go to the Customization tab, and set your store’s primary color, upload your logo, and choose the widget position. These changes apply instantly to the snippet already embedded in your Shopify theme. Since every feature is included on every account, you have full branding control without any extra charges.

What are the steps to brand my live chat on Shopify?

1. Embed the Chatref widget snippet in your Shopify theme.liquid file.
2. In Chatref, select your agent and navigate to Widget settings.
3. Upload your store’s logo and set the primary color to match your theme.
4. Adjust the horizontal offset and launcher icon.
5. Test the widget live on your store to confirm the branding appears as expected.

You can update the branding at any time, and no snippet changes are needed for style updates.

How do I design the support widget for my store?

Design the widget by combining visual branding with agent behavior. First, apply your logo, colors, and positioning in Chatref’s customization panel. Then, train the AI agent on your store’s content (policies, product FAQs, sizing details) so every answer reflects your store’s voice. The widget design is not just cosmetic – it’s the whole experience of resolving a customer’s question on-brand, without escalating to a person unless needed.