+813-444-3589+44 118 328 3220+49-231-976765-0 | Contact us

HTML/URL/Javascript Filters

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.

add_url_parameter

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.

 

asset_url

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    

 

collection_img_url

Same as img_url.

 

convert_newlines

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.

 

customer_login_link

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>    

 

customer_logout_link

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>    

 

customer_register_link

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>    

 

default_pagination

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&amp;page=2" class="item link">2</a>  <a href="/bestsellers/c/4/star_wreck_in_the_pirkinning/p/2961?q=My Search Term&amp;page=3" class="item link">3</a>  </div>    

 

escape & h

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. & = &amp;) will be HTML encoded.

Example:

  {{ '<script>var q = 1;</script> & we can use Umlauts like Ö' | h }}    

 

Output:

  &lt;script&gt;var q = 1;&lt;/script&gt; &amp; we can use Umlauts like &Ouml;    

 

handle & handleize

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    

 

height

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    

 

highlight

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    

 

highlight_active_tag

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>    

 

html_decode

The filter html_decode is the counter filter to the escape filter. It will decode all HTML encodings (like &amp; 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:

  {{ '&amp; &uuml;ber mich' | html_decode }}    

 

Output:

  & über mich    

 

img_url

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    

 

img_tag

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" />    

 

img_tag_with_size

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).

Example:

  {% assign url = product.image_main | img_url: 'large' %}  {{ url | img_tag_with_size }}  {{ url | width }}x{{ url | height }}    

 

Output:

  <img src="/assets/image/L2Fzc2V0cy9pbWFnZS8xNjk5OC80MDk2L2kuanBn/480/i.jpg" alt="" width="214" height="300" />  214x300    

 

json

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  }    

 

link_to

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>    

 

link_to_add_tag

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.

 

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>    

 

link_to_remove_tag

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.

 

mark_bad

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.

 

newline_to_br

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.    

 

payment_type_img_url

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&amp;ts=0&amp;tv=0" alt="" />    

 

product_img_url

This filter is the same as img_url.

 

rating_image

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&amp;ts=0&amp;tv=0" style="" alt="Rating 3,4" /></i></li>  <li class="Star1"><i class="icon-star"><img src="/assets/fetch/Star1.png?sid=1077&amp;ts=0&amp;tv=0" style="" alt="Rating 3,4" /></i></li>  <li class="Star1"><i class="icon-star"><img src="/assets/fetch/Star1.png?sid=1077&amp;ts=0&amp;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&amp;ts=0&amp;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&amp;ts=0&amp;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.

 

rating_text

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.

 

remove_page_parameter

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&amp;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.

 

replace_or_add_url_parameter

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.

 

reset_all_filter

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&amp;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.

 

script_tag

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&amp;ts=0&amp;tv=0" type="text/javascript"></script>    

 

strip_newlines

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.    

 

stylesheet_tag

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&amp;ts=0&amp;tv=0" rel="stylesheet" type="text/css" media="all" />    

 

url_escape

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?    

 

url_param_escape

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    

 

width

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    

 

within

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