Menu

How to add a Social sharing image to your Shopify store?

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.

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:

HowCommerce.com global social media image.
HowCommerce.com global social media image.

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 this image on the Shopify default theme: “Debut”.

The Shopify dashboard.
The Shopify dashboard.

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):

The “Customize” button on the Debut theme.
The “Customize” button on the Debut theme.

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”:

Debut theme settings section.
Debut theme settings section.

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:

Debut theme settings section.
Debut theme settings section.

On the “Social sharing image” click the “Select Image” button:

Debut theme select social sharing image.
Debut theme select social sharing image.

A new window will open that will allow you to upload images to the store library:

Debut theme upload image field.
Debut theme upload image field.

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):

Debut theme social sharing image selected.
Debut theme social sharing image selected.

Once selected you’ll see the new image listed as follows:

Debut theme new social sharing image listed.
Debut theme new social sharing image listed.

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:

The Shopify dashboard.
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):

Shopify social sharing image path.
Shopify social sharing image path.

Now click one of the “Add image” links to add your social image.

Shopify recommends a size of 1200 x 628 px. 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):

Shopify social sharing image upload.
Shopify social sharing image upload.

After the image is uploaded you’ll see your image listed (marked with 1 in the image below):

Shopify social sharing image uploaded.
Shopify social sharing image uploaded.

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:

Shopify social sharing image edit and remove options.
Shopify social sharing image edit and remove options.

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”.

Facebook

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:

Facebook “Sharing Debugger”.
Facebook “Sharing Debugger”.

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:

First time URL Facebook “Sharing Debugger”.
First time URL Facebook “Sharing Debugger”.

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.

Facebook “Sharing Debugger” listing the website's new social image.
Facebook “Sharing Debugger” listing the website’s new social image.

For Instagram you can use the same “Sharing Debugger” as on Facebook.

LinkedIn

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:

LinkedIn “Post Inspector”.
LinkedIn “Post Inspector”.

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:

LinkedIn “Post Inspector”  listing the website's new social image.
LinkedIn “Post Inspector” listing the website’s new social image.

Twitter

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:

Twitter “Card Validator”.
Twitter “Card Validator”.

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:

Twitter “Card Validator”  listing the website's new social image.
Twitter “Card Validator” listing the website’s new social 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.