Code Shopify About

Shopify App and Theme Development tutorials for those who are familiar with code and want to dive into Shopify.

Sign up for Shopify

New Features for the Shopify img_url filter

Tuesday, Nov 17, 2020

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!

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 product, variant, line item, collection, article, 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.

 
    
  
This would create a link something like this:

    
  

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

name size
pico 16 x 16
icon 32 x 32
thumb 50 x 50
small 100 x 100
compact 160 x 160
medium 240 x 240
large 480 x 480
grande 600 x 600
1024x1024 1024 x 1024
2048x2048 2048 x 2048
master largest 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

New Parameters

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

These new parameters are:

  • Size
  • Crop
  • Scale
  • Format

The Size Parameter

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:


    
  

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 '750x750' and the photo is not equal on both sides Shopify will make a calculation to maintain the aspect ratio.

The Crop Parameter

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:


    
  

The Scale Parameter

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


    
  

The Format Parameter

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

From To
PNG JPG
PNG PJPG
JPG PJPG

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.

Conclusion

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

more posts