New "Social Sharing Image" - liquid variable?

SamFP · ‎05-19-2020

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

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

https://help.shopify.com/en/manual/using-themes/change-the-layout/theme-settings/showing-social-medi... (no liquid code to be found here)
https://shopify.github.io/liquid-code-examples/example/open-graph-tags (last updated in 2019, so before the new code)

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.

PaulNewton · ‎07-21-2020

@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 }}

Save time & money ,Ask Questions The Smart Way

Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com

Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

View solution in original post

jam_chan · ‎07-21-2020

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

BYOB - Build Your Own Bundles, SPO - SEO App to research keywords & edit social link preview

PaulNewton · ‎07-21-2020

@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 }}

Save time & money ,Ask Questions The Smart Way

Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com

Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

SamFP · ‎07-21-2020

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

jam_chan · ‎07-21-2020

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

BYOB - Build Your Own Bundles, SPO - SEO App to research keywords & edit social link preview

PaulNewton · ‎07-24-2020

@jam_chan wrote:
I think the new social sharing image may be somehow overlapped with the theme settings.

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

Save time & money ,Ask Questions The Smart Way

Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com

Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

theschoolofux · ‎03-10-2022

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

Sergei Golubev | Devigner @ The School of UX | schoolofux.com

New "Social Sharing Image" - liquid variable?

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links