How to Add Customer Support Chat to Shopify Without an App

2026-09-08 · support

Many Shopify store owners assume that adding a customer support chat means installing another paid app on top of their monthly subscription. However, if you only need a simple chat box for pre-sales questions or order support, you can skip the app store entirely. This guide shows you exactly how to add customer support chat to Shopify without an app, using either Shopify's free built-in tool or a small snippet of code.

Why Skip a Chat App? Save Money and Keep Control

Every app you install on Shopify adds a monthly fee, consumes server resources, and can slow down your store's load time. Chat apps often cost between $10 and $50 per month, which adds up quickly for a small operation. More importantly, apps can break when you update your theme or introduce a new feature.

By adding chat manually, you keep full control over the data, the design, and the cost. You also avoid the risk of an app injecting third-party scripts into your checkout or customer pages. If you only need basic chat functionality—a button, a text box, and a way to receive messages—you can build it in under an hour with no prior coding experience.

Option 1: Use Shopify Inbox (Free Built-in Chat)

The simplest way to add chat without a third-party app is Shopify Inbox. It is a free channel that comes with your Shopify plan. It connects your store's chat widget directly to your Shopify admin, so you can respond to customers from the same dashboard you use for orders.

To enable it:

1. Go to Settings > Apps and sales channels in your Shopify admin.
2. Click Shopify Inbox and then Add app (if it isn't already installed).
3. Open the Shopify Inbox sales channel and click Manage.
4. Select Chat widget and choose where you want it to appear (usually all pages).
5. Customize the greeting message and the automated away message.

Shopify Inbox is ideal if you want a zero-code solution. It does not require any theme edits. The widget automatically matches your store's accent color, and you can add quick replies for common questions like shipping times or return policies.

Option 2: Add a Simple Chat Widget via Theme Code

If you prefer not to use Shopify Inbox (for example, you want the chat to open a specific external tool like WhatsApp or your own support email), you can add a chat widget directly into your theme's code. This method gives you complete control over the appearance and behavior.

The most common approach is to embed a small HTML/CSS/JavaScript snippet into your theme's theme.liquid file. This file controls the global layout of your store, so the chat button will appear on every page.

You can build this from scratch or use a free, open-source snippet. Many small merchants use a simple floating button that opens a contact form or a direct email link. This avoids any external service entirely.

Step-by-Step: Adding a Chat Widget to Your Theme

Follow these steps to add a basic chat widget that opens a contact form or a third-party chat service like WhatsApp or Facebook Messenger.

Step 1: Back up your theme.
Go to Online Store > Themes, click the three dots next to your current theme, and select Duplicate. Work on the duplicate to avoid breaking your live store.

Step 2: Open the theme editor.
In the duplicated theme, click Edit code. Look for the file called theme.liquid in the Layout folder.

Step 3: Add the chat button HTML.
Scroll to the bottom of theme.liquid, just before the closing </body> tag. Paste this basic structure:

<!-- Floating Chat Button -->
<div id="chat-button" style="position:fixed; bottom:20px; right:20px; z-index:9999; background:#333; color:#fff; padding:12px 20px; border-radius:30px; cursor:pointer;">
  💬 Chat with us
</div>

<!-- Chat Window (hidden by default) -->
<div id="chat-window" style="display:none; position:fixed; bottom:80px; right:20px; width:300px; background:#fff; border:1px solid #ccc; border-radius:8px; padding:15px; z-index:9999; box-shadow:0 4px 12px rgba(0,0,0,0.15);">
  <textarea id="chat-message" placeholder="Type your message..." style="width:100%; min-height:80px; margin-bottom:10px; padding:8px;"></textarea>
  <button id="chat-send" style="background:#333; color:#fff; border:none; padding:8px 16px; border-radius:4px; cursor:pointer;">Send</button>
</div>

Step 4: Add the JavaScript logic.
Still in theme.liquid, paste this script right below the HTML you just added:

<script>
  document.getElementById('chat-button').addEventListener('click', function() {
    var window = document.getElementById('chat-window');
    window.style.display = window.style.display === 'none' ? 'block' : 'none';
  });

  document.getElementById('chat-send').addEventListener('click', function() {
    var message = document.getElementById('chat-message').value;
    if (message.trim() !== '') {
      // Replace the mailto link with your own support email
      window.location.href = 'mailto:support@yourstore.com?subject=Chat Message&body=' + encodeURIComponent(message);
    }
  });
</script>

Step 5: Save and preview.
Click Save, then Preview. You should see a floating "Chat with us" button in the bottom-right corner. Click it to open the chat window, type a message, and send it—this will open your email client with the message pre-filled.

Customizing the Chat Widget to Match Your Brand

The code above uses basic colors, but you can easily change them to match your store's design. Here are the key variables to edit:

To go further, you can:

• Use your brand's hex color codes (e.g., #ff6600 for orange).
• Adjust the button position by changing bottom and right values.
• Add a custom avatar or logo next to the chat text.
• Change the button label to "Need help?" or "Questions?"

Testing Your Chat Widget Before Going Live

Before you publish the edited theme, you must test the widget thoroughly. A broken chat button looks unprofessional and can frustrate customers.

Follow this checklist:

• Test on mobile – Open your store on a phone and confirm the button does not overlap the cart icon or menu.
• Test the send action – Send a test message and confirm it opens your email client with the correct address.
• Test the toggle – Click the button multiple times to ensure the chat window opens and closes smoothly.
• Test on different pages – Visit a product page, a collection page, and the checkout page (if possible) to ensure the button appears correctly.
• Check page load speed – Use Google PageSpeed Insights or a similar tool to confirm the added code does not slow down your store.

If you used a duplicate theme for testing, you will need to publish the edited theme when you are ready. Go to Online Store > Themes, find your edited theme, and click Publish.

Alternatives: Free Chat Tools That Integrate with Shopify

If you want more features than a basic email form but still want to avoid paid apps, consider these free chat solutions that work with Shopify:

• WhatsApp Business – Add a floating button that opens a WhatsApp chat with your business number. Free, and familiar to many customers.
• Facebook Messenger – Use the free Messenger customer chat plugin. It requires a Facebook page but integrates well with social selling.
• Tawk.to – A free live chat platform with a Shopify integration. It offers a full chat dashboard, visitor tracking, and canned responses. No monthly fee, but check their current terms for paid upgrades.
• Crisp (free tier) – A free plan for small stores with basic chat and a shared inbox. Check their current pricing for limits.

Each of these services provides a small snippet of code that you can paste into your theme using the same method described above. The main difference is that instead of sending messages to email, they send them to the provider's dashboard.

Conclusion

Adding customer support chat to your Shopify store does not require a paid app. You can start with Shopify Inbox for a zero-code solution, or paste a small chat widget directly into your theme for full control. Both methods are free, secure, and take less than an hour to set up. Test your widget carefully, and you will offer real-time support without increasing your monthly overhead.

FAQ

Is Shopify Inbox really free for all plans?
Yes, Shopify Inbox is available on all Shopify plans at no extra cost. It includes a chat widget, automated greetings, and a shared inbox for your team.

Will adding custom chat code break my theme?
It should not, if you follow the steps and test on a duplicated theme first. The code is minimal and only adds a fixed-position button and a simple script.

Can I use this method to connect to WhatsApp or Facebook Messenger?
Yes. Instead of the email link in the script, replace the window.location.href line with a link to your WhatsApp number (https://wa.me/1234567890) or your Messenger link. The button and window design remain the same.