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

This article is for Pipeline 2.x
If you're on Pipeline 3 or higher, see the link at the bottom of the page.

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

Theme Editor link to settings_schema.json file (Click on this link):
settings_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

Replace all the code with this new code:

New code

This is a new version of social-meta-tags.liquid which supports homepage social image override. Save your page and you're done.

How to use the new setting

In theme editor, choose General Settings and then Social:

Scroll to the bottom of the Social settings and you'll find the new Share Image option where you can upload a social sharing image:

Important:
After you've done that, go to the Facebook and Twitter share debug sites and choose scrape again.
This will take about 2 days to update. 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.

Share tools:
https://developers.facebook.com/tools/debug/sharing
https://cards-dev.twitter.com/validator

Example

Still need help? Contact Us Contact Us