Dawn - Chat widget over menu and filter menu

Store Design
1

Hi there.

I am using Dawn theme with inbox chat enabled and google reviews widget enabled.

When i open the sidebar menu or the filter dialog in collection pages the chat and google widgets are on top on the menus which limits the functionality of the apply button in filter.

If you want to make it disappear when you open these menus and make appear when you close it just paste this code in your custom css field in the DAWN settings.


@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
  }
}

Hope this helps. Cheers

2

So u are helping us or trying to find a solution to something

3

Hi @kub

Paste this code into the Custom CSS field in your Dawn theme settings:

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

body:has(
.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;
}
}

4

Hey @kub ,

Thanks for sharing this solution!

This is a helpful workaround for Dawn users who have both Shopify Inbox and Google review widgets enabled. Hiding those floating widgets while the mobile menu or collection filters are open prevents them from blocking important UI elements like the Apply button.

One thing worth mentioning is that your CSS relies on the :has() pseudo class. Most modern browsers support it now, but merchants using older browsers may not see the same behavior.

If someone still experiences the issue after applying your CSS, it’s also worth checking whether the third party widget provides its own z-index or positioning settings, as some apps inject floating elements with very high z-index values.

Thanks again for sharing it should be useful for other Dawn theme users running into the same problem.

If you found my reply helpful, feel free to mark it as the accepted solution so it can help other merchants following this discussion.

Thank You !

5

Hi. I think I wrote why i posted it. I hope this helps somebody.

6

That’s a good point. Maybe i didn’t try the easier way. I will check it.

7

Here is the approach with z-index. Works the same. has() is supported by most modern browsers. Less code and effective. Only the google widget stays there. If you use it so you should use the other solution.

Hope this helps somebody. Cheers

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