How To Call The Shopify Article Featured Image

How To Call The Shopify Article Featured Image

Lately, a few people have asked us how to add the featured image to their article in Shopify. This is an extremely simple task that we would like to answer in the most simple way possible. Shopify has a featured image for each article, however some themes don’t take advantage of actually showing that featured image on the article page itself. We are going to show you how to do this the right way, the SEO friendly way. Let’s get started shall we?

We are going to be using this small code to do all the work for us:

<img src="{{ article.image.src | img_url: '1024x1024' }}" alt="{{ article.image.alt }}" />

Where do I put this code?

You’ll place this code inside of your article.liquid file.

Not sure where the article.liquid file is? You can find this file in your admin panel by going to Online Store > Themes and then hitting the 3 dots next to the eye icon and clicking “Edit HTML/CSS”. This will be on the top right hand of your theme. You will see a list of your files, and the article.liquid file should be under the Templates section.

We recommend placing the code right before the content of your article which should look something similar to this:

<div class="rte">{{ article.content }}</div> What you are looking for here is the {{ article.content }} piece of code. This is the line you will place your code above.

Image Size Variables

We have pulled other size variations that you can use in placement of the ‘large’ variable. You can see these variable on the Shopify URL Filters page, or from our list below. If you want a different image size displayed, just replace ‘large’ with one of the choices below such as ‘medium’.

Note: In the table below, the “Name” column should NOT be used in your code as this is now deprecated. The maximum image size is 2048 x 2048px.

Name Maximum image size
pico 16 x 16 pixels
icon 32 x 32 pixels
thumb 50 x 50 pixels
small 100 x 100 pixels
compact 160 x 160 pixels
medium 240 x 240 pixels
large 480 x 480 pixels
grande 600 x 600 pixels
original 1024 x 1024 pixels
master Original image size

If you would just like to specify only the width of an image, you can use:

<img src="{{ article.image.src | img_url: '1024x' }}" alt="{{ article.image.alt }}" /> And if you’d like to specify only the height, it’s as simple as:

<img src="{{ article.image.src | img_url: 'x1024' }}" alt="{{ article.image.alt }}" />

Extra Image Parameters

We have a few extra parameters available to us which I’ll briefly mention here. You can use more than one filter at a time, just be sure to separate each one with a comma.


You can scale an image with one of the two following options:

  • 2
  • 3

<img src="{{ article.image.src | img_url: '1024x', scale: 2 }}" alt="{{ article.image.alt }}" />


There are three optional methods to crop:

  • top
  • center
  • bottom

Note: The method you specify will show that part of the image. If you specify “top”, then you’ll see the top of the image.

<img src="{{ article.image.src | img_url: '1024x' crop:top }}" alt="{{ article.image.alt }}" />


Shopify can also convert your images to a different format. Shopify will convert PNG to JPG, PNG to PJPG, and JPG to PJPG.

You have two options as to what format you’d like to convert your image to:

  • jpg
  • pjpg

<img src="{{ article.image.src | img_url: '1024x', format: 'pjpg' }}" alt="{{ article.image.alt }}" />

Published by using 592 words.