How to prevent chat button from overlapping cart slider?

Shopify Discussion

Topic summary

A user is experiencing an issue where a chat button overlaps with their cart slider on their Shopify store.

Proposed Solutions:

Two community members provided similar CSS-based fixes:

  • Navigate to Online Store > Themes > Edit Code
  • Locate the theme.liquid file
  • Insert custom CSS code either:
    • After the <head> tag (Dan-From-Ryviu’s suggestion)
    • Above the </body> tag at the bottom (Moeed’s suggestion)

Both solutions involve adding markup/CSS to adjust the positioning of the chat button to prevent overlap.

Status: The discussion appears resolved with actionable code solutions provided, though the original poster has not confirmed implementation success. Images were shared showing the overlap issue and expected results.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hi there ,

Is there any way to stop the chat button from overlapping the cart slider ? You can access this by clicking the cart icon in header.

chat.jpg
chat.jpg660×901 53.4 KB

2

Go to your Online store > Themes > Edit code, open theme.liquid file, add this code after
1 Like
3

Hey @jnud21

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-1706166930029.png
Moeed_0-1706166930029.png1911×878 187 KB

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

Best Regards,
Moeed

1 Like