Stop a Chat Widget Covering Your Shopify Menu

The problem

A merchant asked about this on the Shopify Community, and I have seen it on many stores.

They run the Dawn theme. They have the Shopify Inbox chat button turned on. They also have a Google reviews badge showing.

On a phone, both of those float in a fixed spot near the bottom of the screen. That part is normal.

The trouble starts when a shopper opens the mobile menu or the collection filter drawer.

The chat button and the review badge stay on top. They sit over the open panel. On the filter drawer they even cover the "Apply" button.

So the shopper cannot finish choosing filters. The float wins, the menu loses. That is a classic case of a shopify chat widget over menu.

I reproduced it on a test store on the Dawn theme. Open the filter drawer on mobile, and the chat bubble hovers right over the controls. Tap where "Apply" should be, and you hit the chat button instead.

This is the shopify chat button covering menu problem in one sentence: two floating things want the same corner, and the wrong one is winning.

Why it happens

This is a stacking problem. The web word for it is z-index.

Think of your page as a stack of transparent sheets. Every sheet has a number. A higher number sits closer to your eyes. A lower number sits further back.

The chat button gets a very high number so it always floats above your products. That is what you want most of the time. You want people to reach chat from any page.

But the mobile menu and the filter drawer are also floating panels. They also need a high number so they cover the page when they open.

The clash is simple. The chat widget and the review badge were given a higher number than the menu and the filter drawer.

So when the drawer opens, it opens behind the chat button. The panel is there. It just sits one sheet too far back. The chat button and Google badge float in front of it and block the taps.

Most forum answers stop at "add some CSS." They skip the reason. The reason matters, because it tells you the fix: you do not need to touch the app. You only need to raise the menu and the filters above the widget, or hide the widget while a panel is open.

CSS is the styling language of a web page. It controls color, size, spacing, and stacking order. Dawn gives you a box in the theme settings where you can paste your own CSS. You will use that box. You never edit the app itself.

A note on the term "shopify chat widget z-index": z-index is exactly the number on the sheet. Fixing this is really just changing which number is bigger. Nothing more.

Before you start: which fix do you need

There are two clean fixes. Pick based on whether you use the Google reviews badge.

• If you only want the menu and filters to sit on top, use the short z-index fix. It is the smallest amount of code.
• If the Google reviews badge still shows through even after the z-index fix, use the hide fix. It removes the floating widgets while a panel is open, then brings them back when it closes.

The short z-index fix handles the Shopify Inbox chat button and the header cleanly. The Google badge is stubborn on some setups. That is the one case where you want the hide fix instead.

Both go in the same place: the Custom CSS box in Dawn's theme settings. Both are mobile only. On desktop the menu is a normal bar, not a drawer, so there is no clash to fix.

You do not need to know how to code. You copy, you paste, you save.

The fix

Here is where to paste it, step by step.

Step 1. Open your theme settings.

From your Shopify admin, go to Online Store, then Themes. Find your live Dawn theme. Click Customize.

Inside the theme editor, look at the bottom left. Click the gear icon. That opens Theme settings. Scroll to the bottom and find Custom CSS.

Step 2. Paste the short z-index fix.

Paste this into the Custom CSS box.

@media (max-width: 989px) {
  .mobile-facets,
  .menu-drawer,
  .section-header {
    z-index: 2147483647 !important;
  }
}

Then click Save.

That is the whole fix for most stores. Let me explain each line in plain words.

• @media (max-width: 989px) means "only do this on screens up to 989 pixels wide." That is phones and small tablets. Desktop is left alone.
• .mobile-facets is the filter drawer on a collection page.
• .menu-drawer is the slide-out mobile menu.
• .section-header is the top bar of your store.
• z-index: 2147483647 is the highest number a browser allows. It puts these three panels above everything, including the chat button.
• !important tells the browser to obey this rule even if the app tries to set its own number.

Once saved, open your store on a phone. Open the mobile menu. Open a collection filter. The chat button now sits behind them. The "Apply" button is tappable again. The shopify widget overlapping menu is gone.

I tested this on the Dawn theme and it worked the same as the longer version. It is less code and easier to keep.

Step 3. If the Google badge still shows through, use the hide fix instead.

Some stores find the Google reviews badge still floats over the panel even after Step 2. That badge sometimes uses its own very high number that is hard to beat.

For that case, delete the short fix and paste this one instead.

@media (max-width: 989px) {
  .mobile-facets,
  body:has(#Details-menu-drawer-container[open]) .section-header {
    z-index: 2147483647 !important;
  }

  body:has(:is(
    .mobile-facets__disclosure.menu-opening,
    #Details-menu-drawer-container[open]
  )) :is(
    #shopify-chat,
    #dummy-chat-button-iframe,
    iframe#ShopifyChat,
    merchant-widget,
    google-merchant-widget,
    #google_customer_reviews_badge,
    [id^="___ratingbadge"],
    iframe[src*="merchantwidget"],
    iframe[src*="shopping/merchant"],
    iframe[title*="Google" i][title*="store" i],
    [id*="merchant" i][id*="widget" i],
    [class*="merchant" i][class*="widget" i]
  ) {
    display: none !important;
  }
}

Then click Save.

This one is longer, but the idea is simple. When the menu or the filter drawer is open, hide the chat button and the review badge. When the panel closes, they come back on their own.

