Change size Shopify Inbox Chat icon on mobile Dawn 8.0.0

Store Design
, , , ,
1

2CF6B084-B2A2-4507-A5F6-BAA82B4A4857.png
2CF6B084-B2A2-4507-A5F6-BAA82B4A4857.png1125×2436 445 KB

Hi,

I would like to change the size of the icon of Shopify Inbox on mobile devices to look smaller (same size) as the other icon on the left side, please check photo as reference.

anyone know how and what to do?

on desktop it’s looks pretty much the same so I don’t really need to change.

2 Likes
2

Hello @1989streetwear ,

Can you give me your Store URL( with pass if your store password is enabled) so I can check it for you?

Kind & Best regards,
GemPages Support Team

3

@1989streetwear

Please share the password?

4

@1989streetwear

Please share your site URL and Password,
I will check out the issue and provide you a solution here.

5

Hello @GemPages @infoatcodelab7 @oscprofessional

website: 1989streetwear.com

password: bet1989

Thank you

6

@1989streetwear

button.chat-toggle svg {
    height: 19px;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

7

Hi @oscprofessional

in Assets folder there is only base.css

I have tried pasting the code at the end of the file but nothing has changed.

What should I do?

8

Hello @1989streetwear ,

You can try by follow these steps:

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

GemPages_0-1677228308279.png
GemPages_0-1677228308279.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_2-1677228522660.png
GemPages_2-1677228522660.png1344×879 68.8 KB

If not work, You can reach app chat to fix .

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

9

Hi @1989streetwear

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

@media (min-width: 768px ) {
          iframe#dummy-chat-button-iframe {
              width: 50px !important;
              height: 50px !important;
          }
          iframe#dummy-chat-button-iframe button.chat-toggle svg {
              width: 20px;
          }          
          iframe#dummy-chat-button-iframe button#dummy-chat-button.chat-toggle {
              width: 50px !important;
              height: 50px !important;
          }          
      }

Hope you find my answer helpful!

Best regards,

Victor | PageFly

10

@1989streetwear

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

Step 2: Search file base.css

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

@media(max-width:575px){
  #shopify-chat-dummy button#dummy-chat-button.chat-toggle{
  width:50px;
  height:50px;
  }
  button.chat-toggle svg{
  height: 30px
  }
}
11

@infoatcodelab7 @PageFly-Victor @GemPages @oscprofessional

Unfortunately none of these codes worked. I don’t know what I’m supposed to do

12

@1989streetwear

button.chat-toggle svg {
    height: 22px;
}
button#dummy-chat-button.chat-toggle {
    width: 40px;
    height: 40px;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

13

it seems that this belongs to the settings of that app, so our code is not working, I recommend you contact Shopify to get the necessary support.

14

these all wont work because it’s iframe. You can’t update CSS inside the iframe from outside. And I’m also trying to find a way how to do it. The app itself should have some block where you can add some custom CSS

15

It won’t work since it’s iframe. And you are saying you are expert in website building :see_no_evil_monkey:

16

Found a solution in this post! https://community.shopify.com/c/shopify-design/shopify-2-0-dawn-how-to-make-inbox-chat-icon-smaller/td-p/1526845

#dummy-chat-button-iframe {
    transform: scale(0.75);
}