How to Get Asset URL in Shopify

Filter function will help you save time on finding items or sources that you want. In case that you would like to use the function of locating items in a chain, you can use string filter with asset_url. The tutorial today would give you sample code to get asset url in shopify.

Table of content

What is Liquid and string filter

Website developers use Liquid as a language template for Shopify. Liquid codes is divided into three different categories including objects, tags and filters. Objects which are denoted by double curly braces are characters to display content on a page, tags which are shown by a curly brace and a percent sign illustrate logic and flow for template. Filters change the output of a Liquid object. Filter function in Liquid can be activated by using number, boolean, array, string, math and URL. Today we focus on URL filter.

URL filter produces links to assets on Shopify’s content delivery network as well as create links for filtering collections and blogs. Besides, URL filter outputs a chain of numbers, letters, flash and a question mark.

What is asset_url

URL or uniform resource locator is a reference to a web resource that specifies its location on a computer network and a mechanism for retrieving it. A URL contains the following information: the protocol used to access a resource, the location of the server, the location of the resource in the directory structure, a fragment identifier.

Asset_URL is a method to find the location of a folder. When you add asset_url in the input code, you will receive the location of that file.

Steps to get asset url in Shopify

Let’s look at the example below. Your output is an address showing where the folder comes from.

Input:


{{ 'shop.css' | asset_url }}

Output:


//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28253

Conclusion

In a nutshell, Liquid offers you with a lot of filter function, it is important for you to choose the suitable one. Using asset_url helps you to find the origin of a folder so that you will not waste time finding this folder manually. We hope that the tutorial give you a solution for your work. Let’s us know about your difficulties and we will address them. Thank you.