• body:has(...) is the trick that watches for an open panel. It reads "when the page contains an open drawer, do this."
• The first block still raises the filters and header, same as before.
• The second block lists every common name for a chat button and a Google review badge, then sets display: none on them. display: none means "hide this element completely."

The long list of names is there on purpose. Chat and review widgets ship under many different IDs and iframe titles. The list catches the common ones so the fix works whether the badge is named one thing or another.

Save, then test on a phone again. Open the menu. The chat button and badge vanish. Close the menu. They return. That fully clears the shopify chat icon blocking menu case, Google badge included.

An alternative: turn the widget off on collection pages

If you would rather not touch CSS at all, you have a no-code path, though it is coarser.

Shopify Inbox lets you control where the chat button shows. In your admin, open the Inbox app, then its settings for the online store chat. Some setups let you limit which pages the button appears on. If your version offers that, you can keep chat off the collection pages where the filter clash happens.

The trade-off is real. You lose chat on those pages entirely, not just while the drawer is open. For most stores the CSS fix is better because it keeps chat everywhere and only steps aside when a panel opens.

The same goes for the Google reviews badge. Many review apps let you choose which pages the badge shows on. If yours does, you can hide it on collection pages. Again, that is a blunt tool next to the CSS, which hides it only for the moment the drawer is open.

If you run a paid theme with a built-in custom CSS field, the same z-index rule works there too. The selector names may differ if the theme renamed its menu and filter parts. The idea does not change: give the menu and filters a higher number than the widget.

Why does my Shopify chat button cover the mobile menu?

Because the chat button was given a higher stacking number than the menu.

The chat app wants to float above your whole store, so it sets a very high z-index. The mobile menu also floats, but with a lower number. When both are on screen, the higher number wins, so the chat button sits in front.

The fix is to raise the menu's number above the chat button's, or to hide the chat button while the menu is open. Both are a few lines of CSS in Dawn's Custom CSS box.

How do I change the z-index of a Shopify widget?

You do not change the widget's z-index directly. It lives inside the app, and you should not edit that.

Instead you change the z-index of the things around it. You raise the menu, the filter drawer, and the header above the widget. That has the same effect and it is safe.

Paste the short fix from Step 2 into Custom CSS and save. That sets the menu and filters to the top of the stack on mobile, which is where they belong when open.

Will this z-index fix slow down my store?

No. This is a small block of CSS. It adds no scripts, no images, and no app.

CSS this size loads with the rest of your theme styles and costs nothing you would notice. It only changes stacking order on small screens. It does not run any code on every scroll or tap.

You can leave it in place for good. It only acts while the menu or a filter drawer is open, and only on phones.

Does this work on themes other than Dawn?

The idea works everywhere. The exact selector names may not.

Dawn calls its parts .menu-drawer, .mobile-facets, and .section-header. Another theme may call them something else. If you paste the Dawn fix into a different theme and nothing changes, the names are the reason.

To adapt it, open your store on a phone browser, open the menu, and inspect the panel to find its class name. Then swap that name into the rule. The z-index and !important parts stay the same.

If it did not work

A few things can keep the fix from taking effect.

• You pasted into the wrong box. It must go in Theme settings, Custom CSS, not into a section's settings. Check you are in the gear icon area, at the bottom.
• You did not save. The theme editor needs an explicit Save. Look for the Save button in the top right.
• You are testing on desktop. The fix is mobile only, capped at 989 pixels wide. Resize a desktop browser narrow, or use a real phone, to see it.
• The Google badge still floats. Switch from the short fix to the hide fix in Step 3. The badge often needs to be hidden, not just out-ranked.
• Your theme is not Dawn. The class names differ. See the section above on adapting the selectors.
• Browser cache. Old styles can linger. Refresh hard, or open the store in a private window, to load the new CSS.

If none of that helps, check whether a third-party app is injecting its own floating element with an even higher number. Some apps set the maximum z-index too. In that case the hide fix is the safer route, because hiding an element beats out-ranking it.

Definitions people mix up

A few terms come up here and get confused. Here is the plain version.

z-index. The stacking number on an element. Higher sits in front. This is the whole game. Fixing a shopify chat widget z-index clash means changing which number is bigger.

Fixed position. The chat button and badge use fixed position, which pins them to a spot on the screen so they do not scroll away. That is why they float in the same corner. Fixed position and z-index work together; the position pins it, the z-index decides who is in front.

The mobile menu drawer versus the filter drawer. The menu drawer is the slide-out navigation. The filter drawer is the collection filter panel with checkboxes and the Apply button. They are different panels, but they clash with the widget for the same reason, so one fix covers both.

Chat widget versus review badge. The chat widget is the message button, often Shopify Inbox. The review badge is the small Google rating box. They are separate apps that happen to float in the same area. The short fix handles the chat cleanly; the badge sometimes needs the hide fix.

Custom CSS versus editing theme code. Custom CSS is a safe box in theme settings for your own style rules. It does not touch the theme's real files. Editing theme code means changing the actual Liquid and CSS files, which is riskier. For this problem you only need Custom CSS.

That is the full picture. A shopify chat button covering menu is not a broken app. It is two floating panels fighting over one corner. Give the menu and filters the top spot, or step the widget aside while they are open, and the clash is done.