intermediate Intermediate tutorials require familiarity with basic web design concepts, as well as basic knowledge of HTML, CSS and JavaScript.

Adding a Facebook Like Button to your Online Store

If you have a Facebook fan page for your business, you can add an additional Like button to your theme or content to let your visitors Like your brand on Facebook directly from your Online Store.

Generate your button code Use the Facebook Developer resources to get the code snippets to add a Like button to your store
Add the Facebook Javascript SDK to your theme Add a snippet of code to your theme.liquid
Add the Like button to your templates or pages Add the Like button to your template or pages

Generate your button code

  1. Go to the Like Button For The Web page on the Facebook Developer resources site.

  2. Set the URL to like as your Facebook Page URL.

  3. Customize the look of your button.

  4. Uncheck Include Share Button.

    Reminder

    The Facebook Share button is included as a requirement for a theme to be sold in the Shopify Theme Store. The Share button lets your visitors share specific products or pages of your Online Store.

  5. Click Get Code.

  6. You will receive a Javascript SDK code snippet and a Like button code snippet.

Add the Facebook Javascript SDK to your theme

  1. In a new browser tab or window, go to the Edit HTML/CSS page.

  2. Under the Layouts folder, click to open theme.liquid.

  3. Use the search feature using cmd + f on a Mac or ctrl + f on a PC and search for the <body> tag.

  4. From the Facebook browser tab, copy the Javascript SDK code to your clipboard.

  5. Paste your clipboard contents into the theme.liquid template, after the <body> tag.

  6. Save your changes.

Add the Like button to your templates or pages

  1. From the Facebook browser tab, copy the Like button code to your clipboard.

  2. Paste your clipboard contents into the the template of your choice.

  3. Save your changes.

    Reminder

    You can also use the code in Blog Posts, Pages, or other pages using the Rich Text Editor to add HTML content.

This customization is not supported by our Shopify Gurus. Learn more ›

Ready to put what you've learned into action?

Build an online store with Shopify. Try it free.

Experience the future of retail now.

Shopify Point of Sale. Try it free.