Additional filters

General filters serve many different purposes including formatting, converting, and applying CSS classes.

date

Converts a timestamp into another date format.

Input

{{ article.published_at | date: "%a, %b %d, %y" }}

Output

Tue, Apr 22, 14

The date parameters are listed below:

%a

Abbreviated weekday.

{{ article.published_at | date: "%a" }}
<!-- Sat -->
%A

Full weekday name.

{{ article.published_at | date: "%A" }}
<!-- Tuesday -->
%b

Abbreviated month name.

{{ article.published_at | date: "%b" }}
<!-- Jan -->
%B

Full month name

{{ article.published_at | date: "%B" }}
<!-- January -->
%c

Preferred local date and time representation

{{ article.published_at | date: "%c" }}
<!-- Tue Apr 22 11:16:09 2014 -->
%d

Day of the month, zero-padded (01, 02, 03, etc.).

{{ article.published_at | date: "%d" }}
<!-- 04 -->
%-d

Day of the month, not zero-padded (1,2,3, etc.).

{{ article.published_at | date: "%-d" }}
<!-- 4 -->
%D

Formats the date (mm/dd/yy).

{{ article.published_at | date: "%D" }}
<!-- 04/22/14 -->
%e

Day of the month, blank-padded ( 1, 2, 3, etc.).

{{ article.published_at | date: "%e" }}
<!-- 3 -->
%F

Returns the date in ISO 8601 format (yyyy-mm-dd).

{{ article.published_at | date: "%F" }}
<!-- 2014-04-22 -->
%H

Hour of the day, 24-hour clock (00 - 23).

{{ article.published_at | date: "%H" }}
<!-- 15 -->
%I

Hour of the day, 12-hour clock (1 - 12).

{{ article.published_at | date: "%I" }}
<!-- 7 -->
%j

Day of the year (001 - 366).

{{ article.published_at | date: "%j" }}
<!-- 245 -->
%k

Hour of the day, 24-hour clock (1 - 24).

{{ article.published_at | date: "%k" }}
<!-- 14 -->
%m

Month of the year (01 - 12).

{{ article.published_at | date: "%m" }}
<!-- 04 -->
%M

Minute of the hour (00 - 59).

{{ article.published_at | date: "%M" }}
<!--53-->
%p

Meridian indicator (AM/PM).

{{ article.published_at | date: "%p" }}
<!-- PM -->
%r

12-hour time (%I:%M:%S %p)

{{ article.published_at | date: "%r" }}
<!-- 03:20:07 PM -->
%R

24-hour time (%H:%M)

{{ article.published_at | date: "%R" }}
<!-- 15:21 -->
%T

24-hour time (%H:%M:%S)

{{ article.published_at | date: "%T" }}
<!-- 15:22:13 -->
%U
The number of the week in the current year, starting with the first Sunday as the first day of the first week.
{{ article.published_at | date: "%U" }}
<!-- 16 -->
%W

The number of the week in the current year, starting with the first Monday as the first day of the first week.

{{ article.published_at | date: "%W" }}
<!-- 16 -->
%w

Day of the week (0 - 6, with Sunday being 0).

{{ article.published_at | date: "%w" }}
<!-- 2 -->
%x

Preferred representation for the date alone, no time. (mm/dd/yy).

{{ article.published_at | date: "%x" }}
<!-- 04/22/14 -->
%X

Preferred representation for the time. (hh:mm:ss).

{{ article.published_at | date: "%X" }}
<!-- 13:17:24 -->
%y

Year without a century (00.99).

{{ article.published_at | date: "%y" }}
<!-- 14 -->
%Y

Year with a century.

{{ article.published_at | date: "%Y" }}
<!-- 2014 -->
%Z

Time zone name.

{{ article.published_at | date: "%Z" }}
<!-- EDT -->

default

Sets a default value for any variable with no assigned value. Can be used with strings, arrays, and hashes.

The default value is returned if the variable resolves to nil or an empty string "". A string containing whitespace characters will not resolve to the default value.

Input

Dear {{ customer.name | default: "customer" }}

Output

<!-- If customer.name is nil -->
Dear customer

<!-- If customer.name is "" -->
Dear customer

<!-- If customer.name is "   " -->
Dear

default_errors

Outputs default error messages for the form.errors variable. The messages returned are dependent on the strings returned by form.errors.

Input

{% if form.errors %}
      {{ form.errors | default_errors }}
{% endif %}

Output

<!-- if form.errors returned "email" -->
Please enter a valid email address.

default_pagination

Creates a set of links for paginated results. Used in conjunction with the paginate variable.

Input

{{ paginate | default_pagination }}

Output

<span class="page current">1</span>
<span class="page"><a href="/collections/all?page=2" title="">2</a></span>
<span class="page"><a href="/collections/all?page=3" title="">3</a></span>
<span class="deco">&hellip;</span>
<span class="page"><a href="/collections/all?page=17" title="">17</a></span>
<span class="next"><a href="/collections/all?page=2" title="">Next &raquo;</a></span>

hex_to_rgba

Theme settings return hexadecimal values for color settings by default. Use the hex_to_rgba filter to convert the value into RGBA. It defaults to an opacity of 1, but you can specify an opacity between 0 and 1. Shorthand hex values are accepted as well, for example, #812.

Input

.site-footer h1 {
  color: {{ settings.color_name }};
}

.site-footer p {
  color: {{ settings.color_name | hex_to_rgba: 0.5 }};
}

Output

.site-footer h1 {
  color: #812dd3;
}

.site-footer p {
  color: rgba(129, 45, 211, 0.5);
}

highlight

Wraps words inside search results with an HTML <strong> tag with the class highlight if it matches the submitted search.terms.

Input

{{ item.content | highlight: search.terms }}

Output

<!-- If the search term was "Yellow" -->
<strong class="highlight">Yellow</strong> shirts are the best!

highlight_active_tag

Wraps a tag link in a <span> with the class active if that tag is being used to filter a collection.

Input

<!-- collection.tags = ["Cotton", "Crew Neck", "Jersey"] -->
{% for tag in collection.tags %}
    {{ tag | highlight_active | link_to_tag: tag }}
{% endfor %}

Output

<a title="Show products matching tag Cotton" href="/collections/all/cotton"><span class="active">Cotton</span></a>
<a title="Show products matching tag Crew Neck" href="/collections/all/crew-neck">Crew Neck</a>
<a title="Show products matching tag Jersey" href="/collections/all/jersey">Jersey</a>

json

Converts a string into JSON format.

Input

var content = {{ pages.page-handle.content | json }};

Output

var content = "\u003Cp\u003E\u003Cstrong\u003EYou made it! Congratulations on starting your own e-commerce store!\u003C/strong\u003E\u003C/p\u003E\n\u003Cp\u003EThis is your shop\u0026#8217;s \u003Cstrong\u003Efrontpage\u003C/strong\u003E, and it\u0026#8217;s the first thing your customers will see when they arrive. You\u0026#8217;ll be able to organize and style this page however you like.\u003C/p\u003E\n\u003Cp\u003E\u003Cstrong\u003ETo get started adding products to your shop, head over to the \u003Ca href=\"/admin\"\u003EAdmin Area\u003C/a\u003E.\u003C/strong\u003E\u003C/p\u003E\n\u003Cp\u003EEnjoy the software,  \u003Cbr /\u003E\nYour Shopify Team.\u003C/p\u003E";

Did you know?

You do not have to wrap the Liquid output in quotations - the json filter will add them in. The json filter will also escape quotes as needed inside the output.

The json filter can also used to make Liquid objects readable by JavaScript:

var json_product = {{ collections.featured.products.first | json }};
var json_cart = {{ cart | json }};

weight_with_unit

Formats the product variant's weight. The weight unit is set in General Settings.

Input

{{ product.variants.first.weight | weight_with_unit }}

Output

24.0 kg

The unit can be overridden by passing it into the filter. This is useful in the case of product variants which can each have their own unit.

Input

{{ variant.weight | weight_with_unit: variant.weight_unit }}

Output

52.9 lb

Want to discuss this page?

Visit the Shopify Community