Blog Detail

• Aug 02, 2022

3 Different Filters That You Can Use For Images

One of the best things about liquid and Shopify is that they provide so many filters to make your store creative. 

In this blog, we will show you 3 different types of filters that you can use for images in the Shopify Store.

img_url,asset_url and file_url

1) img_url

The img_url filter seems to the widely used for images in Shopify. This filter is for images of Shopify Objects, it gives you access to featured images associated with each object. 

feature image objects like products, product collection, images, variants, and many more.

You can use images in Shopify by img_url filter objects. You can also use other filters such as crop, scale, and format.

 {{ product | img_url: '1280x720', crop: 'center', scale: 2 , format: 'png' }}

2) asset_url

Now, what if you want to add images that aren't associated with Shopify Objects?

Now, we can use the assets folder for this. The assets folder can be found in the editor

Online Store > Themes > Actions > Edit Code > Asset folder where you can add you images.

Here, you can add a photo and use the asset_url to reference it via the name of the file. This is not only for images but you can also use it for PDFs, CSS files, and JS files.

Example of CSS:

{{ 'shop.css' | asset_url }}

Shopify also gives us an asset_img_url, which gives us access to the image parameters such as size and crop.

{{ 'logo.png' | asset_img_url: '300x', crop: 'center' }}

3) file_url

Returns the URL of a file in the Files page of the admin.

File page is located at the Shopify Admin > Settings > Files.

This is where we get into the file_url. This filter allows you to pick up assets from the file upload area of the Shopify admin. As with the assets, we don't have to limit the files to images.

Settings > Files

 {{ 'size-chart.pdf' | file_url }}

In the above example, we could easily change the size chart by uploading a new file with the same file name. This gives more flexibility for assets not associated with Shopify Objects.

As with the assets, the files also have a specific filter just for images, that also gives you access to the image parameters such as size, crop, and scale

 {{ 'map.png' | file_img_url: '1024x768' }}