For those of you that do not know that when you share a website page on social media an image will display next to a title together with a description of that page, blog post, article and so on. This is the social sharing image.
For many platforms when there is not a specific image defined for an individual page a global image is used as long as it exists. This global image will be shared on social media every time an individual image is missing for that specific page.
For example for my blog a featured image like this is displayed when you share it on social media:
You can choose for this image to look anyway you want. My recommendation is to add your logo to it for branding purposes.
Social sharing image integrated on themes
Some themes have the social sharing image setting in their settings panel. In this case I can confirm that upon testing all Shopify free themes have this setting built within them in the settings panel.
I’ll show you as an example how to change the social sharing image on the Shopify default theme: “Debut”.
Go to “Online store”, the “Themes” section (marked with 1 in the image below) and after click the “Customize” button (marked with 2 in the image below):
Now you should see the template settings for the “Home page” and on the bottom of the page you should see a section called “Theme settings”:
Once you click on this item you’ll see all the theme settings specific for this theme.
Look for the “Social Media” image and click on it to open the settings for this section:
On the “Social sharing image” click the “Select Image” button:
A new window will open that will allow you to upload images to the store library:
Upload your social image and click the “Select” button at the bottom of the image (marked with 2 in the image below).
For this example I’ve uploaded mine (marked with 1 in the image below):
Once selected you’ll see the new image listed as follows:
To save the new image click on the “Save” button on the top right corner (marked with 2 in the image above).
For all other Shopify free themes the process is the same as on the “Debut” theme.
Social sharing image default Shopify settings
Login to the Shopify dashboard:
Go to the “Online Store” channel (marked with 1 in the image below), then to the “Preferences” section (marked with 2 in the image below) and you can see the “Social sharing image” section (marked with 3 in the image below):
Now click one of the “Add image” links to add your social image.
Shopify recommends a size of 1200 x 628 px for the social sharing image. My recommendation is 1200 x 630 px.
You can drag and drop the image or click the “Add image” link (marked with 1 & 2 in the image below):
After the image is uploaded you’ll see your image listed (marked with 1 in the image below):
Click the “Save” button (marked with 2 in the image above) to save your new social sharing image.
Remove or change the image
To remove or change the image click on the “Edit” link (marked with 1 in the image below) on the top right corner:
Clicking on “Change image” (marked with 2 in the image above) will allow you to change the social image with another one.
Clicking on “Remove image” (marked with 3 in the image above) will remove the image entirely.
To save your new settings you need to click the “Save” button.
Testing the image
To make sure that the image was added correctly to the site you need to test it. You can do that by accessing special pages for each social platform created for such purposes.
For Facebook we use the “Sharing Debugger”.
For LinkedIn we use the “Post Inspector”.
For Twitter the “Card Validator”.
Go to this URL: https://developers.facebook.com/tools/debug/ .
You’ll see a page like this one and a field (marked with 1 in the image below) in which you need to type your website name:
After you’ve typed your website name click on the “Debug” button (marked with 2 in the image above).
The debugger will now analyze your website address (URL) and if everything went well it will display your new social media image.
If this is the first time you share the URL on Facebook, the debugger will prompt you by displaying a message like the following one:
To continue just click on the “Fetch new information” button (marked with 2 in the image above). It will take a bit of time until the new image will be displayed.
For Instagram you can use the same “Sharing Debugger” as on Facebook.
Go to this URL: https://www.linkedin.com/post-inspector/
You’ll see a page like this one and a field (marked with 1 in the image below) in which you need to type your website name:
After you’ve typed your website name click on the “Inspect” button (marked with 2 in the image above).
The post inspector will now analyze your website address (URL) and if everything went well it will display your new social media image:
Go to this URL: https://cards-dev.twitter.com/validator
You’ll see a page like this one and a field (marked with 1 in the image below) in which you need to type your website name:
After you’ve typed your website name click on the “Preview card” button (marked with 2 in the image above).
The card validator will now analyze your website address (URL) and if everything went well it will display your new social media image:
Conclusion
This is it. Make sure that you have a beautiful and high quality image that will give a unique perspective into your brand.
If you need a social image designed for your store or you need somebody to help you set up your social image or maybe you need special fields from where to set up unique images for every page in part we could help you through our premium high quality services.