Shopify Live Chat: How to Add a Chat Widget to Your Store

Adding Shopify live chat to your store takes about ten minutes and no developer. The harder part is everything around the install: making sure the widget shows on the pages where shoppers actually hesitate, deciding who answers at 11 p.m., and having ready answers for the questions every store gets — shipping, returns, sizing and "where is my order". This guide covers the install options, the exact steps for adding a chat script to your theme, and the store-specific setup that makes chat pay off.

Your options for live chat on Shopify

There are three common ways to get a chat widget onto a Shopify store:

• Shopify's own chat app. Shopify offers a free first-party chat app, Shopify Inbox. It is tightly connected to the admin, which is convenient if you live inside Shopify and only need basic chat.
• An app from the Shopify App Store. Many chat vendors publish an app that injects their widget for you. Installation is a few clicks, but you are tied to whatever the app supports, and some apps add their own scripts and settings screens.
• A script in your theme. Most chat services give you a single line of code. You paste it into theme.liquid, and the widget loads on every storefront page. This works with any chat service that offers an embed code and keeps you independent of app listings.

The script route is the most flexible and the one we'll walk through below. It is also the route you'd use if your chat tool doesn't have a Shopify app.

Before you start: back up your theme

Editing theme code is safe as long as you can undo it. Shopify makes that easy:

1. In your Shopify admin, go to Online Store → Themes.
2. Next to your current theme, click the ⋯ menu and choose Duplicate.

You now have an untouched copy. If anything goes wrong, you can publish the copy and you're back where you started. Shopify also keeps a version history for each theme file, so you can revert a single file from the code editor.

Step-by-step: adding the chat script to theme.liquid

theme.liquid is the layout file that wraps every storefront page, so code placed there loads site-wide.

1. Copy your widget code from your chat tool. In ChatDeck it is one line:

<script src="https://chatdeck.ru/widget.js" data-chatdeck-key="pk_YOUR_KEY" async></script>

1. In Shopify, open Online Store → Themes, click ⋯ next to your live theme and choose Edit code.
2. In the file list, open layout/theme.liquid.
3. Find the closing </body> tag near the bottom of the file and paste the code on the line just above it.
4. Click Save.

The async attribute means the script loads without blocking the page, so your store renders first and the chat button appears a moment later. With ChatDeck the snippet also works inside <head> if you prefer, but just before </body> is the conventional spot. Shopify's own help center has an article on editing theme code if the editor looks different in your admin. Our Shopify integration guide has the same steps in short form.

Checking the widget on product, cart and mobile pages

Open your store in a private browser window (so you see what a visitor sees, not a logged-in admin view) and check:

• Home, collection and product pages. The launcher button should appear in the corner you chose.
• Cart page. This is where many pre-purchase questions happen, so make sure the button doesn't cover the checkout button or a sticky "Add to cart" bar.
• Mobile. Open the store on a real phone. Check that the button doesn't overlap cookie banners, a back-to-top arrow or a mobile menu. If it does, switch the widget's position or launcher size.
• Send a test message. Write a message as a visitor and reply from the operator inbox. Check that you got a notification and that the reply arrives on the store side.

One thing you won't see: the widget on checkout pages. Shopify doesn't run third-party code on its checkout pages, so no theme script appears there. Plan for that — the cart page is your last chance to answer a question in chat before payment.

Setting up chat for a store: greeting, hours, shipping and returns answers

A chat button with a generic "Hi! How can we help?" works, but a store can do better.

Greeting

Write a greeting that tells shoppers what chat is for: "Questions about sizing, shipping or returns? Ask here — we usually reply within a few minutes." It sets expectations and nudges people toward the questions you can answer fastest.

Working hours

Small stores rarely staff chat around the clock, and that's fine as long as visitors know. Set your working hours in the chat tool so that outside those hours visitors are told when someone will be back, and ask for an email so you can follow up. Our guide to after-hours customer support covers the options in more detail.

Ready answers for the questions you always get

Write down the answers before launch, not during the first busy weekend:

• Shipping times and costs by region
• Return window, condition rules and who pays for return shipping
• Size charts or fit advice for your best sellers
• Payment methods and whether you ship internationally
• How to track an order and who to contact if it's late

These answers serve two purposes: operators paste or adapt them, and an AI assistant can use them as its facts. If you sell physical products, the ecommerce live chat playbook goes deeper on which questions stall carts.

Letting an AI assistant answer common order questions

Most store chats are repetitive: shipping, returns, "do you have this in blue". An AI assistant can take that first line and pass the rest to a person. In ChatDeck the assistant answers first, using an instruction and facts you write, and hands the conversation to an operator when a question is outside its scope or the shopper asks for a human. It can also send the shopper to the right page — the size guide or returns policy — and close resolved chats with a rating request. The What the assistant can do tutorial shows how to switch these tools on.

A sensible split for a store:

1. Bot handles: shipping times, return policy, sizing guidance, payment options, links to policy pages.
2. Human handles: specific order problems, damaged items, refunds, bulk or wholesale inquiries, anything where the customer is upset.

Keep the bot honest: tell it never to promise delivery dates or refunds it can't verify, and to hand off instead. The AI runs on your own API key via the GPTunneL gateway, so you pay only for the model tokens you use.

Troubleshooting: widget not showing, theme updates, conflicts

If the chat button doesn't appear:

• Check you edited the live theme. It's easy to paste code into a duplicate or an unpublished theme. The theme labeled "Current" or "Live" is the one visitors see.
• Check the code landed above `</body>`, wasn't pasted inside another tag, and the key is complete.
• Hard-refresh or use a private window. Browser cache can hide a fresh change.
• Look at the browser console for blocked scripts; some ad blockers block chat widgets for you, but not for most visitors.

After a theme update or switching to a new theme, the code doesn't travel with you. A new theme has its own theme.liquid, so add the snippet again and repeat the checks above.

Style conflicts are rare with modern widgets. ChatDeck's widget renders inside Shadow DOM, so your theme's CSS doesn't leak into the chat, and the chat doesn't restyle your store.

Frequently asked questions

Does Shopify have built-in live chat?

Shopify offers its own free chat app, Shopify Inbox, which you install from the App Store. You can also use any other chat tool that gives you an embed code by pasting it into your theme, which is useful if you want a specific AI assistant, apps or analytics setup.

Will adding chat code break my Shopify theme?

Not if you paste a single script tag just above </body> and save. The risk comes from accidentally deleting existing code while editing. Duplicate the theme first, and you can always restore it or revert the file from its version history.

Do I need to re-add the code after changing themes?

Yes. The snippet lives inside your current theme's theme.liquid. When you publish a different theme, or replace yours with a fresh copy of an updated version, open the new theme's code and paste the snippet again.

Can the chat answer questions when I'm offline?

Yes, in two ways. Outside working hours the widget can tell visitors when your team is back and collect their message. And if you turn on an AI assistant, it can answer common questions about shipping and returns at any hour and leave the rest for your team in the morning.

Ready to try it on your store? Create a free ChatDeck workspace — no per-operator fees — and follow the Shopify install guide to have chat live in a few minutes.