How can I modify the chat button style to avoid overlapping issues?

Shopify Discussion

Topic summary

A Shopify store owner is experiencing positioning conflicts with their chat button widget, which overlaps with multiple page elements:

Primary Issues:

  • Chat button overlaps the back-to-top button
  • Not visible when cart is opened
  • Overlaps payment icons in the footer
  • Returns to overlapping footer position after opening/closing the chat

Proposed Solutions:
Multiple developers (RockTechnolabs, Artzen_tech, and Moeed) suggested similar approaches:

  • Navigate to Online Store → Edit Code → theme.liquid file
  • Add custom CSS code above the </body> tag to adjust chat button positioning
  • Moeed provided multiple code iterations attempting to resolve the repositioning issues

Current Status:
The discussion remains unresolved. Despite several CSS code suggestions to move the chat button upward and prevent overlaps, the user reports the button still returns to its problematic footer position after the chat window is opened and closed. The persistent issue suggests the provided CSS solutions may not fully address the dynamic positioning behavior of the chat widget.

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

Hey @Anonymous

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1694518859329.png
Moeed_0-1694518859329.png569×150 6.19 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like