Re: How to change the image when posting a link to social media platforms?

RyaneBin · ‎01-03-2020

I am using Mobilia - Milan. There is a social media tab to change the image there but above that it says it will use that image “only if it can’t find an image” unfortunately it’s using a partial of the logo type I placed on the password page. I am still launching soon but I am planning on marketing right now to gather emails. One of the first forms I am using is word of mouth from people I know.

When I add the link “www.sadurica.com” on the Facebook post or anywhere else, it’s that small portion I mentioned. How can I change that image through Shopify?

I’ve tried so many different methods and non worked.

PageFly-Richard · ‎01-03-2020

Hi there

You can change your page's preview image when sharing it on social platform by set the thumbnail for your page in theme setting by following this guide:
https://help.shopify.com/en/manual/using-themes/change-the-layout/theme-settings/showing-social-medi...

Or if you have knowledge about coding you can directly edit your theme code by following these below steps:

Navigate to your theme's liquid (Online store > Themes > Actions > Edit Code)
Select the theme.liquid, and search for the <head> tag. On the line below that tag, paste this code:
```
<meta property="og:image" content="www.yourimagelink.com" />
```
Save the theme.liquid, and open up a new tab with Facebook's debugger. Enter the home page URL to scrape the page, and wait a few moments for the new image to populate. You may need to scrape the page once more.

Please let me know if it works by giving it a Like or marking it as a solution!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)

All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

PageFly-Richard · ‎01-03-2020

Hi there

You can change your page's preview image when sharing it on social platform by set the thumbnail for your page in theme setting by following this guide:
https://help.shopify.com/en/manual/using-themes/change-the-layout/theme-settings/showing-social-medi...

Or if you have knowledge about coding you can directly edit your theme code by following these below steps:

Navigate to your theme's liquid (Online store > Themes > Actions > Edit Code)
Select the theme.liquid, and search for the <head> tag. On the line below that tag, paste this code:
```
<meta property="og:image" content="www.yourimagelink.com" />
```
Save the theme.liquid, and open up a new tab with Facebook's debugger. Enter the home page URL to scrape the page, and wait a few moments for the new image to populate. You may need to scrape the page once more.

Please let me know if it works by giving it a Like or marking it as a solution!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)

All features are available from Free plan. Live Chat Support is available 24/7.

RyaneBin · ‎01-03-2020

Thank you for the help, but tried both of those methods both individually and together, still didn't work. I am still in password mode, not sure if that makes a difference or not. I attached screenshots, maybe i'm still doing something wrong.

Nick · ‎01-06-2020

Hi @RyaneBin,

Sometimes it can take some time for this to come through and take effect. Something you can use to check in the meantime is the Facebook Crawler which you can see here.

There is a mention of the Facebook crawler in the guide shared above with some information about this which you can see in the screenshot highlighted below:

I tested this on my test store with the password control on and off and the image showed up after some time for both settings, so I don't believe the password aspect would affect this directly.

To learn more visit the Shopify Help Center or the Community Blog.

RyaneBin · ‎01-06-2020

No I figured it out. It’s because I am still in password mode. When disable password, it works perfectly. When I put it back on than it’s back to what I don’t want.

I wish there was a way to change the image in password mode

batecolifestyle · ‎09-10-2020

Unfortunately, there is no such word exactly written like this <head> in the theme.scss.liquid so your solution is very confusing

batecolifestyle · ‎09-10-2020

My edit list also doesn't have your wording theme.liquid - mine has theme.scss.liquid. Is this what you mean?

thefourthplace · ‎06-08-2022

Is there a method to change the social share preview for individual pages or custom page templates?

It looks like collections have a featured image that will go to the social share preview. What about regular Pages?

Ian Struckhoff
The Fourth Place
https://thefourthplaceforgeeks.com

LedaFazal · ‎07-13-2023

Yes, this would be great. Really makes Shopify a shoddy product when you can not change this for individual pages.

CRoark · ‎08-04-2023

This worked for me. No coding needed. Just changed the setting and went to the fb debugger. Thanks so much!

Nick · ‎01-03-2020

Hi @RyaneBin,

Nick here from Shopify.

@PageFly-Richard hit the nail on the head for you here. If you follow these steps in the guide Richard shared here you can change the image for your social media footnote:

From your Shopify admin, go to Online Store > Themes.

Find the theme that you want to edit and click Customize.
Click the Theme settings tab.
Click Social media.
In the Social sharing image area, select the image that you want to show on social media.
Click Save.

