ClickCease

Resolving Incorrect Shared Images on Shopify Pages

Resolving Incorrect Shared Images on Shopify Pages

After setting up a Shopify store, a common next step is to share a page link with others to showcase the site.

During a recent project, an issue arose in which sharing a page link resulted in an incorrect accompanying image. Analysis of the meta tags revealed that the displayed image was not present on the intended page. 

Further investigation indicated that Shopify, by default, assigns the Checkout page logo as the shared image, even for standard pages.

Although this issue happened with a specific theme, it could happen with others, as well. If you build Shopify stores for clients, they might want a different image to show up when sharing a page.

So, how can you fix this?

One solution is to use settings_schema.json to create a block structure. Each block can include two fields: the page handle and the image you want to display when that page is shared.

Once you have added handles and images in the Theme Editor, locate the section of the code where meta tags are set. Update the image references to connect them to the blocks you created. If the current page handle matches a block, assign the corresponding image to that page.

With this approach, you can assign personalized images to any page in your store and be assured they will appear when a link is shared.