How to reposition the Inbox chat bubble in the Dawn theme?

Shopify Apps
1

Hello everyone,

I am trying to reposition the Shopify Inbox chat bubble to sit above the ‘accept cookies’ bar as they are currently overlapping and effecting our user experience.

I found a code solution here: Shopify Inbox - Move chat button up to avoid overlap with mobile toolbar - Shopify Community

BUT I can’t find where to place the code ‘under base.css[shopify inbox]’ as they suggested, when using the Dawn theme.

Can anyone tell me where to place the theme, or alternatively provide coding for the Dawn theme to move the chat bubble icon above the cookies bar? Better yet! A code that means the chat bubble also stays in that place, rather than returning to overlap once a customer has clicked on it?

Our webstore address is: small-folk.co.uk

Thank you!

1 Like
2

Hi @lhoney

Thank you for the information. Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
iframe#dummy-chat-button-iframe, iframe#ShopifyChat {
    bottom: 90px !important;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

Hello,

Thank you for your help! I have followed your instructions but can’t find a .css section within the assets folder.

Do you know where I could be going wrong/where else I can drop the code?

Theme-Example.jpg
Theme-Example.jpg366×849 28.4 KB

4

Hi @lhoney

Try the theme.scss.liquid

5

Hello,

This has done the trick moving the chat bubble but the issue is now on the mobile site - when you click on the chat bubble and view the auto response window, the view is zoomed in so hides the exit button (meaning you get stuck on the chat window, even when you refresh the page as it pops up again)

Is there any way to edit to code to not have the window view so zoomed in?

Best wishes,

Louise