How can I reposition the chat button on my Shopify Dawn theme?

[PlanetPuff]

Hi there,

Im using dawn theme 9.0.0

Is there any way to move the chat icon in the bottom right up some pixels so it doesn't get covered by another widget that i have.

Website is planetpuff.co.uk

Thanks

[made4Uo]

Hi @PlanetPuff 

Please do the following 

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the base.css file
3. At very end of the code, add the code below

iframe#dummy-chat-button-iframe {
    bottom: 7rem !important;
}

 See result below

[PlanetPuff]

thank you for the reply, this has worked however when i click the chat icon it goes back to the original overlapping position. is there any way to fix this?

thanks!

[Danmuges]

hey did you work out a solution to this? im having the same problem 

[oupes]

This code is useless, when you click the chat button it just reverts back to its original position. How can this be fixed?

[Rick]

Hi @PlanetPuff 

Thanks for reaching out here for help!

I understand that you are wondering how to change the position of the Shopify Inbox chat icon on your storefront.  I can see that @made4Uo has kindly replied to offer some custom coding advice in order to move this icon, however I wanted to let you know that you can change the position of the icon from within the sales channel settings.

If you head to Sales Channels > Inbox and navigate to Chat Settings, you can toggle the icon location between bottom right or bottom left. You mentioned that the app icon was overlapping on another one, so perhaps moving it over to the other side of the page might help to reduce the clutter and cleanly separate the icons?

[PlanetPuff]

Thanks for the reply but i have another widget on the bottom left otherwise i would change the location of the widget 🙂

Thanks.

[oupes]

Can't we make the button move up a bit?

[oupes]

waiting for your reply

[Rick]

Hi @oupes 

Thanks for reaching out here.

As mentioned previously, by default you can toggle the app icon location between bottom right or bottom left. It's not possible to move the app icon up slightly using the standard app settings, as this is not one of the settings you can choose from.

However, it may be possible to implement some custom code in order to adjust the positioning of the icon. I found this Community post where a Shopify Partner explains how you can do this. Just keep in mind this would technically be third-party or external code, so use this with caution.

You could of course consider hiring a Shopify Expert to assist with a custom coding solution for this. Shopify Experts are professionals who provide specialized services and expertise to merchants on the platform.

[ahsan_dgins]

@PlanetPuff

@oupes

@Danmuges

The following solution consists of 2 codes and can be copy-pasted by any one (any non-tech, layman etc). I am not a developer but I tried to understand and implement these codes that I have gathered from different sources and combined + modified to following codes. 

It solves 2 problems:

1. Positioning the chat icon anywhere you want on your web store.

2. After closing the chat, it will close down to where it is started from - the new position. (It will not move to its initial state / position).

1st code will cause chat button to go up 65px so there can be another app's button below it. This also holds the chat button at the same position even after closing the chat window. Adjust bottom & right padding as per your requirement.

2nd code will cause iframe to remain visible on-screen when it is opened so we need to adjust the top padding and scale-size of the iframe so that it doesn't cut through the top while open. If this is not done, the header might overlap it.

You can adjust top padding value and scale value from 0.72 to any value (as per your need so that it doesn't cut off and isn't overlayed by header). 

I have tried and tested these codes on Dawn 10.0.0 theme. These are working fine and providing the desired results. I hope these codes will work on other themes as well. 

Follow these Steps:

a) Go to Online Store

b) Edit Code (Click 3 dots and select edit code)

c) Find / search base.css file

d) Add the following codes at the last in the bottom. 

1st code (Mobile version):

@media only screen and (max-width: 750px){

      #dummy-chat-button-iframe, #shopify-chat > iframe, #shopify-chat {

        bottom: 55px !important;

        right: 5px !important;

        z-index: 2 !important;

      }

}

2nd code (Mobile version):

@media only screen and (max-width: 750px){

  #shopify-chat > iframe[style*="min-height"], #shopify-chat > iframe[style*="left: 0"] {

        bottom: 0px !important;

        top: 30px !important;

        z-index: 999 !important;

        -webkit-transform: scale(0.72);

        -moz-transform-scale(0.72);

      }

}

Above codes will only work for Mobile version. For desktop version, replace max with min, and change the values of bottom, top, right & scale values as per your need after testing.

1st code (Desktop version):

