I am writing this because I have been dealing with a client that has 3 Shopify websites that needed to be updated a bit. I was tasked with simply making sure the logo or featured image appeared in a link preview on social media or any share really. Typically that is done with the steps below:

Steps:

  1. From your Shopify admin, go to Online Store > Preferences.
  2. Find the Social sharing image section.
  3. To upload a new image, click Add image. To change the existing image, click Edit > Change image.
  4. Select the image from your computer that you want to show on social media.
  5. Click Save.

Problem It Did Not Work

I was left with a blank gray box that said No-Image in a watermark.

The solution to me was to just simply hardcode it in the correct file and boom we should be good to go…..FALSE!

I started by going to the theme.liquid file and placing a social sharing code in there at the top.

<meta property="og:image" content="https://cdn.shopify.com/s/files/1/0558/7491/2420/blah">
<meta property="og:image:secure_url" content="https://cdn.shopify.com/s/files/1/0558/7491/2420/files/blah">

At that point, it did indeed fix the problem halfway (Pun Intended). I was now dealing with half of the image shows but that other one is still in the mix.

I was not really having any clue where to go until I noticed the no-image file in the inspect element section at the <head> area. Thank the heavens for comments in the code as I found:

<!-- /snippets/social-meta-tags.liquid -->

In there I noticed that at the top there was an if statement that provided that no image if one was not provided.

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

Changing it to:

{% if settings.share_image %}
  {%- capture og_image_tags -%}<meta property="og:image" content="https://cdn.shopify.com/s/files/1/0552/6752/4805/files/blah">{%- endcapture -%}
  {%- capture og_image_secure_url_tags -%}<meta property="og:image:secure_url" content="https://cdn.shopify.com/s/files/1/0552/6752/4805/files/blah">{%- endcapture -%}
{% endif %}

I am not joking as I write this I guess instead of all this hardcoding baking it in I could of instead added to this statement above to pull in the social share image on the else.

A final thought if you find yourself in this situation and then after all of it still need to test the link preview I found this sweet little site that can do just that here.

%d bloggers like this: