All Tutorials

Add Facebook Like buttons to your online store

All Tutorials

Add Facebook Like buttons to your online store

Add Facebook Like buttons to your online store

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

You can customize your theme to add Facebook Like buttons to pages.

The best way to display your products on Facebook is to add a Shop tab to your business's Facebook page using the Facebook sales channel in Shopify. By connecting your store with Facebook, you can publish products and collections to your Facebook page.

Password-protected stores

Facebook buttons will not work on any shop that is password-protected. In fact many themes cannot even display any Facebook buttons or widgets while they are password-protected due to using ajax and javascript to pull these widgets into the page.

To avoid any Facebook caching issues, please avoid clicking Like buttons until you have launched your shop. In the event that you have clicked on those buttons and you are seeing the password protected page in the like area you will need to run your site through the Facebook debugger to help Facebook clear its cache of your shop. The Facebook debugger can be found here: Simply put in your website or your product's URL and click "debug".

Changing the Like button image

You added "Facebook Like" buttons to your pages and you don't like the image that Facebook has chosen to illustrate your content. Facebook uses the Open Graph Protocol, click here to learn more or continue reading to get started. If you've done everything properly in Shopify, try debugging on Facebook.

To change the image Facebook displays, you will need to edit your theme.

  1. Under the Layouts folder, locate and click theme.liquid to open it in the online code editor.

  2. Between the opening <head> tag and closing </head> tag, add the following code:

     {% if template contains 'product' %}
      content="http:{{ product.featured_image.src | product_img_url: 'grande' }}"
      content="https:{{ product.featured_image.src | product_img_url: 'grande' }}"
    {% elsif template contains 'article' %} {% assign img_tag = '<' | append:
    'img' %} {% if article.content contains img_tag %} {% assign src =
    article.content | split: 'src="' %} {% assign src = src[1] | split: '"' |
    first | remove: 'https:' | remove: 'http:' %} {% if src %}
    <meta property="og:image" content="http:{{ src }}" />
    <meta property="og:image:secure_url" content="https:{{ src }}" />
    {% endif %} {% endif %} {% else %} {% if settings.use_logo %}
    <meta property="og:image" content="http:{{ 'logo.png' | asset_url }}" />
      content="https:{{ 'logo.png' | asset_url }}"
    {% endif %} {% endif %} 
  3. Save your changes.

It is likely that your theme already uses Facebook meta data code like the one above, but that it contains errors. You might need to fix your code, replacing it with the one provided above.

Take note that some themes contain that Facebook code in a separate snippet, included in the theme.liquid file. If that's the case in your theme, you will need to update your code in a Liquid snippet, and not in theme.liquid. Snippets are found on the Edit HTML/CSS page, under Snippets on the left. The name of your snippet will be snippet-fb-open-graph-tags.liquid, fb-open-graph-tags.liquid, fb-open-graph.liquid, or a similar name.

The wrong image still appears

Facebook keeps cached content that has been liked before — it 'memorizes' it. So if the page you are 'liking' has been liked before — and recently so — you might still see the old image after you have made those edits to your theme. You can wait a couple of days or you can force Facebook to retrieve fresh content right away. How do you do that? You use this service: Enter the URL of your web page there and click 'Debug'.

Facebook and protocol-independent URLs

In all its content generated by the Rich Text Editor, Shopify uses special URLs for images that are ‘protocol-independent’. Those URLs begin with // instead of the usual or Such URLs are well-understood by all browsers and have several advantages over protocol-specific URLs: they work just as well with a secure and a non-secure connection (HTTP versus HTTPS).

Facebook has a problem with recognizing protocol-independent URLs for images. Facebook does not yet recognize those URLs. Facebook does not ‘see’ any images that are in your blog articles, pages' content and collections' description.

The snippet of code provided above achieves the following: if a product page is shared on Facebook, then it tells Facebook to use the product image to illustrate the posting. If it's a blog post that is shared, then it tells Facebook to use the first image in that blog post if it contains any images. If any other page is shared, then it tells Facebook to use your logo as image.