Theme tags
Theme Tags have various functions, including:
- Outputting template-specific HTML markup
- Telling the theme which layout and snippets to use
- Splitting a returned array into multiple pages.
In this article
- comment
- include
- form
- layout
- paginate
- raw
comment
Allows you to leave un-rendered code inside a Liquid template. Any text within the opening and closing comment blocks will not be output, and any Liquid code within will not be executed.
Input
My name is {% comment %}super{% endcomment %} Haravan.
Output
My name is Haravan.
include
Inserts a snippet from the snippets folder of a theme.
{% include 'snippet-name' %}
Note that the .liquid
extension is omitted in the above code.
When a snippet is included, the code inside it will have access to the variables within its parent template.
Including multiple variables in a snippet
There are two ways to include multiple variables in a snippet. You can assign and include them on different lines:
{% assign snippet_variable = 'this is it' %}
{% assign snippet_variable_two = 'this is also it' %}
{% include 'snippet' %}
Or you can consolidate them into one line of code:
{% include 'snippet', snippet_variable: 'this is it', snippet_variable_two: 'this is also it' %}
parameters include
with
The with parameter assigns a value to a variable inside a snippet that shares the same name as the snippet.
For example, we can have a snippet named color.liquid which contains the following:
color: '{{ color }}'
shape: '{{ shape }}'
Within theme.liquid, we can include the color.liquid snippet as follows:
{% assign shape = 'circle' %}
{% include 'color' %}
{% include 'color' with 'red' %}
{% include 'color' with 'blue' %}
{% assign shape = 'square' %}
{% include 'color' with 'red' %}
The output will be:
color: shape: 'circle'
color: 'red' shape: 'circle'
color: 'blue' shape: 'circle'
color: 'red' shape: 'square'
form
Creates an HTML form
element with all the necessary attributes (action, id, etc.) and input
to submit the form successfully.
parameters form
activate_customer_password
Generates a form for activating a customer account on the activate_account.liquid template.
Input
{% form 'activate_customer_password' %}
...
{% endform %}
Output
<form accept-charset="UTF-8" action="https://my-shop.myharavan.com/account/activate" method="post">
<input name="form_type" type="hidden" value="activate_customer_password" />
<input name="utf8" type="hidden" value="✓" />
...
</form>
new_comment
Generates a form for creating a new comment in the article.liquid template. Requires the article object as a parameter.
Input
{% form "new_comment", article %}
...
{% endform %}
Output
<form accept-charset="UTF-8" action="/blogs/news/10582441-my-article/comments" class="comment-form" id="article-10582441-comment-form" method="post">
<input name="form_type" type="hidden" value="new_comment" />
<input name="utf8" type="hidden" value="✓" />
...
</form>
contact
Generates a form for submitting an email through the Liquid contact form.
Input
{% form 'contact' %}
...
{% endform %}
Output
<form accept-charset="UTF-8" action="/contact" class="contact-form" method="post">
<input name="form_type" type="hidden" value="contact" />
<input name="utf8" type="hidden" value="✓" />
...
</form>
create_customer
Generates a form for creating a new customer account on the register.liquid template.
Input
{% form 'create_customer' %}
...
{% endform %}
Output
<form accept-charset="UTF-8" action="https://my-shop.myharavan.com/account" id="create_customer" method="post">
<input name="form_type" type="hidden" value="create_customer" />
<input name="utf8" type="hidden" value="✓" />
...
</form>
customer_address
Generates a form for creating or editing customer account addresses on the addresses.liquid template. When creating a new address, include the parameter customer.new_address. When editing an existing address, include the parameter address.
Input
{% form 'customer_address', customer.new_address %}
...
{% endform %}
Output
<form accept-charset="UTF-8" action="/account/addresses/70359392" id="address_form_70359392" method="post">
<input name="form_type" type="hidden" value="customer_address" />
<input name="utf8" type="hidden" value="✓" />
...
</form>
customer_login
Generates a form for logging into Customer Accounts on the login.liquid template.
Input
{% form 'customer_login' %}
...
{% endform %}
Output
<form accept-charset="UTF-8" action="https://my-shop.myharavan.com/account/login" id="customer_login" method="post">
<input name="form_type" type="hidden" value="customer_login" />
<input name="utf8" type="hidden" value="✓" />
...
</form>
guest_login
Generates a form on the login.liquid template that directs customers back to their checkout session as a guest instead of logging in to an account.
Input
{% form 'guest_login' %}
...
{% endform %}
Output
<form method="post" action="https://my-shop.myharavan.com/account/login" id="customer_login_guest" accept-charset="UTF-8">
<input type="hidden" value="guest_login" name="form_type">
<input type="hidden" name="utf8" value="✓">
...
<input type="hidden" name="guest" value="true">
<input type="hidden" name="checkout_url" value="https://checkout.shopify.com/store-id/checkouts/session-id?step=contact_information">
</form>
recover_customer_password
Generates a form for recovering a lost password on the login.liquid template.
Input
{% form 'recover_customer_password' %}
...
{% endform %}
Output
<form accept-charset="UTF-8" action="/account/recover" method="post">
<input name="form_type" type="hidden" value="recover_customer_password" />
<input name="utf8" type="hidden" value="✓" />
...
</form>
reset_customer_password
Generates a form on the customers/reset_password.liquid template for a customer to reset their password.
Input
{% form 'reset_customer_password' %}
...
{% endform %}
Output
<form method="post" action="https://my-shop.myharavan.com/account/account/reset" accept-charset="UTF-8">
<input type="hidden" value="reset_customer_password" name="form_type" />
<input name="utf8" type="hidden" value="✓" />
...
<input type="hidden" name="token" value="408b680ac218a77d0802457f054260b7-1452875227">
<input type="hidden" name="id" value="1080844568">
</form>
storefront_password
Generates a form on the password.liquid template for entering a password-protected storefront.
Input
{% form 'reset_customer_password' %}
...
{% endform %}
Output
<form method="post" action="/password" id="login_form" class="storefront-password-form" accept-charset="UTF-8">
<input type="hidden" value="storefront_password" name="form_type">
<input type="hidden" name="utf8" value="✓">
...
</form>
layout
Loads an alternate template file from the layout folder of a theme. If no alternate layout is defined, the theme.liquid template is loaded by default.
// loads the templates/alternate.liquid template
{% layout 'alternate' %}
If you don't want any
layout to be used on a specific template, you can use none
.
{% layout none %}
paginate
Splitting products, blog articles, and search results across multiple pages is a necessary component of theme design as you are limited to 50 results per page in any for loop.
The paginate
tag works in conjunction with the for
tag to split content into numerous pages. It must wrap a for tag block that loops through an array, as shown in the example below:
{% paginate collection.products by 5 %}
{% for product in collection.products %}
<!--show product details here -->
{% endfor %}
{% endpaginate %}
The by
parameter is followed by an integer between 1 and 50 that tells the paginate tag how many results it should output per page.
Within paginate tags, you can access attributes of the paginate object. This includes the attributes to output the links required to navigate within the generated pages.
raw
Allows output of Liquid code on a page without being parsed.
Input
{% raw %}{{ 5 | plus: 6 }}{% endraw %} is equal to 11.
Output
{{ 5 | plus: 6 }} is equal to 11.