Featured image for Shopify blog posts

As it turns out it’s a real pain to include featured images (like WordPress) in to blog posts using Shopify. That’s not to say there is no a solution. Here’s an elegant little ‘featured image hack’. This snippet uses the first image within the blog post as a ‘featured image’ (add it to your blog.liquid template or global asset), if that post does not contain an image tag then a fallback image (in your assets folder) will be served instead. Simple.

{% 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:' %}

<img src="{{ src }}" >
{% else %}

<img src="{{ 'fallback-featured-image.jpg' | asset_url }}" >
{% endif %}

I found and adapted this method here by sifting this forum post.

Enjoy!