New Features for the Shopify img_url filter

Arguably one of the most important aspects of any Shopify store is the product photography. Having the best images you can for your product is a great way to market a product. That’s why it’s really exciting that Shopify has added new options for the img_url filter!


For a little background the img_url (and all it’s variants) is a liquid filter that returns the url of the image. There are img_urls available on a number of Shopify objects such as productvariantline itemcollectionarticle, and image. For more detailed image you can check out the Shopify Docs

Below is an example of how you might use the product image url to create a link using liquid templating.

    <a href="{{ product.featured_image.src | product_img_url: 'grande' }}"></a>

This would create a link something like this:

    <a href=""></a>

Up until now, Shopify has only offered a specific set of sizes available for use with the img_url filter. These were:

pico16 x 16
icon32 x 32
thumb50 x 50
small100 x 100
compact160 x 160
medium240 x 240
large480 x 480
grande600 x 600
1024×10241024 x 1024
2048×20482048 x 2048
masterlargest image

This is quite a few options, but especially when selecting from the larger options, there’s a good chance the actual product photos you have don’t conform to these sizings


Recently Shopify added new parameters and options to the img_url. More specifically to the product_img_urlcollection_img_url, and the article_img_url.

These new parameters are:

  • Size
  • Crop
  • Scale
  • Format


Technically size was already available, but now you can choose any size you’d like by setting the exact pixel value. The syntax looks like this:

    <a href="{{ product.featured_image.src | product_img_url: '750x750' }}"></a>

The pixel format is width x height. It’s also possible to set only the width by ‘750x’ or set only the height by ‘x750’. If only one dimension is chosen Shopify calculates the other to maintain the correct aspect ratio of the photo.

One thing to note, is that if you do specify both dimensions like ‘750×750’ and the photo is not equal on both sides Shopify will make a calculation to maintain the aspect ratio.


the crop parameter is a completely new option that Shopify has provided. If you do want your rectangle to fit into the square dimensions your provided you now have a way!

By adding the crop parameter, it informs Shopify that you do in fact want it to modify the image to the specified dimensions. You also let Shopify know how to crop with the following 3 options:

  • top
  • center
  • bottom

The code would look something like this:

    <a href="{{ product.featured_image.src | product_img_url: '750x750', crop: 'center' }}"></a>


Shopify also allows you to alter the pixel density with the scale. This parameter takes one of two options, either 2 or 3

The code will look like this

    <a href="{{ product.featured_image.src | product_img_url: '750x750', crop: 'center', scale: 2 }}"></a>


The format parameter allows you to change the format of the image. There are 3 possible converstions:


If you’re wondering what the P in PJPG stands for, it is Progressive. This means that instead of loading a large image from top to bottom, it loads a grainy version of the whole image and progressively increases in quality.


All of these new parameters make dealing with your Shopify images all that much easier. Yay Shopify!!

One thought on “New Features for the Shopify img_url filter

Leave a Reply

Your email address will not be published. Required fields are marked *