New "Social Sharing Image" - liquid variable?

Solved
Highlighted
Tourist
11 2 2

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

 

 

Annotation 2020-05-19 133130.png

 

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.

0 Likes
Highlighted

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.

SPO - SEO App to research keywords & edit social link preview
0 Likes
Highlighted
Shopify Partner
2294 116 352

@Sam92 , @sillycube

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

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
1 Like
Highlighted
Tourist
11 2 2

This is an accepted solution.

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 

 

0 Likes
Highlighted

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

SPO - SEO App to research keywords & edit social link preview
0 Likes
Highlighted
Shopify Partner
2294 116 352

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

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes