How can I hide the chat icon on mobile view?

bond1207
New Member
6 0 0

Hi there,

 

i want to hide the shopify chat icon, but only on mobile view. I am using the pixelunion Empire theme. Can anybody help me out?  I could´t find a way and your help is highly appreciated!

 

Thanks in advance,

 

Oliver

Replies 10 (10)

ThomKnepper
Shopify Partner
188 30 69

Hi there,

 

I would recommend you to fix this with a little bit of CSS. Add the following CSS:

 

@media screen and (max-width 670px){
   div#shopify-chat{
      display: none;
   }
}

 

(you can add it to your theme quite easily as "custom liquid" as well by placing this CSS in a {% style %} your css here {% endstyle %})

 

Hope this helps!

Best wishes,
Thom Knepper - Athom.Agency
- Was my reply helpful? Please Like to let me know!
- Was your question answered? Awesome! Please Mark it as an Accepted Solution
bond1207
New Member
6 0 0

Hi ThomKnepper,

 

so i open the theme.css.liquid  - but where exactly do i have to place this?:

 

@media screen and (max-width 670px){
div#shopify-chat{
display: none;
}
}

 

At the very end of the theme.css.liquid - or somewhere in the existing chat part?

 

 

This is the last part/lines of my css.liquid. Could you have look?:

 

@media screen and (max-width: 719px) {
.slideshow-slide__content-background-link {
color: #000;
}
}
@media only screen and (min-width: 750px) {
.product-gallery.click-to-zoom-enabled {
position: sticky !important;
top: 120px !important;
height: 100% !important;
}
}
@media only screen and (min-width: 750px) {
iframe#dummy-chat-button-iframe {
bottom: 100px!important;
}
}
@media screen and (min-width: 750px) {
iframe#dummy-chat-button-iframe {
bottom: 220px!important;
}
}

 

/* globo css DC customize */

.swatches-globo--list {
padding-top: 6px;
}

.swatches-globo .swatch--gl li.swatches-more label.globo-size-medium:not(.globo-style--button),
.swatches-globo .swatch--gl li.swatches-more label:not(.globo-style--button) {
font-size: 11px !important;
display: flex;
justify-content: center;
align-items: center;
}

.swatches-globo--list .swatches-globo {
margin-bottom: 0 !important;
margin-top: 10px;
}

.swatches-globo--list .swatches-globo .swatch--gl {
margin: 0 !important;
}

 

Thanks!!! 

 

ThomKnepper
Shopify Partner
188 30 69

Hi there,

 

I would recommend you to simply put in a "custom liquid" section and within that section copy the exact following code:

 

{% style %}
@media screen and (max-width 670px){
   div#shopify-chat{
      display: none;
   }
}
{% endstyle %}

 

This will do the trick 😉

Best wishes,
Thom Knepper - Athom.Agency
- Was my reply helpful? Please Like to let me know!
- Was your question answered? Awesome! Please Mark it as an Accepted Solution
bond1207
New Member
6 0 0

In the theme editor i just added a "custom liquid" section and placed the code inside. Unfortunately the chat icon is still showing in mobile view. 

 

Thanks for your patience, i´m desperate here...

bond1207
New Member
6 0 0

If there are any other ideas or suggestions about what i am doing wrong, please let me know. I really want the icon to disappear from the mobile view. 

 

Thanks a lot

ThomKnepper
Shopify Partner
188 30 69

So I checked on a website which also had the Shopify Chat enabled and this code should work.

 

{% style %}
@media screen and (max-width 670px){
   div#shopify-chat,
   iframe#dummy-chat-button-iframe{
      display: none;
   }
}
{% endstyle %}

 

Best wishes,
Thom Knepper - Athom.Agency
- Was my reply helpful? Please Like to let me know!
- Was your question answered? Awesome! Please Mark it as an Accepted Solution

PageFly-Oliver
Shopify Partner
878 190 174

Hi @bond1207 ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
@media (max-width 767px){
   #shopify-chat{
      display: none !important;
   }
}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

<phong cách>

@media (chiều rộng tối đa 767px){

div#shopify-chat{

hiển thị: không !quan trọng;

}

}

</style>

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

bond1207
New Member
6 0 0

Hi Oliver,

 

thanks a lot for your response and the suggestion. I just tried it, but unfortunately it didn´t work.

PageFly-Oliver
Shopify Partner
878 190 174

Hi, can you give me the URL so I can check it easy 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

bond1207
New Member
6 0 0

Hi Oliver,

 

sorry for being late with my answer. Christmas took a lot of my time.

 

I tried every way provided in this thread, but still couldn´t make it work.

 

This is our website: https://www.moebelraute.de

 

Your help is highly appreciated.

 

Kind regards,

 

Oliver