Chose a different photo for product share on Facebook or Instagram.

Highlighted
Tourist
8 0 3

Id like to be able to specify or chose a different photo than the first when a product is shared via social media. Our shop is set up with isolated product photos on a white background for the collection image, the second image is the nice scene one. The scene looks much better on social media than the isolated.

I do know a bit of coding, not an expert at all, but i think I could follow a tutorial or figure it out if someone directed me. Any way I could change this?

I am using the Prestige theme.


0 Likes
Highlighted
Shopify Partner
141 23 40

Hi @JulieKimberlin,

You can add an additional tag for the og:image value, from which social media extrapolate the image to display. If you're certain that it's always going to be the second image (the one after the featured that is), then you can hardcode it like so:

<meta property="og:image" content="{{ product.images[1] | img_url: 1080x }}" />

You can add the line on the top lines of your product.template, or tweak your theme file to look for the different images depending on the template.

Keep in mind that once you change the image to be displayed, you probably need to re-scrape the link for that platform, in order to fetch the new image. For instance, on Facebook this is done here.

Panos Voulgaris
Creative director / Partner @ MALVI
Founder @ function( )
0 Likes
Highlighted
Tourist
8 0 3

Ok so my theme has this snippet called

social-meta-tags.liquid


{%- comment -%}
Add Facebook and Pinterest Open Graph meta tags to product pages
for friendly Facebook sharing and Pinterest pinning.

More info Open Graph meta tags
- https://developers.facebook.com/docs/opengraph/using-objects/
- https://developers.pinterest.com/rich_pins/

Use the Facebook Open Graph Debugger for validation (and cache clearing)
- http://developers.facebook.com/tools/debug

Validate your Pinterest rich pins
- https://developers.pinterest.com/rich_pins/validator/
{%- endcomment -%}

{%- if template.name == 'product' -%}
  <meta property="og:type" content="product">
  <meta property="og:title" content="{{ product.title | strip_html | escape }}">

  {%- for image in product.images limit:3 -%}
    <meta property="og:image" content="http:{{ image.src | img_url: 'grande' }}">
    <meta property="og:image:secure_url" content="https:{{ image.src | img_url: 'grande' }}">
  {%- endfor -%}

  <meta property="product:price:amount" content="{{ product.price | money_without_currency | strip_html | escape }}">
  <meta property="product:price:currency" content="{{ shop.currency }}">
{%- elsif template.name == 'article' -%}
  <meta property="og:type" content="article">
  <meta property="og:title" content="{{ article.title | strip_html | escape }}">

  {%- if article.image -%}
    <meta property="og:image" content="http:{{ article.image | img_url: 'grande' }}">
    <meta property="og:image:secure_url" content="https:{{ article.image | img_url: 'grande' }}">
  {%- endif -%}
{%- elsif template.name == 'collection' -%}
  <meta property="og:type" content="website">
  <meta property="og:title" content="{{ collection.title | strip_html | escape }}">
  <meta property="og:image" content="http:{{ collection.image | default: collection.products.first.featured_image | img_url: 'grande' }}">
  <meta property="og:image:secure_url" content="https:{{ collection.image | default: collection.products.first.featured_image | img_url: 'grande' }}">
{%- else -%}
  <meta property="og:type" content="website">
  <meta property="og:title" content="{{ page_title | escape }}">

  {%- if settings.share_image -%}
    <meta property="og:image" content="http:{{ settings.share_image | img_url: 'grande' }}">
    <meta property="og:image:secure_url" content="https:{{ settings.share_image | img_url: 'grande' }}">
  {%- endif -%}
{%- endif -%}

{%- if page_description -%}
  <meta property="og:description" content="{{ page_description | escape }}">
{%- endif -%}

<meta property="og:url" content="{{ canonical_url }}">
<meta property="og:site_name" content="{{ shop.name }}">

{%- comment -%}
This snippet renders meta data needed to create a Twitter card
for products and articles.

Your cards must be approved by Twitter to be activated
- https://dev.twitter.com/docs/cards/validation/validator

More information:
- https://dev.twitter.com/cards/types/summary
{%- endcomment -%}

<meta name="twitter:card" content="summary">
{%- if template.name == 'product' -%}
  <meta name="twitter:title" content="{{ product.title }}">
  <meta name="twitter:description" content="{{ product.description | strip_html | truncatewords: 140, '' | escape }}">
  <meta name="twitter:image" content="https:{{ product.featured_image.src | img_url: '600x600', crop: 'center' }}">
{%- elsif template.name == 'article' -%}
  <meta name="twitter:title" content="{{ article.title }}">
  <meta name="twitter:description" content="{{ article.excerpt_or_content | strip_html | truncatewords: 140, '' | escape }}">

  {%- if article.image -%}
    <meta name="twitter:image" content="https:{{ article.image | img_url: '600x600', crop: 'center' }}">
  {%- endif -%}
{%- elsif template.name == 'collection' -%}
  <meta name="twitter:title" content="{{ collection.title }}">
  <meta name="twitter:description" content="{{ collection.description | strip_html | truncatewords: 140, '' | escape }}">
  <meta name="twitter:image" content="https:{{ collection.image | default: collection.products.first.featured_image | img_url: '600x600', crop: 'center' }}">
{%- else -%}
  <meta name="twitter:title" content="{{ page_title | escape }}">
  <meta name="twitter:description" content="{{ page_description | default: page_title | escape }}">

  {%- if settings.share_image -%}
    <meta name="twitter:image" content="https:{{ settings.share_image | img_url: '600x600', crop: 'center' }}">
  {%- endif -%}
{%- endif -%}

 

There is what it says, so the 'grande' Im thinking is what needs to be changed but I can't find it anywhere in the theme what the second pictures is being called let alone with 'grande' anywhere else? 

0 Likes
Highlighted
Shopify Partner
141 23 40

The way that snippet is built, you can probably get it to work by making a small adjustment in the line:

 

  {%- for image in product.images limit:3 -%}

 

and changing it like so:

 

  {%- for image in product.images limit:3 offset:1 -%}

 

This way you'll ask the loop to skip the first image of a product's images.

You can also adjust that for Twitter, at the very end, by substituting this line:

 

  <meta name="twitter:image" content="https:{{ product.featured_image.src | img_url: '600x600', crop: 'center' }}">

 

with the following:

  <meta name="twitter:image" content="https:{{ product.images[1].src | img_url: '600x600', crop: 'center' }}">
Panos Voulgaris
Creative director / Partner @ MALVI
Founder @ function( )
0 Likes
Highlighted
Tourist
8 0 3

Ok so Iv tried all of these things and none of it worked. I think the problem might be in some leftover code from a couple of apps, Iv tried remeoving them and have gotten verious error messages on facebook's scraping tool.

The following required properties are missing: fb:app_id

Provided og:image URL, https://yuhuapps.com/smi/image/seidora.myshopify.com/4731827322927 was not valid because it did not meet the minimum size constraint of 200px by 200px.

The following required properties are missing: og:url, og:type, og:title, og:description, fb:app_id

Im afraid my stuff my be totally messed up now. LOL Some of them it will only show the shops share picture, and some it just shows the first. So IDK hopefully I can figure out how to remove the code for those 2 apps without breaking it completely, and then see if your solution works.

0 Likes