Yoolk Liquid

Home Tags Theme-tags

Theme Tags

Theme Tags have various functions, including:

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 %} Yoolk.

Output

My name is Yoolk.

include

Inserts a partial template from a theme.

{% include 'services/item' %}

Note that the .liquid extension is omitted in the above code.

When a partial template is included, the code inside it will have access to the variables within its parent template.

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'

paginate

Splitting products, and images 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:

Input

{% paginate listing.products by 5 %}
  {% for product in paginate.collection %}
    <!--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.

form

Creates an HTML <form> element with all the necessary attributes (action, id, etc.) and <input> to submit the form successfully. Moreover, you can pass contact, feedback, and reservation toform tag.

Find out more about form object.

Parameters contact

Generates a contact form on the contact template.

Input

{% form 'contact' %}
...
{% endform %}

Output

<form accept-charset="UTF-8" method="post" class="contact-form" id="contact-form" action="/contact_us?locale=en&theme=sample">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="authenticity_token" type="hidden" value="cx6VZRkR8wuvy9G3eDbqnjRzUVTBb9ocLZ6X82ehy8A=">
</div>
...
</form>
Parameters reservation

Generates a reservation form on the reservation template.

Input

{% form 'reservation' %}
...
{% endform %}

Output

<form accept-charset="UTF-8" method="post" class="reservation-form" id="reservation-form" action="/reservation?locale=en&theme=sample">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="authenticity_token" type="hidden" value="cx6VZRkR8wuvy9G3eDbqnjRzUVTBb9ocLZ6X82ehy8A=">
</div>
...
</form>
Parameters feedback

Generates a feedback form on the feedback template.

Input

{% form 'feedback' %}
...
{% endform %}

Output

<form accept-charset="UTF-8" method="post" class="feedback-form" id="feedback-form" action="/feedback?locale=en&theme=sample">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="authenticity_token" type="hidden" value="cx6VZRkR8wuvy9G3eDbqnjRzUVTBb9ocLZ6X82ehy8A=">
</div>
...
</form>

draft_stamp

Allows output of draft stamp image on the web document. It outputs when the current listing doesn’t have live instant_website_asset, and its domain is not a subdomain.

Input

{% draft_stamp %}
# => <img alt="Draft" src="http://s-iw-frontend-statics.s3.amazonaws.com/assets/draft-5c840e93b5a77741e7f3e5c651b1c802.png" style="position: absolute; top: 0; right: 0; z-index: 9999;" />

{% draft_stamp 'sample/new-draft.png' %}
# => <img alt="New draft" src="http://s-iw-frontend-statics.s3.amazonaws.com/assets/sample/draft-5c840e93b5a77741e7f3e5c651b1c802.png" style="position: absolute; top: 0; right: 0; z-index: 9999;" />

Add breadcrumb element to your theme. It renders as ol tag with different li tags depending on the current page.

Input

{% breadcrumb %}

Output

<!-- On the product category page -->
<ol class="breadcrumb"><li><a href="/">Home</a></li><li><a href="/products">Products</a></li><li>Other Cars</li></ol>
<!-- On the product detail page -->
<ol class="breadcrumb"><li><a href="/">Home</a></li><li><a href="/products">Products</a></li><li><a href="/products/112-other-cars">Other Cars</a></li><li>Range Rover</li></ol>
<!-- On the service category page -->
<ol class="breadcrumb"><li><a href="/">Home</a></li><li><a href="/services">Services</a></li><li>Office Rental Services</li></ol>
<!-- On the service detail page -->
<ol class="breadcrumb"><li><a href="/">Home</a></li><li><a href="/services">Services</a></li><li><a href="/services/kh1-office-rental-services">Office Rental Services</a></li><li>Rooftop</li></ol>
<!-- On the food category page -->
<ol class="breadcrumb"><li><a href="/">Home</a></li><li><a href="/menu">Menu</a></li><li>Ice-cream</li></ol>
<!-- On the food detail page -->
<ol class="breadcrumb"><li><a href="/">Home</a></li><li><a href="/menu">Menu</a></li><li><a href="/menu/40-ice-cream">Ice-cream</a></li><li>Florida Strawberry Ice Cream</li></ol>

content_for

Stores a block of markup in an identifier for later use. In order to access this stored content in other templates or the layout, you would pass the identifier as an argument to yield tag.

{% content_for 'not_authorized' %}
  alert('You are not authorized to do that!')
{% endcontent_for %}

You can then use yield 'not_authorized' anywhere in your templates.

{% if current_account.nil? %}
  {% yield 'not_authorized' %}
{% endif %}

Note that content_for concatenates (default) the blocks it is given for a particular identifier in order. For example:

{% content_for 'navigation' %}
 <li>{{ 'Home' | link_to '/' }}</li>
{% endcontent_for %}

And in other place:

{% content_for 'navigation' %}
 <li>{{ 'Sign in' | link_to '/office/sign_in' }}</li>
{% endcontent_for %}

Then, in another template or layout, this code would render both links in order:

<ul>{% yield 'navigation' %}</ul>

If the flush parameter is true content_for replaces the blocks it is given. For example:

{% content_for 'navigation' %}
  <li>{{ 'Home' | link_to '/' }}</li>
{% endcontent_for %}

Add some other content, or use a different template:

{% content_for 'navigation' flush true %}
  <li>{{ 'Sign in' | link_to '/office/sign_in' }}</li>
{% endcontent_for %}

Then, in another template or layout, this code would render only the last link:

<ul>{% content_for 'navigation' %}</ul>

yield

Works in conjunction with content_for tag. It is used to retrieve the stored content.

{% if current_account.nil? %}
  {% yield 'not_authorized' %}
{% endif %}