Shopify has a metafield option to link a file to a blog post. That file, can include optional text and override the featured image.
Publish Insights 29 October 2022
Why More Images?
First, you need a reason for modifying what already works well. If you’ve ever used a movie streaming service, you’ve seen images with text overlays within the app or on the website. It’s a great way to establish the mood and provide more information about the feature.
By default, most Shopify themes display a grid with the Featured image for each blog article. The author often uses artwork or a photo for this. To maintain legibility and prevent truncation when cropped, it generally does not include text.
It’s possible to use CSS to create text overlays within each blog grid. But this method requires much more coding and long titles may be truncated.
Within the Settings tab in the admin area, Shopify introduced a metafield feature in 2022. This makes it possible to link a file to a blog post. That file, can be an image. So, using your favorite image editor, like Photoshop or Canva, this image can include text—just like your favorite streaming service.
Super Easy Substitution
The great thing about using metafield images is that implementation within Liquid is super easy. You just include the metafield path prior to | default: article.image wherever you want it to appear. If the metadata image is undefined, the Featured image displays.
{%- assign article_image = article.metafields.custom.feature_image | default: article.image -%}
or
{{ article.metafields.custom.feature_image | default: article.image }}I use the assign option to include article_image in multiple areas. If used once, you can use the version above within double curly brackets. (Your own unique metafield name follows article.metafields.custom.)
💡 Did you know that the most current Safari browsers allow you to highlight and copy text within an image?
Each Shopify Theme varies, so the name of the file and specific location varies. Generally, you will find a Snippet with article in the name. Within it, search for the phrase article.image.
What are some other areas for the metafield image? How about including it as an alternate image for Pinterest or Twitter within your social media headers?
By integrating the metafield, you can include the alternate image with Open Graph meta tags. In Shopify, go to Online Store > Themes > Actions > Edit code > Snippets > social-meta-tags.liquid. Here, within the template == "article" area, you can edit the code to:
<meta property="og:article:image" content="{{ article.metafields.custom.feature_image | default: article.image }}" />
Social media apps use the Open Graph data to format posts from your articles.
