How to add live chat to a Shopify theme

A chat widget can help shoppers ask about an item while they are still looking at it. On Shopify, HTchat is installed with a script in your theme; it is not a Shopify App Store integration.

By the HTchat team · Practical guide

Online store packing desk with a laptop showing a conceptual product page and chat — An illustrative store scene with a conceptual chat panel; no actual merchant, Shopify store or sales result is depicted.

Plan the installation

Shopify's theme code is separate from its checkout. Do not assume a theme script will appear on every checkout or post-purchase screen.

Get your own snippet

Create an HTchat account and copy the installation snippet from your business settings. The widget key in that snippet belongs to your business; do not use a screenshot or example key.

Back up your theme

Duplicate your theme before editing. Shopify recommends making a copy so you can revert changes if needed, and notes that code changes may not transfer to an updated theme.

Add the script and test

Install once in the layout, not separately on every product page.

Edit theme.liquid

In Online Store → Themes, choose Edit code on the theme you want to change. Open layout/theme.liquid and place the snippet immediately before the closing body tag. Save your change.

Use a private browser window

Open a product page and a collection page as a visitor. Send a test chat and confirm it arrives in your HTchat inbox. Check phone width and a consent banner if your store uses one.

Know the boundary

A support widget is not an order-management integration.

No automatic order lookup

The team can see the page the shopper is viewing and what they type, but HTchat does not automatically pull Shopify order or customer records into the conversation.

Checkout needs separate verification

Shopify's checkout has different customization rules. Test your own plan and checkout flow; do not promise the chat bubble will appear there solely because you installed it in the theme.

The takeaway

The meaningful test is a real message sent from your storefront and received in the inbox. Keep the theme backup and record where the snippet was added.