New "Social Sharing Image" - liquid variable?

Technical Q&A
1

There’s the new place in the admin panel to add a social sharing image.

Annotation 2020-05-19 133130.png
Annotation 2020-05-19 133130.png1047×710 29.4 KB

Is there a liquid variable to call this in my theme?

the debut theme looks for {{ settings.share_image }} - which would be set in the theme.

And the help docs are silent on the matter…

I’ve got open-graph code all set up, but i’m trying to figure out how to integrate the new function into my themes.

2

I’ve been spending a long time to find out where the magic meta tags come from. From the theme.liquid, I don’t see any code add the social meta tags before the end of tag.

After testing, I found that if the user set a social sharing image in Online Store => Preferences => social sharing image, the meta tags will be added. I can only remove the image to hide these meta tags.

3

@SamFP , @jam_chan

https://shopify.dev/docs/themes/liquid/reference/objects/page-image

The image that appears in the social sharing image preview might be generated from the logo uploaded to theme > header > logo. If there is no image present, we attempt to pull a logo from the theme’s checkout settings > logo. If there are no images present, the social sharing image preview is left blank and an image must be manually added.

{{ page_image | img_url }}
2 Likes
4

The answer, ultimately, was you can’t.

I spent a bit of time with shopify support trying to figure this out, and that was the answer.

The social sharing image gets pulled in by some shopify server-side magic when your page doesn’t have any meta og:image tag on it. (Consider it like the no-image.jpg that gets pulled in when a product doesn’t have an image. )

Worth noting - a lot of themes have some code that creates an og:image, which will use the logo if all there’s no other image to use. I think the Debut theme does it this way.

In the end, I decided to just ignore the share image entirely, and wrote more meta/og-field creation code to make sure that every page has something. Added some shopify metafields to various pages. And I added a new spot in the customizer to upload a default image. Definitely not simpler, but it ended up a log more bullet-proof.

In the end, I wrote a new block of

5

I was spending an hour with Shopify customer support with no luck. I think the new social sharing image may be somehow overlapped with the theme settings.

What you did finally is exactly what my app does.

If my understanding is correct, when the page has some meta tags on it, the magic meta tags will be hidden. It should be ok for me.

I just worried that the magic tags would be repeated with mine

6

The process is in the reference document I linked and quoted.

7

page_image definitely helped in the older theme (non-2.0), instead of using settings.share_image. Many thanks!