Shopify Featured Image in Blog Posts two different methods


shopify featured image blog post

2 Ways to add a Shopify Featured Image in Blog Posts

Updated: Shopify has finally added featured images to blog posts. This is great news! The newer themes will take advantage of this new feature. If you have an older theme you may need to make some changes to your theme. Skip down to #3 for the latest method.

Shopify is an amazing ecommerce platform. When it came time to setup a web presence for my wife’s online store I did not even think twice when selecting Shopify. The overall experience is amazing for store owner and consumer alike. I would consider my wife a moderately competent computer user. She rocks facebook and can use word processing software with the best of them, but she is not competent in HTML or even excel macros. She has not asked me more than a few questions over a year of using the platform.

Adding products is a breeze. Fulfilling customer orders could not be easier. Refunding orders, while we prefer to never have to do it, is also a snap. The greatest fault we find with the platform is the weak blogging functionality. Maybe I have been spoiled by how amazing and extendable WordPress is, but simple features like featured images in Shopify blog posts do not exist. There is no easy way to include a Shopify featured image in blog posts. My wife wanted a blog for her ecommerce site and she wanted readers to have an interest in reading the posts. Without a featured image, the blog listing page looked a bit lackluster. There is a saying about images…

There are a few ways to get a Shopify featured image to show up on your blog. Both of these methods require editing template files. If you do not feel comfortable making changes to liquid files (Shopify’s templating engine), I recommend passing these options along to your web developer.

1. Upload any picture you want to use as a Shopify featured image into your site files.

For this method to work, you have to publish your blog post and determine the ID of the blog post itself. The ID of the blog post is typically the only number in the url, for example, in the image below the ID of the post is 18993667.

Featured Image for shopify blog

find the id in your blog url

Using this method you would save your image “blog-18993667.jpg” – without the quotes, and upload the image into the files section in your Shopify admin. You can upload files by logging into your Shopify admin and then clicking on settings and then clicking on files.  I know, it is complicated, but you want a Shopify featured image on your blog don’t you? To make this work you then have to modify your template files. You are looking for the blog index template. This can change from theme to theme so you might have to do some detective work. Within the template file that renders the blog index you want to insert the following code into the for article loop.

Here is the code:

{% for article in blog.articles %}
 
    <a href="{{ article.url }}">
 
        {% capture file_name %}blog-{{ article.id }}.jpg{% endcapture %}
 
        {% capture alt_attr %}{{ article.title | escape }}{% endcapture %}
 
        {{ file_name | asset_url | img_tag: alt_attr }}    
 
    </a>
 
{% endfor %}
This is why naming the file correctly is important. The id is how we can link the blog post to an image. In the code we are building the filename based upon the id of the blog post. We then create an alt tag and output the image. I originally found this code here.

2. Use the first image within a post as the Shopify featured image

This method is a bit easier for the end user. There are no additional steps to take to upload an image, as long as you have an image in your actual blog post, you will have a Shopify featured image. Automatically using the first image is potentially an issue. If you have a small or irrelevant image as the first one in your blog post the featured image might not attract a reader. You just have to keep this in mind when creating your blog posts.

Same as with the previous method you are going to insert this code into the for article loop on the blog index page.

Here is the code:

    {% if article.content contains "<img" %}
    {% assign src = article.content | split: 'src="' %}
    {% assign src = src[1] | split: '"' | first | replace: '//cdn', 'http://cdn';; | replace: 'http:http://';;, 'http://';; | remove: 'https:' %}
    <a href="{{ article.url }}">
    <img src="{{ src }}" >
    </a>
    {% endif %}

This code looks into the article content and if it finds an image tag it will manipulate the link and insert it into the page. I originally found this code here.

I have used both of these methods. My preference is method 2 as it is easier for the end user and happens without further action after posting a blog. I can see circumstances where I would opt for method 1. Mainly when you want more control over the featured image.

3. Use the new built in Shopify Featured Image

Finally! You can upload featured images!

Finally! You can upload featured images!

Shopify store owners and developers rejoice. Shopify has finally launched a featured image for their blog. While this is great news it does not really help you if you are using an older theme. You will have to modify your theme files to take advantage of the new featured image feature.

Uploading images to use as the feature image is a breeze. From within your blog post click on choose image and upload your image.

Using the article image is a bit more complicated, here is a sample snippet:

{% if article.image %}
 {{ article | image_url: 'medium'}}
{% endif %}

In the above code example, we are first checking for the presence of an article image. If it exists we are then returning the image url from Shopify’s CDN. Here is an example that expands upon the previous code snippet:

{% if article.image %}
 {%assign image_alt = article.title | escape %}
 {{ article | image_url: '1024x1024' | image_tag: image_alt, 'article_image_class' | link_to: article.url }}
{% endif %}

This code snippet is similar. We first check for the existence of the image. Then we assign the article title to a variable for use later. If the image is found we then print the image URL from Shopify’s CDN. In this example we are requesting a custom size 1024 x 1024. We then print the alt tag and make sure that the image links to the article / blog post.

This snippet would be used in article.liquid. If you are using this snippet on the blog post itself, you most likely will not want to link the image to itself, so exclude ‘link_to’.

If you have any questions or any different approaches to get Shopify featured image in blog posts please use the comments below:

 

Are You Ready To Start Your Own Online Business?

Start An Online Store Crash Course

Sign up now to receive our 5 Step FREE Crash Course to starting your own online store. Learn the tricks we have used with clients for years. Get started building your future now.

  • FREE 5 Step Crash Course
  • Designed For Beginners
  • Receive our Resource Guide Instanlty
  • Start Now By Entering Your Email Below
  • Andy Higgins

    What about using metafields? Upload the image as you would any other image in the content of the article except set the size of the image to “thumb”. Copy the image URL, add the URL as a metafield to the article (using a tool like ShopifyFD). Edit the template to check for the metafield and if it exists display the thumbnail image from the metafield.

    • Andy,

      Thank you for the comment. These look like a few other options to consider. I will take a look the next time I run into this.

      Cheers,
      Bob

  • Andy Higgins

    Another option would be to use the excerpt field to upload the thumbnail / featured image. This of course means that you cannot use the excerpt field for its intended purpose but you can always truncate the main content field and treat that is the excerpt, if required.

  • priscillia

    Is there any way to use this code to display the blog featured image on the result research ? I cannot make it work 🙁

    • Priscillia,

      I don’t understand what you mean by on the result research? Please clarify and I will help if you out if I can.

      Thanks

  • Hovhannes Sargsyan

    Shopify already supports Featured Image for blog posts.

    • Hovhannes,

      They just rolled out this feature. You will still need to use alternative options if you have an older theme that doesn’t support featured image, etc.

      Cheers!

      • Louie Pisani

        how do i call the featured image the new way?

        • Louie,

          I updated the post to include how to use the Shopify featured image. Let me know if you run into any issues.

          Cheers!
          Bob

  • Baci

    What is the optimal size of the featured image in case of e.g. a stock Minimal theme in Shopify? I do not find anything about this…

    • Baci it really depends on your template. I like to make the image the full width of the body of the blog post. Whatever your particular size is, I would match that. This way it doesn’t stretch or distort the proportions and degrade the quality of the image.