Chat app shopify

Store Design
1

Hello, I’d like to use Shopify’s Online Store Chat on my site, but I’ve noticed that it automatically expands when the page loads. I’d prefer it to remain minimized as just the chat icon and only open when a visitor clicks on it. Could anyone help me with this?

2

I’ve posted relevant solution earlier, but the code was lost due to forum migration.

So, reposting:

Here is what you can do without any theme code edits.

Add a new link to your menu, call it Chat and make it point to #chat (address is important).

Then add a “Custom liquid” section into your Footer section group and paste this code:

<script>
document.addEventListener('click', e=> {
  let target = e.target.closest('[href$="#chat"]');
  if (target) {
    e.stopImmediatePropagation();
    e.preventDefault();
    let chat = document.querySelector('inbox-online-store-chat');
    if (!chat) return;
    let buttonSelector = chat.getAttribute('is-open') == 'true' ? ".chat-app--close-button" : ".chat-toggle";
    chat.shadowRoot.querySelector(buttonSelector)?.dispatchEvent(new Event('click'));
    return false;
  }
});
</script>
<style>
  inbox-online-store-chat#ShopifyChat[is-open="false"] {
    transform: translateX(-100vw);
  }
</style>

The code will listen to click on any link not only menu, so you can output your own button somewhere…

Screenshot 2025-06-27 at 4.50.40 PM
Screenshot 2025-06-27 at 4.50.40 PM914×718 45.4 KB

And here is the preview link: BBK Market

3

But that’s not what I’m looking for. Thank you anyway for the help!

6

in which part do I add the code? theme liquid?

7

This code does literally nothing.

I wonder why chat auto-opens for you though.
It does not in my test shop…