URGENT Chat icon top the right on mobile only

Store Design
, , , , ,

Topic summary

A user needs to reposition a chat icon to the right side of their Shopify store, but only on mobile devices while keeping desktop layout unchanged.

Attempted Solutions:

  • Two support representatives (Anthony from Beae Landing Page Builder and Moeed) provided CSS code snippets to be added to the theme.liquid file above the </body> tag
  • Both solutions involved custom CSS targeting the chat widget positioning

Current Status:

  • Initial code attempts failed to produce the desired result
  • Moeed provided revised code after the first attempt didn’t work
  • Issue remains unresolved: The latest code only works when browser window is resized on desktop, but doesn’t function properly on actual mobile devices
  • User shared a screenshot showing the desired appearance

Key Problem: The CSS solutions are not correctly targeting mobile-only viewports, affecting desktop layout or failing to apply on real mobile devices.

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

I would like to move the chat icon to the right on MOBILE ONLY

without changing anything on desktop

Anyone know the code?

Thank you

www.sundaypaloma.com

2

Hi @oscaroline ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid file
  3. Paste below code before :

Beae_Anthony_0-1695018163094.png
Beae_Anthony_0-1695018163094.png488×577 226 KB

Best regards,

Anthony

3

Hey @oscaroline

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-1695018355746.png
Moeed_0-1695018355746.png390×689 239 KB

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

Best Regards,
Moeed

4

not working :disappointed_face: I want it to look like the photo attached.

Screen Shot 2023-09-17 at 11.29.14 PM.png
Screen Shot 2023-09-17 at 11.29.14 PM.png994×1378 199 KB

5

Hey @oscaroline

Remove the previous code and add this new code in theme.liquid file.

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-1695019001170.png
Moeed_0-1695019001170.png391×691 240 KB

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

Best Regards,
Moeed

6

It only works when I decrease the size of web on desktop. not working on mobile.