Facebook Messenger Icon

Solved
shells
Explorer
193 3 97

Hi all, 

I've added the Facebook messenger icon but it is blocking the scroll up button (grey round button underneath) I have. How can I stack it on top of the scroll up button? And how can I make the Facebook message icon the same size as the scroll up?

Thank you! my website is www.feyrebaby.com.au

 

shells_0-1626327044182.png

 

HardikDavra
Shopify Partner
2328 368 1003

@shells 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

.fb_dialog_content iframe {
bottom: 16% !important
right: 0% !important;
}
PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
shells
Explorer
193 3 97

Hi @HardikDavra Unfortunately this doesnt work. Can you help me take a look at it again? Thank you!

0 Likes
Akibhusen
Excursionist
196 37 68

This is an accepted solution.

Hi,

Please add the below code of CSS at the end of your theme.scss.css file. You can find this file in the assets folder of your theme.

 

.fb_dialog_content iframe{
	right: 65px !important;
	bottom: 1.5vh !important;
}
.js-back-to-top{
	right:20px !important;
}
Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
HardikDavra
Shopify Partner
2328 368 1003

@shells It seems that you have not placed my code in the right place. Please check again.

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
shells
Explorer
193 3 97

I have. I think there is something wrong with the code. It messes up my website. 

0 Likes
shells
Explorer
193 3 97

Still the same. Icon size it still bigger than the scroll up and they are still stacked over each other.

0 Likes
Akibhusen
Excursionist
196 37 68

Hi @shells ,

Just try my code which I have given above.

Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
shells
Explorer
193 3 97

ok works now!! Thank you

but the Facebook Messenger Icon is still much bigger than the go to top icon. Any way to shrink it?

Thanks!

Akibhusen
Excursionist
196 37 68

This is an accepted solution.

Hi,

JFI, We can not add the CSS in the Iframe content.

The Facebook chat icon is available inside the Iframe so CSS does not work.

Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution