How can I change the position of Inbox icon

Technical Q&A

Topic summary

The discussion addresses repositioning Shopify’s Inbox chat icon to prevent it from overlapping with other page elements like buttons or banners.

Initial Solution:

  • Early responses suggested adding CSS code to theme files (typically base.css or section.product.css) to adjust the chat icon’s bottom positioning using media queries and targeting #dummy-chat-button-iframe.
  • The original poster confirmed this approach worked for their setup.

Common Challenge:

  • Multiple users reported that while the chat button could be repositioned, clicking it caused the chat window to revert to its original position, creating usability issues.

Comprehensive Solution:

  • A detailed solution was provided addressing both button positioning and chat window behavior across different devices (Mobile, iPad, Desktop).
  • The fix involves two code blocks: one repositioning the chat button, another ensuring the chat window opens and closes at the adjusted position without reverting.
  • Key adjustable parameters include bottom, right, top padding values and scale transforms to prevent header overlap.
  • The solution includes commented-out optional parameters (z-index, additional positioning) that users can activate as needed.
  • Implementation requires adding CSS code to the base.css file via the theme code editor.

Status: The thread provides working solutions tested on Dawn 10.0.0 theme, with the final posts offering updated, more flexible code applicable to various themes and screen sizes.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
10

Hi Kani
Thanks for your prompt response. I am not able to locate the liquid file that will have code related to this.
I am using Gecko theme