How can I change the position of Inbox icon

Solved

How can I change the position of Inbox icon

y_y
Tourist
10 0 4

Hi

I want to move the shopify inbox icon above the black banner so that there would be no overlapping of the icon and another green rectangle button (photo below, see bottom right)

 

How can I do this by editing code? Where can I find the code and how do I fix it?

 

スクリーンショット 2022-09-09 21.20.32.png

Here's the link of my store

https://shop.ethicalspirits.jp/collections/last/products/last-episode-0-modest

 

Accepted Solution (1)

Kani
Shopify Partner
468 125 227

This is an accepted solution.

Hi @y_y 

Kani_0-1662955972554.png

Kani_1-1662955996343.png

 

1: Online store > themes > Actions > Edit code > Assets > theme-product.min.css

2: paste code at last

iframe#dummy-chat-button-iframe {
    bottom: 163px!important;
}
@media screen and (min-width: 769px) {
    iframe#dummy-chat-button-iframe {
        bottom: 83px!important;
    }
}

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂

View solution in original post

Replies 16 (16)

Kani
Shopify Partner
468 125 227

This is an accepted solution.

Hi @y_y 

Kani_0-1662955972554.png

Kani_1-1662955996343.png

 

1: Online store > themes > Actions > Edit code > Assets > theme-product.min.css

2: paste code at last

iframe#dummy-chat-button-iframe {
    bottom: 163px!important;
}
@media screen and (min-width: 769px) {
    iframe#dummy-chat-button-iframe {
        bottom: 83px!important;
    }
}

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
y_y
Tourist
10 0 4

Thanks so much! It works!

MatthiasMaurer
Visitor
2 0 0

I need this too! 😄 I dont have that file. I use the Dawm-Theme. Where do I need to inject this code then?

MatthiasMaurer
Visitor
2 0 0

I have found the file. for me section.product.css seems to work. I cannot speak to the button with "iframe#dummy-chat-button-iframe" though. when i use "iframe#ShopifyChat" it works, but that also moves the chat window when you click the button which is not wanted. Any suggestion?

Here is my store: https://thegainersclub.myshopify.com/products/zunehmshake

Kani
Shopify Partner
468 125 227

Hi @MatthiasMaurer 

 

can you share me your store password? so that I can look into it. currently I don't know what is your need. I can only see this, seems like you hide the text box.

Kani_2-1670679953902.png

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
talonwr
Shopify Partner
7 0 1

My website is clubpaddles.com. Could you help me fix the same? thanks!

oupes
New Member
5 0 0

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

lilac23
Tourist
8 0 2

Hi Kani
For My theme I only have liquid files. Could you please assist me to fix this please

Kani
Shopify Partner
468 125 227

what is your liquid file? I think it's same, you can show me and I will look into it for you

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
lilac23
Tourist
8 0 2

Hi Kani
Thanks for your prompt response. I am not able to locate the liquid file that will have code related to this.
I am using Gecko theme

Kani
Shopify Partner
468 125 227

Pls share me your store link

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
lilac23
Tourist
8 0 2

https://lilactree.au/

 

the store is pwd protected can I share password somewhere else please

Kani
Shopify Partner
468 125 227

Sure, feel free to DM me the password

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂

ahsan_aadesgins
Excursionist
25 1 2

@oupes

@lilac23

@talonwr

 

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-chat-icon-inside-an-ifra...

 

@kazi

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

ahsan_aadesgins
Excursionist
25 1 2

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

ahsan_aadesgins
Excursionist
25 1 2

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