Option to disable the glass/translucent background in Shopify Inbox AI

Store Design
, , ,
1

The new Shopify Inbox AI looks fantastic overall, but we’d really appreciate more control over the appearance of the chat window.

At the moment, the chat uses a translucent/glass (frosted) background. While it looks modern, it can make the text harder to read depending on the website behind it and doesn’t always fit a merchant’s branding.

It would be great if merchants could choose between:

  • A solid background colour.
  • The current glass/translucent effect.
  • An adjustable transparency/blur slider.

The appearance settings already let us customise colours, fonts and border radius, so having control over the background effect would help us create a chat experience that’s more consistent with our brand.

I’m sure many merchants would appreciate the extra flexibility.

2

More importantly, the chat is very locked down from a design perspective. Merchants can’t override the styling with theme CSS because the component is isolated, so we’re limited to the few appearance settings Shopify provides. If a design choice like the glass effect doesn’t fit our brand, there’s currently no way to change it.

3

Agent HTML is placed into shadow DOM, so yes, CSS from heme stylesheets would not apply, but it’s possible to push some styles there with Javascript code.

Say, to make it solid white background, the code can be something along these lines:

window.addEventListener('load', ()=>{
  let agentShadow = document.querySelector('shopify-agent')?.shadowRoot;
  if (agentShadow) {
    let stylesheet = new CSSStyleSheet();
    stylesheet.addRule('.panel', 'background: white');
    agentShadow.adoptedStyleSheets.push(stylesheet);
  }
});
4

I agree. The glass effect looks nice, but readability should come first. On some stores, the translucent background can reduce contrast depending on what’s behind the chat window.

Giving merchants the option to switch between a solid and glass background or even adjust the transparency would make Shopify Inbox much more flexible while keeping the current design available for those who prefer it.

Since the widget’s styling is isolated, merchants can’t solve this with custom CSS, so having these options built into the appearance settings would be a valuable improvement.