Delay the loading of Shopify Chat Widget

Store Design
,

Topic summary

A merchant discovered their Shopify Inbox live chat widget loads first on page load, significantly slowing site performance. They’re seeking methods to defer the widget until after the page fully renders or after a set time delay.

Proposed Solutions:

  • Remove default synchronous loading: Locate and delete the <script> block referencing shopify_inbox.js from the <head> section in theme.liquid

  • Implement deferred loading: Add custom JavaScript before the closing </body> tag using one of two approaches:

    • Load after full page render using window.addEventListener('load', ...)
    • Load after fixed delay (e.g., 3-4 seconds) using setTimeout(...)

  • Alternative trigger: Load widget on user interaction (scroll event) instead of page load

Implementation Notes:

  • All solutions require editing theme code in layout/theme.liquid
  • Backup/duplicate theme before making changes
  • Test chat functionality after implementation to ensure messages still work
  • Verify timing using browser Network tab
  • One responder linked a video tutorial for interaction-based loading

The discussion remains open with no confirmation from the original poster on which solution was implemented.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I have been using the “Shopify Inbox” live chat widget, but recently figured out it is slowing my site down because it is the first thing to load on the website. Is there a way to change the shopify chat widget so that it loads after x amount of time or after the entire page is done loading?

(website: vaultfurniture.com → I temporarily disabled the chat widget until I get the popup delayed)

1 Like
2

I get how frustrating it is when something helpful like live chat slows down your website. Shopify Inbox widget supposed to load perfectly, which can have effect performance, good news is, you can delay it so it loads after your page or a few seconds in.

it do require a bit of custom code, but nothing too hard.

3

Hello @vaultfurniture

The Shopify Inbox snippet loads synchronously by default in your theme’s , so it kicks off before everything else and delays your page. To defer it, you’ll move the snippet out of the head and wrap it in a small loader that fires after the page (or a timer) completes. Here’s what to do next:

1. Remove the default Inbox snippet

  • In Online Store → Themes → Edit code, open layout/theme.liquid.
  • Find the
    • Choose Option A to load when everything’s rendered, or uncomment Option B for a fixed delay.

    3. Publish and verify

    • Save your theme and open your storefront.
    • Use your browser’s Network tab to confirm shopify_inbox.js only downloads after load or your timer.
    • Test chat functionality—messages should still arrive, just loaded later.
4

If you’re comfortable working with code, I recommend watching this tutorial—it explains how to delay the loading of the Shopify Inbox chat widget until after the user interacts with the page:
https://www.youtube.com/watch?v=mwx1kp8gUSs&t=360s

Note: Before making any changes, be sure to duplicate your theme as a backup.

5

Hello @vaultfurniture , Based on your question about delaying the Shopify chat widget to load after a specific time or once the entire page has loaded.

Here are the steps you can follow to delay the Shopify chat widget:

1. Lazy-Load the Widget

Use JavaScript to load the chat widget only when the user interacts with the page. Add this to your theme’s JavaScript file

window.addEventListener(‘scroll’, function loadChatWidget() {

if (!document.getElementById(‘chat-widget-script’)) {

const script = document.createElement(‘script’);

script.id = ‘chat-widget-script’;

script.src=‘https://chat-widget-url.js’;

document.body.appendChild(script);

}

window.removeEventListener(‘scroll’, loadChatWidget);

}, { once: true });

2. Delay Shopify Chat Widget

Add to theme.liquid before tag