Get Shopify Theme Asset Image URL

While developing Shopify theme, you probably need to package your theme images and want to query it in Liquid template, but how to get those images URL? I will show you how to get Shopify theme asset image URL in this article.

Shopify Theme Asset Image URL

When distributing Shopify theme package, certainly, images should be bundled inside. In Shopify theme development, it is not possible to query relative or absolute image URLs because you will not be able to know where they are after uploading into store theme section.

The only way to handle embarassing situation is to apply one of provided filters, and it is asset_img_url.

Your theme directory structure should look like following:

shopify-dev-theme
├── assets
├── config
├── config.yml
├── layout
├── locales
└── templates

To load asset images, you must put your images into /assets directory. However, there is one problem, Shopify doesn’t allow the nested structures inside /assets directory, which means, if you have a lot of images, putting all images as direct children of assets might look messy to manage. There are many people complaining or requesting Shopify to improve this, but the answer is NO. So you’d better get used to it.

Okay, so this is one example of how to load theme asset image URL in Liquid templates.

Let say, you have this file /assets/avatar.jpg, and you need to display it somewhere, then you will write like following:

<img src="{{ 'avatar.jpg' | asset_img_url: 'master' }}" class="responsive-img" />

So asset_img_url filter has one parameter, which is the image size that you want the image to be. Use master to indicate original full size of the image.

The image size is in format WIDTHxHEIGHT. By default, the filter will try to keep aspect ratio of the image if you specify only one dimension of the image like 300x or x150. It is something like:

<img src="{{ 'avatar.jpg' | asset_img_url: '300x' }}" />

<img src="{{ 'avatar.jpg' | asset_img_url: 'x150' }}" />

Note that you cannot make image to resize bigger than its original size.

That’s it ~  Just a little tip on how to get Shopify theme asset image URL.