Social: Add a custom share image for Pipeline 2.x

This article is for older versions of Pipeline only - Pipeline 2.x

This tutorial will help you override your theme settings in Pipeline to add a global setting for the social share photo. Always make a duplicate of your theme and perform these steps only if you're comfortable with updating the HTML pages in the Theme Editor. There will be 2 steps, first is replace 16 lines of code in your settings_schema.json file and the second is to replace all code in your social-meta-tags.liquid file. Follow these steps carefully:

1

settings_schema.json

From the config folder, opensettings_schema.json

Search for " on Google Plus" in the right-side search option and find the following line (Command-F on Mac or Control-F on Windows):

Find the line that starts with: "label": "+1 on Google Plus

Select all the code from exactly that line right to the end of the file. 

We will be replacing all of this with new code. Your selection should be about 16 lines. Make sure you verify your starting point and include all brackets to the end in your selection as shown below:

Replace with this new code:
copy/paste to replace

        "label": "+1 on Google Plus"
      },
      {
        "type": "header",
        "content": "Share Image"
      },
      {
        "type": "image_picker",
        "id": "home_social_share_image",
        "label": "Homepage share image",
        "info": "Default sharing image for the home page"
      }
    ]
  },
  {
    "name": "Favicon",
    "settings": [
      {
        "type": "image_picker",
        "id": "favicon",
        "label": "Favicon image",
        "info": "Will be scaled down to 32 x 32px"
      }
    ]
  }
]

Save your file with the new code replacing the old selection.

2

snippets/social-meta-tags.liquid

From the Snippets folder, open social-meta-tags.liquid:

Replace all the code with the code from this file:

Click to view code

This is a new version of social-meta-tags.liquid which supports homepage social image override. 

Save the file:

Scroll towards the bottom to the Share Image section:

Select and add a share image or change the existing one. 

Save your settings:

Step 2

Use these share tools to tell Facebook and Twitter that you have a new homepage share image:

Share tool for Facebook:
Click to use Facebook share tool

Share tool for Twitter:
Click to use Twitter share tool

Example of Facebook debug tool:

(1) Add the homepage address of your shop. Be sure it's the homepage and not a collection or product page. 

(2) Use the Debug button to start.

View your results. If the wrong image is appearing, use the Scrape Again button (3) to tell Facebook that you've set a new image. Be sure you've saved your settings in Step 1 before scrapping again.

Important
If you're setting a new image, the time it takes to update all of Facebook's servers is about 2 days (48hrs). You may check again after 24hrs but it can typically take 2-3 days. Be patient if it's done correctly. Oversized images can cause issues so use a clean .JPG image that's suitable for sharing on FB/Twitter posts.

Notes

Additional OG information is included below:

This warning message can be ignored: