How to escape URL in Shopify

Liquid, as you know, is one of the most popular language templates used by web developers in Shopify platform. In the previous series, you have already known about array filter in Liquid. To continue the theme of filter, we introduce a new function which is called string filter. In particular, the tutorial will give you simple steps to escape url_escape.

Table of content

What is Liquid and what is string filter

Liquid has been sold officially since 2006 and becomes a trustworthy source to upload dynamic content on the front page. Not only is it used by Shopify but Liquid is also applied on Jekyll.

Five main types of filters in Liquid are string, number, boolean, nil and array. Number includes floats and integers. Boolean response to true or false value. Nil is a special empty value that is returned when Liquid code has no results. Today, we focus on string.

String filter is declared by grouping a variable’s value in single or double quotes.

Information about url_escape

String filter is fairly useful in Liquid filter. There are a lot of methods to activate string filter and using URL_escape is a simple one.

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.

URL_escape is a method that replaces all characters in a string with their escaped variants. To start any code for filter, you need to place characters in {{ }} and separate by a straight flash.

Steps to escape URL

When you use URL_escape, characters from the input are turned to symbols used in URL. Let’s look at the example, you will see that signs in input such as <, > are changed into percent sign and number. Only ` & ` is remained.

Input:


{{ "<hello> & <shopify>" | url_escape }}

Output:


%3Chello%3E%20&%20%3Cshopify%3E

Conclusion

In conclusion, using URL_escape helps you to generate output which is familiar with URL. We hope that this tutorial is helpful to you and let us know about your difficulties by commenting below the article.