All the best, Nick

To learn more visit the Shopify Help Center or the Community Blog.

jscan · ‎05-16-2020

Not working on my end. I already did that.

kellylazzara · ‎05-22-2020

I'm using Debut theme. Changing the Social Sharing Image through Shopify's GUI wouldn't actually change it. So I manually changed the og:image src in theme.liquid using the following code:

  <meta property="og:image" content="https://cdn.shopify.com/s/files/1/0045/6533/6167/files/wai_social_sharing.png?v=1590193923" />

That still didn't work at first. The issue is that social-meta-tags.liquid is also defining og:image. See here:

{% if settings.share_image %}
  {%- capture og_image_tags -%}<meta property="og:image" content="http:{{ settings.share_image | img_url: '1200x1200' }}">{%- endcapture -%}
  {%- capture og_image_secure_url_tags -%}<meta property="og:image:secure_url" content="https:{{ settings.share_image | img_url: '1200x1200' }}">{%- endcapture -%}
{% endif %}

So I just deleted the following from the above:

  {%- capture og_image_tags -%}<meta property="og:image" content="http:{{ settings.share_image | img_url: '1200x1200' }}">{%- endcapture -%}

I believe that Shopify's share_image variable can be buggy, i.e. it doesn't update or something when someone changes it through the GUI. So, modify theme.liquid that's referencing it, remove the reference in social-meta-tags.liquid, upload your own social sharing image in 1200x630, and reference it in theme.liquid.

btw, the way I found the other og:image definition was by searching 'og:img' throughout all my shopify theme files using this chrome ext https://chrome.google.com/webstore/detail/shopify-theme-search-by-b/epbnmkionkpliaiogpemfkclmcnbdfle...

Kay30 · ‎08-10-2020

@kellylazzara I'm having same issue. Could you please explain more about how to reference the social sharing image in theme.liquid? TIA

kellylazzara · ‎08-13-2020

Hey 🙂

Do you see this in your theme.liquid?

<meta property="og:image" />

posturepro · ‎06-12-2020

Hello, I want to remove the image, and it seems I can only change it....How do i remove the image?

batecolifestyle · ‎09-10-2020

There doesn't seem to be a social media image share option (No section to upload anything) to show what photo I want made visible when sharing. At the moment my logo is zoomed in and cuts out half of it

Petpalooza · ‎10-19-2020

This did not help. Ugh why did you guys take away the phones ugh so frustrating.

Gabriel82 · ‎12-22-2020

This does not work for me. The theme that I have chosen does not have the option to change any image when I am under "social media". Please assist. Thanks

Nick · ‎12-29-2020

Hi @Gabriel82,

This layout in the admin might have been changed since. You can see where to change this image by taking these steps:

Online store > Preferences > Social sharing image

It should look like the screenshot example I am sharing below:

To learn more visit the Shopify Help Center or the Community Blog.

pureMix · ‎01-05-2021

Hi we are experiencing the same issues here

both tried the code in the meta as well as uploading the thumbnail in the social sharing image section from preference - No Luck 😞

anyone please help !

Cheers

Nick · ‎01-06-2021

Hi @pureMix,

Can I ask what theme you are using and if Online Store > Preferences has the section to add the social image? If so, can you share an example of what image you have and what image shows up on social sites when a link is shared?

To learn more visit the Shopify Help Center or the Community Blog.

Perice · ‎02-17-2021

Hey all,

if you want to set the social media image for a product, a collection or a page, you can use this app:

https://apps.shopify.com/social-media-share-image

Awesome Store Apps for your Shopify store - https://awesomestoreapps.com/

thefourthplace · ‎06-08-2022

$9.99 a month for a feature that's free in Squarespace and any basic website platform?!

Ian Struckhoff
The Fourth Place
https://thefourthplaceforgeeks.com

LedaFazal · ‎07-13-2023

My thoughts exactly. Everything costs extra. What a bunch of malarkey. This feature should be baked into the platform.

ChandRadha · ‎08-20-2022

I did this as well and it has not worked.

puregiftboxes · ‎09-14-2022

Yes!! Thank you Nick. This was super easy to do and it worked.

C_P · ‎07-18-2022

this doesnt work

Propelguru · ‎02-26-2021

Here are the methods to change the image while posting a link over social media are-

Add an open graph tag.
Use Twitter cards.
Plugin your WordPress with Yoast SEO.

Re: How to change the image when posting a link to social media platforms?

How to change the image when posting a link to social media platforms?

Community Blog Articles