What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Setting unique social sharing images for individual pages, products and blogs

Setting unique social sharing images for individual pages, products and blogs

luce333
Visitor
1 0 0

hi all,

 

i'm working on setting unique social sharing images for individual pages and products.

 

i have successfully done that by adding page and product image url metafields > adding custom code in the dawn theme.liquid to get the image selected for social sharing. however, i noticed the page social sharing image goes back to the default set in online store > preference after i added the custom code for products. 


here are the changes i made in chronological order:

1. added custom coding for unique social sharing images for individual pages
2. unique social sharing images for individual pages confirmed to be working when checking on whatsapp
3. added custom coding for unique social sharing images for products
4. unique social sharing images for products are working, but social sharing images for pages have reverted back to the default set in online store > preference when checking on whatsapp
5. added conditional logic to the code to to check the template rendered on page load and get the correct image, but it's not working

 

attached is the code i'm using in the dawn theme liquid with the conditional logic. i have checked with shopify support that the template values are correct.

 

<!-- SEO IMAGE CODE -->

  <!-- Common Open Graph tags -->
  <meta property="og:site_name" content="{{ shop.name }}">

  {% if template == 'product' %}
    <!-- Product Open Graph Tags -->
    <meta property="og:title" content="{{ product.title }}">
    <meta property="og:description" content="{{ product.description | strip_html | truncate: 160 }}">
    {% if product.metafields.product_data.og_image %}
      <meta property="og:image" content="{{ product.metafields.product_data.og_image }}">
    {% else %}
      <meta property="og:image" content="https://cdn.shopify.com/s/files/1/0431/3510/7236/files/Malaysia_s_1_Premium_Chiro-Recommended_Mattresses_Lunox.png?v=1721535175">
    {% endif %}
  {% elsif template == 'page' %}
    <!-- Page Open Graph Tags -->
    <meta property="og:title" content="{{ page.title }}">
    <meta property="og:description" content="{{ page.content | strip_html | truncate: 160 }}">
    {% if page.metafields.custom.og_image %}
      <meta property="og:image" content="{{ page.metafields.custom.og_image }}">
    {% else %}
      <meta property="og:image" content="https://cdn.shopify.com/s/files/1/0431/3510/7236/files/Malaysia_s_1_Premium_Chiro-Recommended_Mattresses_Lunox.png?v=1721535175">
    {% endif %}
  {% endif %}

 

appreciate any help i can get on this. thank you

Reply 1 (1)

Liam
Community Manager
3108 344 895

Hi Luce,

 

If you remove the Social sharing image preview image from the online store > preferences section, and just rely on displaying an image based on rules set in code, are you seeing this work as expected? My guess is that since there are currently two different methods for displaying an OG tag (the native admin method and a custom code method) you're seeing unpredictable results. I'd recommend just having one method - the custom code one. 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog