aria-live="polite"
is used for content which might get updated. Polite won't interupt.
a11y.js
comes with Slate. Has trapFocus
and removeTrapFocus
methods.
- URL mapping
- The
{{ content_for_header }}
variable must be placed between the opening and closing <head>
tag. It inserts the necessary Shopify scripts into the <head>
which includes scripts for Google Analytics, Shopify analytics, for Shopify apps, and more.
- The
{{ content_for_layout }}
variable must be placed between the opening and closing <body>
tag. It outputs dynamic content generated by all of the other templates (index.liquid, product.liquid, and so on).
t
filter is used to pull translation from locales/ru.json
- In tags with more than one
and
or or
operator, operators are checked in order from right to left. You cannot change the order of operations using parentheses — parentheses are invalid characters in Liquid and will prevent your tags from working.
- You cannot initialize arrays using only Liquid. You can, however, use the
split
filter to break a string into an array of substrings.
for
(parameters). limit
, offset
, range
, reversed
.
- Causes the loop to stop iterating when it encounters the break tag.
// `break`
{% for i in (1..5) %}
{% if i == 4 %}
{% break %}
{% else %}
{{ i }}
{% endif %}
{% endfor %}
// output: 1 2 3
- Causes the loop to skip the current iteration when it encounters the
continue
tag.
{% for i in (1..5) %}
{% if i == 4 %}
{% continue %}
{% else %}
{{ i }}
{% endif %}
{% endfor %}
// Output: 1 2 3 5
{% assign handle = "cake" %}
{% case handle %}
{% when "cake" %}
This is a cake
{% when "cookie" %}
This is a cookie
{% else %}
This is not a cake nor a cookie
{% endcase %}
- Loops through a group of strings and prints them in the order that they were passed as arguments. Each time
cycle
is called, the next string argument is printed. cycle
must be used within a for loop block. Uses for cycle include:
- applying odd/even classes to rows in a table
- applying a unique class to the last product thumbnail in a row
{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}
// Output:
// one
// two
// three
// one
raw
temporarily disables tag processing. This is useful for generating content (eg, Mustache, Handlebars) which uses conflicting syntax.
- Captures the string inside of the opening and closing tags and assigns it to a variable. Variables created through
capture
are strings.
{% assign favorite_food = "pizza" %}
{% assign age = 35 %}
{% capture about_me %}
I am {{ age }} and my favorite food is {{ favorite_food }}.
{% endcapture %}
{{ about_me }}
increment
creates a new number variable, and increases its value by one every time it is called. The initial value is 0.
- By using compact when we create our
site_categories
array, we can remove all the nil
values in the array.
{% assign site_categories = site.pages | map: "category" | compact %}
{% for category in site_categories %}
- {{ category }}
{% endfor %}
default
allows you to specify a fallback in case a value doesn’t exist. default
will show its value if the left side is nil
, false
, or empty
. {{ product_price | default: 2.99 }}
divided_by
divides a number by another number. {{ 5 | divided_by: 3 }}
escape
escapes a string by replacing characters with escape sequences (so that the string can be used in a URL, for example). It doesn’t change strings that don’t have anything to escape.
first
returns the first item of an array. {{ "Ground control to Major Tom." | split: " " | first }}
lstrip
removes all whitespace (tabs, spaces, and newlines) from the left side of a string. It does not affect spaces between words.
map
creates an array of values by extracting the values of a named property from another object.
newline_to_br
Replaces every newline (\n
) in a string with an HTML line break (<br />
).
remove
removes every occurrence of the specified substring from a string.
replace
replaces every occurrence of the first argument in a string with the second argument.
sort
sorts items in an array in case-sensitive order. An optional argument specifies which property of the array’s items to use for sorting.
{% assign products_by_price = collection.products | sort: "price" %}
{% for product in products_by_price %}
<h4>{{ product.title }}</h4>
{% endfor %}
sort_natural
sorts items in an array in case-insensitive order.
strip_html
removes any HTML tags from a string.
strip_newlines
removes any newline characters (line breaks) from a string.
truncatewords
shortens a string down to the number of words passed as an argument. If the specified number of words is less than the number of words in the string, an ellipsis (…) is appended to the string.
uniq
removes any duplicate elements in an array.
where
creates an array including only the objects with a given property value, or any truthy value by default. Using where
, you can create an array containing only the products that have a "type" of "kitchen".