Shopify Question posted in
The Shopify help center can be found here.

How do I move the Facebook Messenger icon higher in the right margin – Shopify

The default position for the messenger icon on my site is the bottom right corner. This however, hovers over my new product filter and sort feature which is not a great user experience.

I’ve googled this for over an hour, and not having much coding skills, cannot find a simple cut and paste solution which works for my Shopify theme. The code from the theme.liquid file follows.

I would be very appreciate of assistance from someone more skilled than me 🙂

Thank you all

 <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        xfbml            : true,
        version          : 'v6.0'
      });
    };

    (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

  <!-- Your customer chat code -->
  <div class="fb-customerchat"

    attribution=setup_tool
    page_id="deletedpageIDnumberon purpose"
    theme_color="#808080"
    logged_in_greeting="Do you have a question? Choose SMITH&SMITH for better lighting - rated 5.0 by our Customers 2018-20."
    logged_out_greeting="Do you have a question? Choose SMITH&SMITH for better lighting - rated 5.0 by our Customers 2018-20.">
Tags:

2

Answers


  1. 0

    The messenger icon uses fixed positioning. You need to adjust the bottom attribute to display it a bit above your filters bar. For that, following code works. Adding this code at the end of theme.scss file in your active theme should work fine.

    #fb-root .fb_dialog {
    bottom: 50pt !important; /* default 18pt*/
}

    Doing so, moves the messenger button above the filter bar like

    enter image description here

    Login or Signup to reply.
  2. 0

    POSITION: You can choose the alignment and position of the Chat Plugin on your website, you can adjust the bottom spacing if your website has a footer.
    So to change position of the Chat Plugin go to:

    • Login facebook and go to your facebook page.
    • Manage Page > "Settings" > Messaging
    • Add Messenger to your website and click "Get started Button"
    • There you can choose the Alignment, Bottom Spacing (Desktop) in px and Bottom Spacing (Mobile) in px
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search