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