Delay the loading of Shopify Chat Widget

Store Design
,
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