The preview image is not showing when share a link (Dawn Theme)
Hi😊!
For example, these links are not showing the right image of my collections. Instead, it shows the preview image for my homepage. How can I fix them? Thanks a lot !
Please replace it with the code below:
<meta property="og:image" content="https://cdn.shopify.com/s/files/1/0813/8057/3500/files/Snoozi_SandyBeige_HighPos_230315_162413_ae1b8efb-1c66-4ae5-bed3-062f51c845b2.jpg" />
Hi, please check: https://www.loom.com/share/aec7a9640b9440d797c5cadcbc05dc4f
Steps to Update the Code in Dawn Theme
Access the meta-tags.liquid Snippet:
- Go to your Shopify Admin.
- Navigate to Online Store > Themes.
- Click on Actions > Edit Code.
- In the left sidebar, under the Snippets folder, open meta-tags.liquid.
Modify the Code to Use the First Product Image: Since the meta-tags.liquid is already checking for a page_image, you'll want to modify this snippet to reference the first product image when you're on a product page.
Updated Code for meta-tags.liquid
You can modify the code to use the first image of the product. Here’s how you can modify the code:
{%- if product -%}
{%- assign product_image = product.images.first %}
{%- if product_image -%}
<meta property="og:image" content="{{ product_image | img_url: '1200x630' }}">
<meta property="og:image:secure_url" content="{{ product_image | img_url: '1200x630' }}">
<meta property="og:image:width" content="{{ product_image.width }}">
<meta property="og:image:height" content="{{ product_image.height }}">
{%- endif -%}
{%- elsif page_image -%}
<meta property="og:image" content="http:{{ page_image | image_url }}">
<meta property="og:image:secure_url" content="https:{{ page_image | image_url }}">
<meta property="og:image:width" content="{{ page_image.width }}">
<meta property="og:image:height" content="{{ page_image.height }}">
{%- endif -%}
Do let me know, if you need any further help
Hi @YukYeeLam ,
I am from Mageplaza - Shopify solution expert.
I have checked the two page links you provided. Regarding the mechanism for displaying the thumbnail image when sharing a link, it will look for a meta tag containing the 'og:image' attribute, then display the image from the value of the content attribute.
To display the thumbnail image as desired when sharing a link, I suggest the following solution. Please follow the steps below:
Step 1: Identify the Handle of the Page
Each Shopify page has a unique handle. You can find it by navigating to Online Store > Pages, opening the page you want to edit, and checking the URL in your browser.
For example, if the URL is: https://stokkeshop.com.hk/pages/stokke-snoozi-page
Then the handle of the page is stokke-snoozi-page
Step 2: Edit the file meta-tags.liquid
Go to Online Store > Themes > Edit Code
Find and open the file snippets/meta-tags.liquid
Add the following code inside the <head> section of the file:
{% if request.path contains 'stokke-snoozi-page' %}
<meta property="og:image" content="{{ 'your-custom-thumbnail.jpg' | asset_url }}" />
<meta property="og:title" content="content text" />
<meta property="og:description" content="description text" />
{% endif %}
Step 3: Save and Check the Result.
Please let me know if it works as expected!
Best regards
Hi @mageplaza-cs !
Thank you for helping out😊! Does it mean that I have to add individual codes for different pages? Let's say if I have 5 pages, I have to add the codes 5 time with different handle? And actually I couldn't find the <head> section in snippets/meta-tags.liquid
Moreover, I found that some of the page displayed correct thumbnail image, but I didn't edit any code yet. For examples, these two link displays the correct image
https://stokkeshop.com.hk/collections/stokke-tripp-trapp
https://stokkeshop.com.hk/collections/yoyo
Hi @YukYeeLam
Exactly! With this solution, you will be able to accurately display the thumbnail image when sharing a link as desired. Please add my provided code snippet and update the Handle of the Page as well as the thumbnail image URL. If you have five pages, you will need to add my code snippet five times.
Thanks @mageplaza-cs ! I'm trying out the code but it seems not working for me😢 Did I missed anything or put anything wrong in the code?
For the image URL, I got it from content > files > copy link of the image
Please replace it with the code below:
<meta property="og:image" content="https://cdn.shopify.com/s/files/1/0813/8057/3500/files/Snoozi_SandyBeige_HighPos_230315_162413_ae1b8efb-1c66-4ae5-bed3-062f51c845b2.jpg" />
Community Blog Articles
Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025
Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025