Solved

Why does my CSS code for chat icon lose effect after closing it?

Tendency
Shopify Partner
14 0 2

Hi,

 

I just wrote this code and it seems to work

fine at first glance, but when I click to open

the chat, after closing it the code loses its

effect, how can I fix it?

 

 

 

 

/* Chat Button Dimensione */

.template-product 
#dummy-chat-button-iframe , #shopify-chat > ​​iframe , #shopify-chat
a[href="/products/"] { 
  bottom : 70px !important ; 
  right: 0px !important; 
  z-index : 999 !important; 
  transform: scale(0.8);
}

#dummy-chat-button-iframe , #shopify-chat > ​​iframe , #shopify-chat
a[href="/products/"] { 
  bottom : 5px !important ; 
  right: 0px !important; 
  z-index : 999 !important; 
  transform: scale(0.8);
}

 

 

 

 

Link Expample 

 

For us it is important because the button

must not be superimposed on purchase

buttons etc...

 

Thanks

 

Accepted Solution (1)
EBOOST
Shopify Partner
955 257 294

This is an accepted solution.

Hi @Tendency 

could you remove old CSS after that add code below?

.template-product #dummy-chat-button-iframe , #shopify-chat > iframe , #shopify-chat a[href="/products/"] { 
  bottom : 70px !important ; 
  right: 0px !important; 
  z-index : 999 !important; 
  transform: scale(0.8);
}

#dummy-chat-button-iframe , #shopify-chat > iframe , #shopify-chat a[href="/products/"] { 
  bottom : 5px !important ; 
  right: 0px !important; 
  z-index : 999 !important; 
  transform: scale(0.8);
}
#dummy-chat-button-iframe,
#shopify-chat #ShopifyChat {
  transform: scale(0.8);
  bottom: 0 !important;
  right: 0px !important;
  z-index: 999 !important;
}
.template-product #dummy-chat-button-iframe,
.template-product #shopify-chat #ShopifyChat {
  bottom: 70px!important;
}
#shopify-chat #ShopifyChat[isopen="true"]{
  transform: scale(1);
  right: 24px!important;
}
@media(max-width: 749px){
  .template-product #shopify-chat #ShopifyChat[isopen="true"]{
    bottom: 0!important;
  }
}

Could you share your url store and pass?

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤

View solution in original post

Replies 20 (20)

EBOOST
Shopify Partner
955 257 294

Hi @Tendency 

May I suggest to update code below

.template-product #dummy-chat-button-iframe , #shopify-chat > iframe , #shopify-chat a[href="/products/"] { 
  bottom : 70px !important ; 
  right: 0px !important; 
  z-index : 999 !important; 
  transform: scale(0.8);
}

#dummy-chat-button-iframe , #shopify-chat > iframe , #shopify-chat a[href="/products/"] { 
  bottom : 5px !important ; 
  right: 0px !important; 
  z-index : 999 !important; 
  transform: scale(0.8);
}
#shopify-chat #ShopifyChat {
  transform: scale(0.8);
  bottom: 70px !important;
  right: 0px !important;
  z-index: 999 !important;
}
#shopify-chat #ShopifyChat[isopen="true"]{
  transform: scale(1);
  right: 24px!important;
}
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
Tendency
Shopify Partner
14 0 2

Thanks for reply.

 

so there seems to be a problem with the open

chat in mobile version and on non-product pages,

when I open and close the chat, the button loses

its distance from the bottom and stays higher.

 

 

IMG_0881.PNG

EBOOST
Shopify Partner
955 257 294

Hi @Tendency 

For mobile version. Maybe I suggest to add code below to bottom of file.

@media(max-width: 750px){
  #shopify-chat #ShopifyChat[isopen="true"]{
    bottom: 0!important;
    right: 0!important;
  }
}
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
Tendency
Shopify Partner
14 0 2

looks much better thanks, still the error

after closing the bottom placement though.

 

video example

https://streamable.com/wxrsvb

EBOOST
Shopify Partner
955 257 294

This is an accepted solution.

Hi @Tendency 

could you remove old CSS after that add code below?

.template-product #dummy-chat-button-iframe , #shopify-chat > iframe , #shopify-chat a[href="/products/"] { 
  bottom : 70px !important ; 
  right: 0px !important; 
  z-index : 999 !important; 
  transform: scale(0.8);
}

#dummy-chat-button-iframe , #shopify-chat > iframe , #shopify-chat a[href="/products/"] { 
  bottom : 5px !important ; 
  right: 0px !important; 
  z-index : 999 !important; 
  transform: scale(0.8);
}
#dummy-chat-button-iframe,
#shopify-chat #ShopifyChat {
  transform: scale(0.8);
  bottom: 0 !important;
  right: 0px !important;
  z-index: 999 !important;
}
.template-product #dummy-chat-button-iframe,
.template-product #shopify-chat #ShopifyChat {
  bottom: 70px!important;
}
#shopify-chat #ShopifyChat[isopen="true"]{
  transform: scale(1);
  right: 24px!important;
}
@media(max-width: 749px){
  .template-product #shopify-chat #ShopifyChat[isopen="true"]{
    bottom: 0!important;
  }
}

Could you share your url store and pass?

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
Tendency
Shopify Partner
14 0 2

Thanks u soo much! Its perfect

Sam1069
Visitor
1 0 0

Where do you past this? Thank you so much!

EBOOST
Shopify Partner
955 257 294

Hi @Sam1069 

You can refer this article

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
Bwoolfy
Tourist
5 0 2

Please help me. It doesn't seem like [isopen="true"] is working! I just need to simply do the following...

 

When chat widget is closed

bottom: 115px !important

 

when chat widget is open

bottom: 0px !important.

 

Please help me I am going to cry!

EBOOST
Shopify Partner
955 257 294

Hi @Bwoolfy 

Could you please share your url store and password? I will help check it.

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
Bwoolfy
Tourist
5 0 2

@EBOOST TopShelfTequila.com.au

There is no password.

EBOOST
Shopify Partner
955 257 294

Hi @Bwoolfy,

Shopify updated structure.

Maybe I suggest you use code below: 

 

 #dummy-chat-button-iframe , #shopify-chat > iframe{ 
  bottom : 115px !important;
}
#shopify-chat #ShopifyChat[style~="min-height:"]{
  bottom : 0 !important;
}

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
Bwoolfy
Tourist
5 0 2

Thank you so much but on mobile still not working 😞Screenshot_42.png

Bwoolfy
Tourist
5 0 2

I seem to have made it work with the below:

 

Instead of min-height, i can see "left" is only present when open. 

 

#dummy-chat-button-iframe,
#shopify-chat > iframe {
bottom: 115px !important;
}
#shopify-chat #ShopifyChat[style~="left:"] {
bottom: 0 !important;
}

EBOOST
Shopify Partner
955 257 294

Hi @Bwoolfy 

Correct. I  have just added on Desktop version.

/* Desktop */
#dummy-chat-button-iframe , #shopify-chat > iframe{ 
  bottom : 115px !important;
}
#shopify-chat #ShopifyChat[style~="min-height:"]{
  bottom : 0 !important;
}
/* Mobile */
@media(max-width: 749px){
    #dummy-chat-button-iframe , #shopify-chat > iframe{ 
      bottom : 115px !important;
    }
    #shopify-chat #ShopifyChat[style~="left:"]{
      bottom : 0 !important;
    }
}
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
Zboyz23
Visitor
1 0 0

I would like to use a version of your code on my site www.shopzadehmdskin.com

 

Specifically, I would like to chat box icon to be the same size and on the same level as the accessibe widget. Also, on mobile I would like the chat box to be slightly bigger when it is open than what you have in your code. I tried adjusting the code you provided, but without any luck. Can you assist? Thanks.

ahsan_aadesgins
Excursionist
25 1 2

@Zboyz23

 

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-fram...

 

@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

KingdomUltra
Visitor
1 0 0

Please where do we edit this code in the theme? I am trying to locate the code so i can edit the chat popup size on the footer.

EBOOST
Shopify Partner
955 257 294

Hi,

You can follow steps below to add code.

1. Go to Store Online-> theme -> edit code

EBOOST_1-1672356985580.png
2. Assets/base.css

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