Adding and editing the Message Us button on your online store

If you are using the Messenger channel, then you can add a Message Us button to your online store:

Message us button

Customers can click the button to message you using Facebook Messenger at any time.

You can enable and edit the Message Us button from your Shopify admin. By default, the button appears in the bottom right corner of all the pages of your online store (except the checkout page).

If you want to add the button only to certain pages or page locations on your online store, then you can edit your theme's code. For example, you can add the Message Us button next to your existing social sharing buttons:

Message us and social sharing buttons

To add the Message Us button to a custom location on your online store, you need to get two code snippets from a third party (Facebook) and add them to your theme's code. You also need to add your App ID and Page ID from the Messenger Account page into the code snippets.

There are four main steps required:

  1. Copy the Facebook JS Buy SDK code into your theme's code.
  2. Add your App ID to the Facebook JS Buy SDK code.
  3. Copy the Message-Us Plugin code into your theme's code.
  4. Add your App ID and Page ID to the Message-Us Plugin code.

Caution

This is an unsupported customization. Unsupported customizations fall outside the scope of Shopify's support service. This means that our Support team won't be able to help you with problems you might have with this customization.

Where to go for help

If you need help with this customization, then you can visit the Shopify forums where you can find helpful advice from Shopify's growing community. You might also consider hiring a Shopify Expert who can help you set up this customization.

Copy the Facebook JS Buy SDK code into your theme's code

To add the Message Us button to your online store, you need to get the Facebook JS Buy SDK code and add it into your theme's code.

To copy the Facebook JS Buy SDK code:

  1. Go to the Messenger Platform Plugin Reference.

  2. From the Setup section, copy the Facebook JS Buy SDK code. Do not copy the <body> tag at the beginning of the code snippet. The relevant code is provided here, but to make sure you get the latest version, copy it from Facebook's site:

    <script>
    
      window.fbAsyncInit = function() {
        FB.init({
          appId: "APP_ID",
          xfbml: true,
          version: "v2.6"
        });
    
      };
    
      (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 = "//connect.facebook.net/en_US/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    
    </script>
    
  3. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  4. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  5. In the Layout folder, click theme.liquid:

    Click theme liquid
  6. Paste the Facebook JS Buy SDK code directly after your theme's <body> tag:

    Paste js sdk code

    If you copied and pasted the code from the Messenger Platform Plugin Reference, then make sure that you haven't added a second <body> tag to the page.

  7. When you're done, click Save:

    Click save

After you've copied the Facebook JS Buy SDK code into your theme's code, you need to get your App ID from the Messenger Account page.

Add your App ID to the Facebook JS Buy SDK code

After you've copied the Facebook JS Buy SDK code into your theme, you need to go to the Messenger Account page, copy your App ID, and then add it into the Facebook JS Buy SDK code snippet.

To get your App ID from the Messenger Account page:

  1. From your Shopify admin, click Settings, and then click Sales Channels (or press G S L).

  2. Click the Messenger channel.

  3. In the Message Us button section, click Further customize this button by adding code to your theme, and copy the App ID number:

    Copy app id
  4. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  5. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  6. In the Layout folder, click theme.liquid:

    Click theme liquid
  7. In the Facebook JS Buy SDK code snippet that you added to your theme's code, replace APP_ID with the App ID number that you copied from the Messenger Account page:

    Replace app id
  8. Click Save to confirm the change to your theme's code.

After you've added your App ID into the Facebook JS Buy SDK code snippet in your theme's code, you need to copy the Message-Us Plugin code and add it to your theme's code as well.

Copy the Message-Us Plugin code

After you've added your App ID into the Facebook JS Buy SDK code snippet, you need to copy another code snippet — the Message-Us Plugin code — and add it into your theme's code. You can choose where you want the Message Us button to appear:

  • If you want to add the Message Us button to a specific location (with other social sharing icons, as shown in this example), then you will paste the Message-Us Plugin code into one of the .liquid files in the Snippets folder.
  • If you want to add the Message Us button to a specific page, then you will paste the Message-Us Plugin code into the .liquid file for the page that you want in the Templates folder.

To copy the Message Us Plugin code:

  1. Go to the Message-Us Plugin, and copy the Plugin Code:

    Message us plugin code
  2. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  3. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  4. In the Snippets folder, click social-sharing.liquid:

    Click social sharing liquid

    Tip

    In this example, you are adding the Message Us button to a specific location — with the other social sharing icons on your page. To add the Message Us button to a specific page, you can click the .liquid file for the page that you want in the Templates folder.

  5. In the text editor, paste the Message-Us Plugin code where you want it to appear:

    Paste message us plugin code
  6. Click Save:

    Click save message us plugin code

After you've copied the Message-Us Plugin code into your theme's code, you need to get your App ID and Page ID from the Messenger Account page.

Add your App ID and Page ID to the Message-Us Plugin code

After you've copied the Message-Us Plugin code into your theme's code, you need to go to the Messenger Account page, copy your App ID and your Page ID, and then add it into the Message-Us Plugin code snippet.

To get your App ID and Page ID from the Messenger Account page:

  1. From your Shopify admin, click Settings, and then click Sales Channels (or press G S L).

  2. Click the Messenger channel.

  3. In the Message Us button section, copy the App ID and the Page ID numbers:

    Copy app id and page id

    Note

    You might find it helpful to copy both the App ID and the Page ID numbers to a text editor or a note pad so you don't have to come back to the Messenger Account page when pasting the numbers into the Message-Us Plugin code snippet in your theme's settings.

  4. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  5. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  6. In the Snippets folder, click social-sharing.liquid:

    Click social sharing liquid

    Note

    If you added the Message-Us Plugin code to another .liquid file, for example, in the Templates folder, then go to that specific ,liquid file.

  7. In the Message-Us Plugin code snippet that you added to your theme's code, replace APP_ID with the App ID number that you copied from the Messenger Account page:

    Replace app id in message us plugin
  8. In the Message-Us Plugin code snippet that you added to your theme's code, replace PAGE_ID with the Page ID number that you copied from the Messenger Account page:

    Replace page id in message us plugin
  9. Click Save:

    Click save app id page id

Tip

You can change the color and size of the button in the Message-Us Plugin code snippet as well. You can change the color to white or blue, and you can change the size to standard, large, or x-large.

After you've saved the changes to the Message-Us Plugin code, you can preview the results on your online storefront by clicking Preview:

Click preview

You will see the Message Us button on your online storefront:

Message us and social sharing buttons

Want to discuss this page?

Visit the Shopify Community