Additional filters

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

Danh sách bộ lọc

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:

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

results matching ""

    No results matching ""