@media only screen and (min-width: 750px){

      #dummy-chat-button-iframe, #shopify-chat > iframe, #shopify-chat {

        bottom: 1200px !important;

        right: 5px !important;

        z-index: 2 !important;

      }

}

2nd code (Desktop version):

@media only screen and (min-width: 750px){

  #shopify-chat > iframe[style*="min-height"], #shopify-chat > iframe[style*="left: 0"] {

        bottom: 1200px !important;

        right: 80px !important;

        z-index: 999 !important;

        -webkit-transform: scale(0.99);

        -moz-transform-scale(0.99);

      }

}

I have placed all these 4 codes at the end of base.css of Dawn 10.0 theme. All these are working fine for Mobile & Desktop versions separately. 

Credited:

Gmacv (Stackoverflow)

FriedChicken (Stackoverflow) 

https://stackoverflow.com/questions/71534772/how-to-style-shopify-2-0-inbox-c hat-icon-inside-an-iframe

@kazi 

https://community.shopify.com/c/technical-q-a/shopify-inbox-reducing-height-of-chat-box/td-p/1249745

[ahsan_dgins]

Updated Codes:

 1st code will cause chat button to go up so there can be another app's button below it. This also holds the chat button at the same position even after closing the chat window. Adjust bottom & right padding as per your requirement.

 2nd code will cause iframe (chat window) to remain visible on-screen when it is opened. Thus, we might need to adjust the bottom padding and scale-size of the iframe so that it doesn't cut through the top while open.

You can adjust bottom padding value and scale value from 0.9 to any value (as per your need so that the chat window doesn't get cut off).

I have put other factors (top, bottom, z-index, webkit-transform-scale etc) between /* & */ so that these are treated as comments and not executed. If you want to utilize any factor, just remove /* & */ from both ends & utilize it. 

Please follow these Steps:

a) Go to Online Store

b) Edit Code (Click 3 dots and select edit code)

c) Find / search base.css file

d) Add the following codes at the last in the bottom. 

/* Shopify Inbox Chat Button Position (Mobile) */

@media only screen and (max-width: 767px){

      #dummy-chat-button-iframe, #shopify-chat > iframe, #shopify-chat {

        bottom: 55px !important;

        right: 5px !important;

    /* z-index: 2 !important; */

      }

}

/* Shopify Inbox Chat Window Position (Mobile) */

@media only screen and (max-width: 767px){

  #shopify-chat > iframe[style*="min-height"], #shopify-chat > iframe[style*="left: 0"] {

         bottom: 25px !important;

         border: 1px solid #202a36 !important;

         -webkit-transform: scale(0.9);

     /* -moz-transform-scale(0.72); */

     /* top: 30px !important; */

     /* z-index: 999 !important; */

      }

}

/* Shopify Inbox Chat Button Position (IPAD) */

@media only screen and (min-width: 768px) and (max-width: 989px){

      #dummy-chat-button-iframe, #shopify-chat > iframe, #shopify-chat {

        bottom: 100px !important; 

        right: 5px !important;

    /* top: 750px !important; */

    /* z-index: 2 !important; */

      }

} 

/* Shopify Inbox Chat Window Position (IPAD) */

@media only screen and (min-width: 768px) and (max-width: 989px){

  #shopify-chat > iframe[style*="min-height"], #shopify-chat > iframe[style*="left: 0"] {

        right: 75px !important;

    /* -webkit-transform: scale(1.00); */

    /* -moz-transform-scale(0.9); */

    /* bottom: 52px !important; */

    /* top: 100px !important; */

    /* z-index: 999 !important; */

      }

}

/* Shopify Inbox Chat Button Position (Desktop) */

@media only screen and (min-width: 990px){

      #dummy-chat-button-iframe, #shopify-chat > iframe, #shopify-chat {

        bottom: 120px !important;  

        right: 5px !important;

    /* top: 600px !important; */

    /* z-index: 2 !important; */

      }

} 

/* Shopify Inbox Chat Window Position (Desktop) */

@media only screen and (min-width: 990px){

  #shopify-chat > iframe[style*="min-height"], #shopify-chat > iframe[style*="left: 0"] {

         right: 80px !important;

    /* -webkit-transform: scale(1.00); */

    /* -moz-transform-scale(1.00); */

    /* bottom: 1200px !important; */

    /* top: 200px !important; */

    /* z-index: 999 !important; */

      }

}

I have placed all these codes in base.css in Dawn Theme 10.0. I found these working fine on my web store www.aadesgins.store