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.
Scale
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 }}" />
Crop
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 }}" />
Format
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 }}" />