HTML commands

The following commands will alter the HTML structure of the document in various ways.

comment

Everything within this block will be discarded, it is only used for using comments in the Liquid code (which will not be visible in the resulting HTML) and for commenting out some code or HTML block which aren't used at that moment (e.g. for testing various options).

Please beware, that everything between the comment and end-comment tags will not be outputted, but will be calculated. Therefore it will not be possible to e.g. use incomplete blocks within a comment block (like an if statement without a closing endif tag) - an error message will show up (when having debug messages enabled).

Example:

This example
{% comment %}
  Everything between comment and endcomment will not be rendered.
  Even Liquid tags like {{ product.name }} and 
  {% for collection in collections %} {{ collection.title }} {% endfor %} 
  will be ignored in this comment!
{% endcomment %}
has a comment

Output:

This example has a comment		

include

As already mentioned in the template directory description, it is possible to use smaller snippets of HTML code within another document. For that the include command insert that snippet at the given position. The parameter is the filename of the snippet (without the .liquid extension). The result is that the text in the snippet is at the place of the include command, thus all Liquid commands and objects in it are rendered as they would be written at the given place. Thus the snippets have access to all variables and objects that are active at the include statement.

The include command could also have a 'with' parameter, which assigns a variable with the same name as the snippet directly. Of course this could be performed identically by using an assign statement directly before the include command, but this is quite handy to comfortably pass a variable into a snippet.

Example:

The example snippet called product-box.liquid resides in the snippet directory of the template and looks like this (but usually would also show the description, images, etc of the product):

{{ product.title }}
{{ product_box }}

Then you can use the snippet in various templates (index page, collection page, product page, etc.)

{% for product in collection.products %}
  {% include 'product-box' %}
{% endfor %}
{% for product in collection.products %}
  {% include 'product-box' with '(Movie)' %}
{% endfor %}
		

Output:

Star Wars The Hobbit Forrest Gump
Star Wars (Movie) The Hobbit (Movie) Forrest Gump (Movie)
		

form

Creates a specific HTML form (with all necessary parameters). You need to add the supported input fields yourself though. The (only) parameter of the form command is the name of the form. There are some specific forms supported, which might be submitted from any template page.

While within a form block, the variable 'form' is defined and contains information about the last submission. If errors occurred they will be noted in that object, also if the form was submitted successfully. For further information please have a look at the form variable.

A list of the supported forms plus their supported fields follow:

article & review

A form for submitting a comment to a blog article or a product review to the shop page. Depending of whether it is a product review or a blog article comment, the form name starts either with "review" or "article&qout;. As there may be several forms on each page (create a new comment, edit an existing comment or adding a subcomment to a comment), you should add an unique identifier behind that text. E.g. "reviewedit23" can be used to edit a review with id 23. This is necessary because of the auto-fill of the forms after an error occurred. The supported fields names are:

Variable name	Object	Description
comment[author]	string	Pseudonym of the author of the comment. The customers default pseudonym can be found in customer.pseudonym.
comment[body]	string	This is the actual comment as plain text (any html code will be transformed to text)
comment[edit]	string	The id of the comment to be edited, otherwise 0.
comment[parent]	string	If the comment should be a sub comment of an already existing comment, this field must receive the id of the parent comment (0 otherwise).
comment[rating]	string	A rating between 1 and 5, if the comment is a top level review. 0 otherwise.
comment[title]	string	The title of the review, if it is a top level review. An empty string otherwise.
customer[email]	string	If anonymous posting is disabled and no user is currently logged in, it is possible to login a customer within this form using the given email address./td>
customer[password]	string	Same as customer[email] but for the password.

Example:

{% form reviewnew %}
  <h2>Create new review:</h2>
  {% if form.errors %}
    {{ form.errors | default_errors }}
  {% endif %}
  {% if product.reviews_need_to_login and customer.has_account != true %}
    <input type="text" value="" name="customer[email]" />
    <input type="password" value="" name="customer[password]" />
  {% endif %}
  {% if customer.has_account or product.reviews_need_to_login %}
    <input type="text" class="" value="{{ customer.pseudonym }}" name="comment[author]" />
  {% endif %}
  <input type="text" value="0" name="comment[rating]" />
  <input type="text" value="" name="comment[title]"  />
  <textarea name="comment[body]"></textarea> 
  <input type="text" style='display: none;' value="0" name="comment[edit]" />
  <input type="text" style='display: none;' value="0" name="comment[parent]" />
  <input type="submit" value="Post" />
  {% if form.posted_successfully? %}
    {% if form.only_rating %}
      Thank you very much for rating this product!
    {% else %}
      The comment has been submitted. It will be reviewed whether
      it meets the posting standards. Please wait some days for having it published!
    {% endif %}
  {% endif %}
{% endform %}
		

contact

A simple form for submitting an email to the shop owner. The supported fields names are:

Variable name	Object	Description
contact[name]	string	Name of the sender
contact[email]	string	Email address of the sender
contact[phone]	string	Phone number of the sender
contact[body]	string	Message to be sent

Example:

{% form 'contact' %}
  …
  <input type="text" id="contactFormName" name="contact[name]" placeholder="Enter your name here..." />
  …
  <input type="submit" id="contactFormSubmit" value="Send now" />
{% endform %}
		

Output:

<form action="/" class="contact-form" accept-charset="UTF-8" method="post" enctype="multipart/form-data" id="contact_form">
  <input name="formid" type="hidden" value="contact" id="contact_form_id" />
  …
  <input type="text" id="contactFormName" name="contact[name]" placeholder="Enter your name here..." />
  …
  <input type="submit" id="contactFormSubmit" value="Send now" /> 
</form> 

customer_login

Provides the possibility to login a user using his credentials. It contains the following fields:

Variable name	Object	Description
customer[email]	string	Contains the users email address
customer[password]	string	Contains the users shop password

Example:

{% form 'customer_login' %}
  <input type="email" id="customeremail" name="customer[email]" placeholder="Enter your email address here..." />
  <input type="password" id="customerpassword" name="customer[password]" />
  <input type="submit" value="Log In" />
{% endform %}
		

Output:

<form action="/" class="contact-form" accept-charset="UTF-8" method="post" enctype="multipart/form-data" id="customer_login_form">
  <input name="formid" type="hidden" value="customer_login" id="customer_login_form_id" />
  <input type="email" id="customeremail" name="customer[email]" placeholder="Enter your email address here..." />
  <input type="password" id="customerpassword" name="customer[password]" />
  <input type="submit" value="Log In" />
</form>
		

recover_customer_password

This form can be used to recover a users password (let the user set a new password in case that the old one is lost). Supported fields are:

Variable name	Object	Description
customer[email]	string	The users email address

Example:

{% form 'recover_customer_password' %}
  <input type="email" id="customeremail" name="customer[email]" placeholder="Enter your email address here..." />
  <input type="submit" value="Request password reset" />
{% endform %}
		

Output:

<form action="/" class="contact-form" accept-charset="UTF-8" method="post" enctype="multipart/form-data" id="recover_customer_password_form">
  <input name="formid" type="hidden" value="recover_customer_password" id="recover_customer_password_form_id" />
  <input type="email" id="customeremail" name="customer[email]" placeholder="Enter your email address here..." />
  <input type="submit" value="Request password reset" />
</form>
		

layout

Uses a different master template from the layout directory of the theme. If not used, "theme.liquid" will be used by default. The extension.liquid will be added automatically. Adding this term to a page or template allows loading a different page layout or design for this particular template or page. In case of "none" the template/page not load any layout, it must contain the full HTML head, body part for correct page rendering.  

Example:

{% layout 'second' %} or {% layout 'none' %}
		

paginate

When having too many products to fit on one page, you could distribute the products over several pages with page buttons at the bottom to switch between such pages. The paginate command makes this very easy to handle, just put around the for loop block you want to distribute the paginate command with the maximum number of items on a page and the server will do everything else.

Example:

{% paginate collection.products by 8 %}
  {% for p in collection.products %}
    {{ p.title }},
  {% endfor %}
{% endpaginate %}
		

Output:

Forrest Gump, Star Wars, Starman, Fantastic Four, Rainman, Gremlins, Underworld, Lethal Weapon,
		

Within the paginate block, you have access to the Paginate  object (even outside its matching loop). Using the information stored within, you are able to write page numbers with according links. For that you would either write the HTML code manually using Liquid loops, or you use the default_pagination  filter to do it for you, e.g. {{ paginate | default_pagination }}. Please see the description for the Paginate  object and the description for the default_pagination  filter.

raw

In order to output raw characters (without any Liquid parsing), you need to use a raw block around the code. This is necessary if you want to use the Liquid identifiers {%, %}, {{ and }} somewhere in your template.

Example:

{% raw %}
  Use any Liquid tag within an raw block like {% assign val = 42 %} and 
  {{ collection.product.size }} without evaluating them!
{% endraw %}
		

Output:

Use any Liquid tag within an raw block like {% assign val = 42 %} and 
{{ collection.product.size }} without evaluating them!
		

Read more about other command types: