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

Difference between img_url, asset_url, and file_url

Monday, Jan 11, 2021

One of the nice things about liquid and Shopify is that it has so many helpers (filters) for creating your shop. One of the annoying things about liquid and Shopify is that it has so many helpers for creating your shop.

In this post I'm gonna discuss 3 filters that you can use for images on a Shopify store.


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

List of Shopify Objects that have featured images.

  • product
  • variant
  • line item
  • collection
  • article
  • image

You can access the image by using the filter on one of the Shopify Objects. You can also use complimentary filters such as crop, scale, and format.

    {{ product | img_url: '720x720', crop: 'center', scale: 2 , format: 'pjpg' }}



    // Remember to put the liquid code inside quotes or you'll get an error


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

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

Online Store > Themes > Actions > Edit Code

Here, you can add a photo and use the asset_url to reference it via the name of the file. This doesn't have to be used for just images, but also could be used for pdfs, css files, and javascript files to name a few.

    {{ 'shop.css' | asset_url }}

    {{ 'shop.css' | asset_url | stylesheet_tag }}



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' }}




Since we're going into the code editor, this method will likely be used by developers or perhaps merchants that are very comfortable with editing code.


What if you need an easier way to allow merchants to upload photos?

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 }}

    size chart

    size chart


In the above example, the merchant 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' }}




One common use case for this is adding fabric swatch images. Naming the image file the same as the variant handle will allow you to add the image to the product page, doing this with the files will empower the merchant to add new variants and fabrics swatches later without the need for a developer.


Shopify gives us many tools, sometimes it can be hard to remember all of them, but each tool has an ideal use case (sometimes many).

more posts