Remove Shopify Chat Bot When Cart Draw is Active

Ask & Offer

Topic summary

Goal: Hide the Shopify Inbox chat widget when the Motion theme’s cart drawer () is open.

Current approach: OP added a script (in theme.liquid, before ) that uses a MutationObserver to watch the cart-drawer’s open attribute and toggles chat elements’ display/visibility. Despite this, the chat still shows; OP suspects the widget may be inside an iframe.

Context provided: Theme = Motion by Archetype, Chat = Shopify Inbox (default), Cart type = drawer, Public URL not provided (placeholder only). Code snippets are central; they include minor typos (e.g., “docum ent” and “display: none” with a leading space) that could affect behavior.

Feedback:

  • Practical workaround: reposition the chat button to the opposite screen side so it doesn’t overlap the drawer.
  • Debugging requirement: share a publicly inspectable store URL to verify selectors, DOM structure, and loading timing.
  • Alternative fix: raise the cart drawer’s z-index and/or adjust the chat container’s z-index so the drawer overlays the chat regardless of state; related threads were linked for reference.

Status: Unresolved. Next steps: provide the live URL; test z-index overlay approach; verify iframe involvement and correct typos/selectors in the script.

Summarized with AI on December 11. AI used: gpt-5.
1

I’m using the Motion theme by Archetype, and I’ve tried several different methods but nothing seems to work.

Can someone please help?

Here’s the latest code I tested:

<script>
(function() {
  function toggleChat(hide) {
    const chatElements = document.querySelectorAll('.chat-toggle, shopify-inbox, #shopify-chat, [class*="shopify-chat"], [class*="chat-button"]');
    chatElements.forEach(chat => {
      chat.style.setProperty('display', hide ? 'none' : 'block', 'important');
      chat.style.setProperty('visibility', hide ? 'hidden' : 'visible', 'important');
    });
  }

  function watchCart() {
    const cartDrawer = document.querySelector('cart-drawer');
    if (cartDrawer) {
      const observer = new MutationObserver(() => {
        toggleChat(cartDrawer.hasAttribute('open'));
      });
      observer.observe(cartDrawer, { attributes: true });
    }
  }

  // Run when DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', watchCart);
  } else {
    watchCart();
  }

  // Also check every second for 10 seconds in case chat loads late
  let checks = 0;
  const interval = setInterval(() => {
    watchCart();
    checks++;
    if (checks >= 10) clearInterval(interval);
  }, 1000);
})();
</script>
2

Simplest solution if using a chat widget is to just position it on the other side of the screen.

@SidG the codes meaningless without the environment it’s running in.
OTHER people are not mind readers , we don’t all magically have your exact setup or see what you see.
Provide publicly inspectable urls.
The info is right in front of you , communicate detail in advance.

https://stackoverflow.com/help/how-to-ask
https://stackoverflow.com/help/minimal-reproducible-example
http://www.catb.org/~esr/faqs/smart-questions.html
etc etc etc

3

Thanks for your reply! I understand that my initial post didn’t give enough context. Here’s more detail about my setup so it’s easier to reproduce:

  • Theme: Motion by Archetype

  • Chat widget: Shopify Inbox (default chat)

  • Cart type: Drawer (<cart-drawer>), not full page

  • Where the script is added: theme.liquid just before </head>

  • Issue: The chat still shows even when the cart drawer is open. I suspect it may be inside an iframe, or Motion’s drawer doesn’t trigger the script the way I expected.

  • Public store URL: [insert your URL here]

Here’s the latest code I tested:

<script>
(function() {
  function toggleChat(hide) {
    const chatElements = document.querySelectorAll('.chat-toggle, shopify-inbox, #shopify-chat, [class*="shopify-chat"], [class*="chat-button"]');
    chatElements.forEach(chat => {
      chat.style.setProperty('display', hide ? 'none' : 'block', 'important');
      chat.style.setProperty('visibility', hide ? 'hidden' : 'visible', 'important');
    });
  }

  function watchCart() {
    const cartDrawer = document.querySelector('cart-drawer');
    if (cartDrawer) {
      const observer = new MutationObserver(() => {
        toggleChat(cartDrawer.hasAttribute('open'));
      });
      observer.observe(cartDrawer, { attributes: true });
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', watchCart);
  } else {
    watchCart();
  }

  let checks = 0;
  const interval = setInterval(() => {
    watchCart();
    checks++;
    if (checks >= 10) clearInterval(interval);
  }, 1000);
})();
</script>

I hope this makes it easier to see what’s going on. Any suggestions on how to properly hide Shopify Inbox when the cart drawer is open would be very helpful.

Thanks in advance!

4

Sigh, think of how much time your wasting and steps your expecting others to jump through by doing everything BUT providing a url to see the frontend problem.
chatgpt can’t do all the work.

Good Luck.

5

Technically, you should be able to set z-index on Shopify chat parent element and your cart drawer so that cart drawer opens on top of the chat, no matter what state it is.

Also – search first.
Literally – just my posts on the issue:

or