Home > Shopify Development > Liquid file_img_url: How to Get File Image URL in Shopify

How to Add a New Product in Shopify

Sam Nguyen
Sam Updated: July 28, 2024

Share:

Drive 20-40% of your revenue with Avada
avada email marketing

Your website uses a lot of images to express your content. Would you like to find an image quickly? Liquid in Shopify has a url filter to help you get the file image url. The tutorial today focuses on the formula to get file url in Shopify.

Table of content

General information of Liquid

Liquid is one of the open-source template languages in Shopify. Liquid is used as the backbone of Shopify to upload dynamic content on the front page. Liquid has been sold since 2006 and now become a good source for a lot of hosted website application such as Jekyll, salesforce desk, and zendesk.

Liquid codes are divided into objects, tags and filters. Objects tell Liquid where content is shown on a page. Double curly braces denote objects and variable names. Filters change the a Liquid object’s output. There are five main types of filters including string, number, boolean, nil and array. Tags create logic and control flow for a template. Tags begin with two curly braces and percent signs. Tags are classified into control flow, iteration, and variable assignment.

What is file image url

First of all, URL filters generate links to assets Shopify’s Content Delivery Network. Links for filtering collections and blogs are also created using these filters.

File image URL returns the asset URL of an image in the file page of admin. File_image_url accepts an image size parameter. The image size parameter refers to an image’s width and height, up to a maximum of 5760x5760 px. The image’s original aspect ratio will be preserved if you not crop the image. Moreover, the parameter lets you specify what file format to use for the displayed image.

How to Get File Image URL in Shopify

For instance, you want to track the image url of a logo that you have uploaded on your website. You should do:

Input


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

Output


//cdn.shopify.com/s/files/1/0246/0527/files/logo_1024x768.png?42

Conclusion

In a nutshell, finding image url in some cases is needed, especially when your website is updating a new campaign of sale season. The tutorial aims to guide you to get file image url in Shopify. We hope our instruction is easy-to-follow. Comment if you have any difficulties.


Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.

Stay in the know

Get special offers on the latest news from AVADA.