The following list of filters are used to add or modify HTML code (or create URLs for links on the shop pages). One filter even convert one Liquid object to JSON, which then can be processed easily via Javascript.
This filter adds the parameters of the current page to the given URL. Therefore you can create links which contains e.g. the current page number or the search term as parameter in it.
Example:
{{ collection.products[0].url | add_url_parameter }} Output:
/bestsellers/c/4/big_buck_bunny/p/2874?q=My+Search+Term Note: This filter is exclusive to FlickRocket. If you are using a theme orginating from Shopify and want to use this filter, you need to add this.
In each theme there is an asset folder, where you can put your graphical, CSS and Javascript files. In order to access these files, you need to know the URL under which you can access these files. Using this filter, the path will be added to the filename (the URLs will always be relative). Please remark that this filter just creates the URL and not any HTML tags like <script … > etc.
Example:
{{ 'scrollbar.js' | asset_url }} Output:
/assets/fetch/scrollbar.js?sid=1077&ts=0&tv=0 Same as img_url.
Sometimes the texts given in Liquid strings are formatted using Newlines. These Newlines have of course no meaning in HTML code, therefore it is helpful to convert newlines in a text to <br/> tags. There is one security measurement integrated, if the original string already contains some kind of <br/> tag, the string is returned unaltered.
Example:
{{ product.description | convert_newlines }} Note: This filter is exclusive to FlickRocket. If you are using a theme orginating from Shopify and want to use this filter, you need to add this.
This filter creates a hyperlink to a webpage, which allows the user to login. The parameter is the text which is shown as link target.
Example:
{{ 'Login' | customer_login_link }} Output:
<a href="/account/login" id="customer_login_link">Login</a> This filter creates a hyperlink to a logout page, which will redirect the user to the main page after it has logged out the given user.
Example:
{{ 'Logout' | customer_logout_link }} Output:
<a href="/account/logout">Logout</a> This filter creates a hyperlink to a web page where the user can create an user account for the given web shop. The user need to create an account on a purchase, so a registration link is not really needed.
Example:
{{ 'Register' | customer_register_link }} Output:
<a href="/account/register" id="customer_register_link">Register</a> If you use the paginate command, the paginate object is valid within the pagination block. As it is not trivial to create a complete navigation structure out of the data provided by the paginate structure, there is a default_pagination filter available which creates a simple navigation structure, which can be classed using some CSS code.
Example:
{% paginate collection.products by 3 %} {% for p in collection.products %} {{ p.title }} {% endfor %} {{ paginate | default_pagination }} {% endpaginate %} Output:
Big Buck Bunny Sintel Route 66 <div class="parts"> <span class="item current">1</span> <a href="/bestsellers/c/4/star_wreck_in_the_pirkinning/p/2961?q=My Search Term&page=2" class="item link">2</a> <a href="/bestsellers/c/4/star_wreck_in_the_pirkinning/p/2961?q=My Search Term&page=3" class="item link">3</a> </div> The filter escape (or for using a shortcut: h) will escape all characters to HTML codes. This is important if you e.g. insert Liquid strings into Javascript, as the strings inserted by Liquid could contain texts like “ABC</script>” in it (and therefore most probably breaking your Javascript code). All characters which can be HTML encoded (e.g. & = &) will be HTML encoded.
Example:
{{ '<script>var q = 1;</script> & we can use Umlauts like Ö' | h }} Output:
<script>var q = 1;</script> & we can use Umlauts like Ö These two filter both create a handle from a given string. Basically all non-letters/non-digits/non-minus-character will be replaced by either a base letter (e.g. umlauts) or to a underline character (_).
Example:
{{ 'This will handle the Umlauts like Ä correctly - hopefully' | handle }} Output:
this_will_handle_the_umlauts_like_a_correctly_-_hopefully Outputs the height of an image URL (if available for the given picture). Only picture URLs starting with /assets/fetch/ and /assets/image/ will deliver a result (if necessary you could use the img_url filter to create an /asset/image URL out of any URL). The resulting number can e.g. be used in a self modelled IMG tag, etc. The width and height of an image is only available after the image has once be loaded (and thus inserted into the cache). If the resolution of the image can't be determined (for whatever reasons), the result will be 0.
Example:
{{ 'logo.png' | asset_url | width }}x{{ 'logo.png' | asset_url | height }} Output:
365x122 Sometimes it is handy to highlight some words in a text (e.g. a search result). For that you can use the highlight filter, which creates a <strong> tag around each of the words in the parameter. You can set the class for the highlight block using CSS.
Example:
{{ 'Welcome to the Pleasuredome' | highlight: 'the' }} Output:
Welcome to <strong class="highlight">the</strong> Pleasuredome This filter is used on blog pages, where the active tags can be highlighted using this filter.
Example:
{% for tag in article.tags %} <a href="/{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag | highlight_active_tag }}</a> {% endfor %} Output:
<a href="/blogs/test/1/tagged/Action">Action</a> <a href="/blogs/test/1/tagged/Fantasy"><span class="active">Fantasy</span></a> <a href="/blogs/test/1/tagged/News">News</a> The filter html_decode is the counter filter to the escape filter. It will decode all HTML encodings (like & to &). This is handy if one URL with parameters shall be used in CSS or javascript, in these contexts URLs are specified without HTML encoding.
Example:
{{ '& über mich' | html_decode }} Output:
& über mich This filter is used to create an URL for a given Image object (or image URL), which allows the image to be sized to given maximum depending on the parameter given. Image sizing will always performed proportional, so you don’t need to care about the right scaling factors. Using the given sizes, the resulting image will be the exact size in the larger direction and scaled down in the smaller direction (therefore the image is smaller or equal the given size in any direction). E.g. if you have a landscape image (width > height), the size “large” will scale the image down to a width of 480px and a height of something <= 600px). Please remark that images are never scaled up, so if an image is smaller than the desired size, the resulting size is the original size. Also, depending on the prefix of the size string, there is the possibility to make sure that it has the given number of pixel in either X or Y direction. E.g. if you use ‘x-large’, the resulting image will be 480px wide and has a height to be proportional to a width of 480px and similarly for ‘y-large’. The following (base) sizes are supported:
| Name | Size |
| pico | 16px |
| icon | 32px |
| thumb | 50px |
| small | 100px |
| compact | 160px |
| medium | 240px |
| large | 480px |
| grande | 600px |
| original | 1024px |
| 1024x1024 | 1024px |
| 2048x2048 | 2048px |
| master | As large as the original image (up to 4096px) |
Example:
{{ product.image_main | img_url: 'small' }} Output:
/assets/image/L2Fzc2V0cy9pbWFnZS8zNTE1MS80MDk2L2kuanBn/100/i.jpg This filter will create a HTML tag for an image URL (usually created with the img_url filter). An optional parameter will specify the alternative text for the given image.
Example:
{{ product.image_main | img_url: 'small' | img_tag: product.title }} Output:
<img src="/assets/image/L2Fzc2V0cy9pbWFnZS8zNTE1MS80MDk2L2kuanBn/100/i.jpg" alt="Sintel" /> Similar to img_tag, but this will add the width and height parameter to the IMG tag (if available for the given picture). Only picture URLs starting with /assets/fetch/ and /assets/image/ will deliver a result (if necessary you could use the img_url filter to create an /asset/image URL out of any URL).
The filter accept two parameter the first is the "alt" attribute the second the "class" attribute.
Example:
{% assign url = product.image_main | img_url: 'large' %}
{{ url | img_tag_with_size }} {{ url | width }}x{{ url | height }}
{{ url | img_tag_with_size: product.title,"img-responsive" }}
Output:
<img src="/assets/image/L2Fzc2V0cy9pbWFnZS8xNjk5OC80MDk2L2kuanBn/480/i.jpg" alt="" width="214" height="300" /> 214x300
<img src="/assets/image/L2Fzc2V0cy9pbWFnZS8xNjk5OC80MDk2L2kuanBn/480/i.jpg" alt="Product title" class="img-responsive" width="214" height="300" />
The json filter will convert any Liquid object to JSON code, which then can be processed using Javascript. Basically it would be more helpful to size reduction if you use the fields of the objects directly where you need them, but for some scenarios it might be more helpful to Javascript to create some special effects. Please beware that due to size restrictions, some fields will be missing in the JSON or be reduced to another format (e.g. Image objects will be reduced to URL strings).
Example:
{{ cart | json }} Output:
{ "attributes": "", "item_count": 0, "total_item_count": 0, "currency_id": 1, "currency": "USD", "items": [], "coupons": [], "coupon_error": null, "total_price": 0, "total_price_net": 0, "items_price_net": 0, "items_price_taxes": 0, "total_price_without_shipping": 0, "total_price_net_without_shipping": 0, "note": "", "total_weight": 0 } This filter creates HTML code for a link. The parameter is the link URL, the text for the link is the value passed into the filter.
Example:
{% for product in collection.products %} {{ product.title | link_to: product.url }} {% endfor %} Output:
<a href="/animation/c/196/big_buck_bunny/p/2874" title="">Big Buck Bunny</a> <a href="/animation/c/196/elephants_dream/p/2762" title="">Elephants Dream</a> As it is only supported to have one active tag at a given time, this filter will currently work exactly as the filter link_to_tag.
Using this filter it is possible to filter the blog articles to those having the given tag. This link will activate the tag and redirect to the main blog page (even if called from an article page). To remove the tag filtering, just link to the given blog.url. The parameter is the text for the link.
Example:
{% for tag in article.tags %} {{ tag | link_to_tag: tag }} {% endfor %} {{ 'Remove all tags' | link_to: blog.url }} Output:
<a href="/blogs/test/1/tagged/action" title="">Action</a> <a href="/blogs/test/1/tagged/fantasy" title="">Fantasy</a> <a href="/blogs/test/1/tagged/news" title="">News</a> <a href="/blogs/test/1" title="">Remove all tags</a> As it is only supported to have one active tag at a given time, this filter will currently work exactly as the filter link_to_tag.
This filter will give you some output if something went wrong, e.g. if the string specified doesn’t exist or the object isn’t a string at all (or if the string is empty). This is helpful for debugging translation issues, as there will be placeholders for all strings that haven’t been translated at all. Anyway, using the shop in debug mode will show up an error message for bad usage of objects and null pointers, so it is usually better to use that debug mode (if you have the rights to enable it for the given shop).
Example:
{{ translation.not_available| mark_bad }} Output:
<font color="#FF0000" size="+3"><b>Missing text</b></font> Note: This filter is exclusive to FlickRocket. If you are using a theme orginating from Shopify and want to use this filter, you need to add this.
Works like convert_newlines, but will add a <br /> to each newline in the input, even if the input already contain <br/> tags.
Example:
{{ article.content | newline_to_br }} Output:
This will add<br /> BR tags to all<br /> newlines in the text. This filter creates an URL for a given payment provider. For now, one of the following strings are supported as input:
amex, ec, master, paypal, prepayment, visa
Example:
{{ 'master' | payment_type_img_url | img_tag }} Output:
<img src="/assets/fetch/Km1hc3RlciouKg==?sid=1077&ts=0&tv=0" alt="" /> This filter is the same as img_url.
This filter generates HTML code for rating image(s) (5 star rating). The rating value is a field in the Product object and denotes a value between 0 and 50 (zero stars to 5 stars). The alternative text of the images is a localized version of ‘Rating’.
Example:
{{ 38 | rating_image }} Output:
<li class="Star1"><i class="icon-star"><img src="/assets/fetch/Star1.png?sid=1077&ts=0&tv=0" style="" alt="Rating 3,4" /></i></li> <li class="Star1"><i class="icon-star"><img src="/assets/fetch/Star1.png?sid=1077&ts=0&tv=0" style="" alt="Rating 3,4" /></i></li> <li class="Star1"><i class="icon-star"><img src="/assets/fetch/Star1.png?sid=1077&ts=0&tv=0" style="" alt="Rating 3,4" /></i></li> <li class="Star3"><i class="icon-star-half"><img src="/assets/fetch/Star3.png?sid=1077&ts=0&tv=0" style="" alt="Rating 3,4" /></i></li> <li class="Star2"><i class="icon-star-empty"><img src="/assets/fetch/Star2.png?sid=1077&ts=0&tv=0" style="" alt="Rating 3,4" /></i></li> Note: This filter is exclusive to FlickRocket. If you are using a theme orginating from Shopify and want to use this filter, you need to add this.
The rating value is a field in the Product object and denotes a value between 0 and 50 (zero stars to 5 stars). It can be formatted using this filter to a string.
Example:
{{ 38 | rating_text }} Output:
3,8 Note: This filter is exclusive to FlickRocket. If you are using a theme orginating from Shopify and want to use this filter, you need to add this.
This filter removes the page parameter from a given URL. This might be useful to keep all other parameters, but the page parameter e.g. on searches, the search parameter q need to be set, but changing a filter parameter (e.g. using the filter reset_all_filter) should start again from page 1 (as there could be less pages when filtering products).
Example:
<a href="/{{ request.parameters | remove_page_parameter | reset_all_filter }}">Reset all filter</a> Output:
<a href="/?q=searchterm&resetallfilter=1">Reset all filter</a> Note: This filter is exclusive to FlickRocket. If you are using a theme orginating from Shopify and want to use this filter, you need to add this.
This filter will replace or add a single parameter to an URL (which already might have parameters).
Example:
{{ '/de/search?q=abcd&type=product' | replace_or_add_url_parameter: 'q=movie' }}
{{ '/de/search?q=abcd&type=product' | replace_or_add_url_parameter: 'new=movie' }} Output:
/de/search?type=product&q=movie
/de/search?q=abcd&type=product&new=movie Note: This filter is exclusive to FlickRocket. If you are using a theme orginating from Shopify and want to use this filter, you need to add this.
This filter just adds the parameter resetfilter=1 to the given URL, which resets all product filtering (thus shows again all products). For more information on filtering, please have a look at the AttributeFilter object.
Example:
<a href="/{{ request.parameters | remove_page_parameter | reset_all_filter }}">Reset all filter</a> Output:
<a href="/?q=searchterm&resetallfilter=1">Reset all filter</a> Note: This filter is exclusive to FlickRocket. If you are using a theme orginating from Shopify and want to use this filter, you need to add this.
In order to wrap an URL to a HTML script tag, you can use this filter. An optional parameter is used to add additional attributes to the script tag.
Example:
{{ ‘scrollbar.js’ | asset_url | script_tag: ‘async’ }} Output:
<script async src="/assets/fetch/scrollbar.js?sid=1077&ts=0&tv=0" type="text/javascript"></script> This filter removes all newlines from a given text (but not <br/> tags!).
Example:
{{ article.content | strip_newlines }} Output:
This will add BR tags to all newlines in the text. Similar to the script_tag filter, this filter creates a HTML link tag for including CSS files.
Example:
{{ 'main.css' | asset_url | stylesheet_tag }} Output:
<link href="/assets/fetch/main.css?sid=1077&ts=0&tv=0" rel="stylesheet" type="text/css" media="all" /> This filter escapes a string for passing it as URL to the server. This filter doesn’t touch URL specific characters (e.g. / ? &), while the similar filter url_param_escape does.
Example:
{{ '/page/hello & goodbye?' | url_escape }} Output:
/page/hello%20&%20goodbye? This filter escapes a string for passing it as a parameter (e.g. when manually calling the search result page with the search parameter, even though this is not recommended). In difference to the url_escape filter, this will encode all characters.
Example:
{{ 'what to do & not to do?' | url_param_escape }} Output:
what+to+do+%26+not+to+do%3f Outputs the width of an image URL (if available for the given picture). Only picture URLs starting with /assets/fetch/ and /assets/image/ will deliver a result (if necessary you could use the img_url filter to create an /asset/image URL out of any URL). The resulting number can e.g. be used in a self modelled IMG tag, etc. The width and height of an image is only available after the image has once be loaded (and thus inserted into the cache). If the resolution of the image can't be determined (for whatever reasons), the result will be 0.
Example:
{{ 'logo.png' | asset_url | width }}x{{ 'logo.png' | asset_url | height }} Output:
365x122 The within filter is used to add a collection identifier to a given product URL. This is helpful for creating an URL which contains both the collection name and the product name. If the product URL already contains a collection path, it will be overwritten with the specified collection path.
Example:
{{ product.url | within: collections['comedy'] }} Output:
/comedy/c/197/big_buck_bunny/p/2874