A common issue that pops up (and not just for Shopify sites) is when a visitor tries to share a product or page socially and instead of the featured image on the page, something else pops up.  What pops up depends on how the open graph image is coded within your theme (and sometimes it even depends on how images are handled and served by your server). Here are 3 easy steps to fix this issue in Shopify.

Why Does This Happen?

If your theme is not specifically coded to use the open graph property for image, a site such as Facebook or Twitter cannot determine what image to use resulting in pulling in your logo, a random image, or even a broken image.  To fix this, we first need to add the code so that the website understands what is assigned to the open graph image by adding og:image to shopify theme.liquid file.

Step 1: Create a Shopify Snippet

Create your snippet and name it fb-open-graph.liquid.  Paste the code from this file (or upload this file to Snippets).   Shopify OG snippet (created by Chris at GitHub)

Step 2: Add Include in your Theme

Add: {% include ‘fb-open-graph’ %} to your theme.liquid file

Step 3: Facebook Debug

If you have tried sharing a product from Shopify to Facebook and the wrong image appeared, it has unfortunately been cached within Facebook.  It can take up to 72 hours before Facebook will scan your website again.  The easy way to clear the cache is to visit this URL:

https://developers.facebook.com/tools/debug/

Then, enter your Shopify product URL and press Debug button.

Once loaded, press the “Scrape Again” button.  You may need to do this a few times before the cache updates and your product image appears.