NAV
liquid

1. The Anatomy of a Theme

Every eComNation theme consist of certain basic elements which work together to show up the online store. These elements are:

1.1. Templates

Templates are specialized HTML pages with *.liquid extension to parse dynamic tags supported by eComNation. eComNation provides a set of standard templates based on the functions each of them perform. Here are the templates provided with every eComNation theme:

1.1.1. Layout

The layout holds the most common elements of the website. It behaves like a standard template which gets applied to each page of your online store. Layout consists of common elements of your design such as - page background, header and footer, or any other element that will stay consistently visible across all the pages of your online store. Elements once included into the Layout template will not be required to be included in any other template. Such elements will be automatically displayed across all pages of your online store.

1.1.2 Home

Customize your home page using this template. Anything that you want to display specifically on your home page can be included in this template. You can include elements such as Images, JavaScript, featured products, featured categories etc.

1.1.3. Catalogue

You can customize your product catalogue using this template. It includes your products and categories list, featured products, featured categories, pagination as well as any additional elements such as side navigation etc.

1.1.4. Product detail

Using this template you can customize the design of product detail page. This page will be accessible to site visitors when they click on a product to view more details. This page will display dynamic data such as product title, product description, alternate photos, produce price etc.

1.1.5. Page

Using this template you can customize the design of CMS based pages also called ‘custom pages’. It is used to display all the content pages that you added from the ‘Pages’ section of your store administration.

1.1.6. Cart

Using this template you can customize the design of your shopping cart page.

1.2. Page Parts

Pages parts are small HTML elements or snippets that can be included in any Template. Page parts are very useful if you want to display common elements in certain areas of your online store. For example, if you want to include a common promotional banner in all pages, you will create it a page part. Then you will simply insert the page part in all templates pages. In this way, if you need to change the promotional banner, you will only need to modify the page part.

1.3. Stylesheets

Just like any other website, you can attach Stylesheet to your templates. In your eComNation theme, Stylesheets are linked with the ‘Layout’ template.

1.4. JavaScript

JavaScript can be also included in the same way as Stylesheets with the ‘Layout’ template of your theme. eComNation themes support all types of JavaScript including Jquery.

1.5. Images

A default images folder is provided with every eComNation theme. It stores all types of graphics such as background images, bullets, icons, banners etc. associated with your theme.

2. Working with a eComNation Theme

Every eComNation store-front comes with a pre-installed theme. The quickest way to create a new theme is to modify the pre-installed theme and rename it with your own. To do this, log-in to your store administration and visit My Themes sub-menu under the Design & Navigation tab.

2.1. Online theme editor

The online theme editor has following major sections:

Name Desciption
Templates All liquid templates associated with your theme are available for editing in this section
Page parts By default side_nav is provided, you can add more page parts as needed by clicking on the add page part icon.
Stylesheets A default stylesheet default.css is available with the theme. You can modify this stylesheet or add more Stylesheets by clicking on the add new stylesheet icon.
JavaScript A blank default.js is provided with the theme. You can added more by clicking on add new javascript icon.
Images Stores all graphics, background, icons etc. related to a theme
Preferences Stores product photo resizing preferences related to your theme

2.1.1. Modifying theme element

Once you click on a theme element to modify, you will see that rest of the elements are availably towards the right side bar. This allows you to switch to various theme elements quickly without going back to the main page.

2.1.2. Previewing changes

As you modify your theme elements, you can open your store url in another window and refresh it to view the updated changes.

3. Tags

3.1. Tag Basics eComNation has two types of special operators used to render dynamic content in the HTML templates. They are Variables and Blocks.

3.1.1. Variables

Variables are used to insert dynamic data like product title, product price etc.

Here is an example of variable:

<html> 
    <body> 
      <p>{{ product.name }}</p> 
    </body> 
</html> 

3.1.2. Blocks

Blocks are either used to render a block of HTML for set of data (example: Category listing), or to conditionally render a block of HTML.

Here is an example of a block:

<html> 
    <body> 
        {% for category in store.categories %} 
          <li> 
            <a href="{{category.url}}">{{ category.name }}</a>
          </li> 
        {% endfor %} 
    </body> 
</html>

In the example, the block starts with the tag {% for category in store.categories %} ** and ends with **{% endfor %} In between the bLocks we have the variable to display category name. The {{category.name}} variable will be looped with li HTML tag to display a list of category name.

3.1.3 Types of Blocks

Mainly, there are two types of blocks supported by eComNation:

The ‘For’ block:

{% for … in … %} … {% endfor %}

This block is used when certain list of items are to be displayed. For example. product list, category list, list of navigation links etc. You can use this block only with dynamic tags.

The 'If’ block:

This block is used when certain data or tag should be displayed conditionally. You can use this tag block anywhere, either with static HTML elements or dynamic tags.

{% if ….. %} …… {% endif %}

Here is an example of the 'If’ block

<html>
    <head>
        <title></title>
    </head>
    <body>
        {% for category in store.categories %} 
            {% if store.categories.name == "Tshirt" %}
                <a href="{{category.url}}">{{ category.name }}</a>
            {% endif %}
        {% endfor %}
    </body>
</html>

In the example, the {% if store.categories.name %} condition checks if any category name is equal to the “Tshirt”. If the condition is true, the link should be displayed otherwise it should not displayed.

3.2. Using Stylesheets and JavaScript

Stylesheets and JavaScripts are the fundamental building blocks of any design. You can insert Stylesheets and JavaScripts into your eComNation theme within the head tag of your 'Layout’. Here are the tags:

For Stylesheet: liquid <link href="{{ current_theme.stylesheet_path }}/stylesheet-file.css" rel="stylesheet" type="text/css"/>

For JavaScript: liquid <script src="{{ current_theme.javascript_path }}/javascript-file.js" type="text/Javascript"></script>

Here is an example:

<head>
    <title>My pet store</title>
    <link href="{{ current_theme.stylesheet_path }}/default.css" rel="stylesheet" type="text/css"/>
    <link href="{{ current_theme.stylesheet_path }}/orbit.css" rel="stylesheet" type="text/css"/>
    <script src="{{ current_theme.javascript_path }}/default.js" type="text/Javascript"></script>
    <script src="{{ current_theme.javascript_path }}/product_hover.js" type="text/Javascript"></script>
</head>
<body>
...
</body>

As shown in the example, the tags to insert Stylsheet and JavaScript are almost similar. The first part of the tag “current_theme” finds out the current theme and the second part .stylesheet_path and .javascript_path finds out the location of the particular stylesheet or Javascript file. This tag is followed by a forward slash “/” and then the actual stylesheet or javascript file name. Likewise, you can attach multiple JavaScript and Stylesheets with your theme.

3.3. Inserting Images

You can insert image to any template page including the 'Layout’ template. In a normal website you use the 'img’ HTML tag to insert images. In case of eComNation, we also use the 'img’ tag but the path to image is specified using this dynamic tag: {{ current_theme.image_path }}.

Let me show you the usage with an example:

<img src="{{ current_theme.image_path }}/american-express.png" alt=" logo"/>

In this example, 'american-express.png’ is the image file stored in the 'images’ folder associated with the theme. The tag {{ current_theme.image_path }} is used inside the 'img src=“..”’ Attribute followed by a forward slash ’/’ and then the name of the image file to be displayed.

3.4. Inserting Page Parts

As explained earlier, you can create and use 'Pages Parts’ into any template of your eComNation theme. Suppose you created a page part called 'side_navigation’ and now you want to display it in your 'Catalog’ template. Open the 'Catalogue’ template and move your cursor to the HTML tag where you want to insert the page part. Use this tag: {% include 'side_navigation’ %}. That’s it, the page part 'side_navigation’ is now included into the catalogue page and category navigation menu will be displayed in this page.

Here is an example:

<html>
    <body>
        <div class="content-left">
        ...
        </div>
        <!-- Start right side bar -->
        <div class="content-right">

            {% include "side_navigation" %}

        </div>

        <!-- End right side bar -->
    <body>
</html>

The convention to insert a Page Part into any template is : {% include “name_of_ page_part” %}

3.5. Rendering 'Layout’ in other templates

Earlier we discussed that the 'Layout’ is the base template which contain common design elements to be displayed store-wide; for example, header and footer. To allow rest of the templates, use the 'Layout’ template, we need to put the following tag into the 'Layout’ template. {{ content_for_layout }}

Here is an example of a typical 'Layout’ template:

<html>
    <head>
    ...
    </head>
    <body>
        <!-- Start header --> 
        <div class="header">
        ...
        </div>
        <!-- End header -->
        {{ content_for_layout }}
        <!-- Start footer ---> <div class="footer">
        ...
        </div>
        <!-- End footer-->
    <body>
</html>

In the example, the 'head’ section has the Stylesheet and JavaScript links. Then in the 'body’ tag, only header and footer sections are rendered. Between the header and footer, we have included {{ content_for_layout }}.

This tag does all the job for rest of the template pages. When a template page loads, it looks for the layout and in the layout if {{ content_for_layout }}. tag is present, then the template page automatically take up the header and footer from the 'Layout’ and displays the rest of the content specific to that page.

3.6. Navigation Menus

eComNation allows user to create any number of navigation menus and insert them into one or more template pages as needed.

3.6.1. Creating navigation menu

To create a navigation menu, log-in to your store administration area and under the ‘Design and Navigation’ tab, click on 'Navigation menus’ option.

You will see that two navigation menu’s 'Main’ and 'Footer’ are already created and a couple of links are also added to these. These are default navigation menus provided by eComNation and cannot be removed. For each of these navigation menus, you can add/remove links.

You can also add new navigation menus apart from main and footer by clicking on the link 'Add navigation menu’ located on the top of the right side bar.

3.6.2 Navigation menu Tag

The navigation menu that you create can be easily added to any template pages using the navigation menu title.

Here is the code:

{% for link in store.main_navigation_links %}
<a href="{{ link.url }}" target="{{ link.url_target }}">{{ link.title }}</a>
{% endfor %}

In the first line, we have used the 'for’ loop {% for link in …..%} to render each link added to a navigation menu. But there is more to this tag, lets take a look at the tag closely:

{% for link in store.main_navigation_links %}

Apart from the standard 'for’ loop convention, we have the store.main_navigation_link argument in which really does the trick. In that argument 'main_navigation’ is the name of the navigation menu available in the 'Navigation menus’ section of your store administration.

Likewise, suppose user has added a navigation menu called 'Top Categories’, then the navigation menu tag will be something like this :

{% for link in store.top_categories_link %}

Notice how we used 'top_categories’ as the argument instead of

'main_navigation’.

The second line of navigation menu tag looks familiar to us. The link tag {{ link.url }} links to the navigation menu item configured while adding the link, target tag {{ link.url_target }} takes the target (open in same browser window or open in a new browser window) selected while adding the link and finally {{ link.title }} tag displays the name of the link saved while adding the link to navigation menu.

Finally the navigation menu tags for loop ends with {% endfor %}, which is a standard convention to end a for loop.

Here is the standard code for footer main navigation and footer navigation menus which comes default with each eComNation store-front.

Main navigation menu

{% for link in store.main_navigation_links %}
<a href="{{ link.url }}" target="{{ link.url_target }}">{{ link.title }}</a>
{% endfor %}

Footer navigation menu

{% for link in store.footer_navigation_links %}
<a href="{{ link.url }}" target="{{ link.url_target }}">{{ link.title }}</a>
{% endfor %}

3.7. Product List

Product lists are displayed using ‘blocks’. The product listing block is used in 'catalogue.liquid’ template.

Here is an example of the product list block:

<html>
<head>
...
</head>
<body>
<h1>Products</h1> <div class="item"> <ul>
{% for product in store.paginated_products %}
<li>
<h2 class="title"><a href="{{ product.url }}">{{ product.name }}</a></h2> <div class="photo"> <a href="{{ product.url }}">{{ product |product_img_tag
}}</a> </div>
<p class="price">{{ product.price | money : store }}</p>
</li>
{% endfor %}
</ul>
</div>
<div style="clear"></div>
{{ store.paginated_products | will_paginate_liquid: "Prev", "Next" }} </body>
</html>

Some of the above code looks familiar to us while some tags are relatively new. Let’s understand what each of these tags do:

{% for product in Begins the product block

store.paginated_products %}{{ product.url }} Provides hyperlink to the product detail page.

{{ product.name }} Displays the product title

{{ product | product_img_tag }} Displays the product image (small size). There are two parts of this tag separated by a vertical line. The first part 'product’ tells the system to identify the product and the second tag after the vertical line “product_image_tag” finds out the corresponding image path of the product.

{{ product.price | money : store }} Displays the product price. There are two parts of this tag separated by a vertical line. The first part 'product.price’ shows the actual price of the product while the second part after the vertical line 'money’ is a special operator to covert any number into currency format.

{% endfor %} Ends the loop

{{ store.paginated_products | Displays the pagination of the product

will_paginate_liquid: “Prev”, “Next” }} list. In this tag, the text written inside the double quotes i.e. 'Prev’ , 'Next’ can be changed to any text that you want to show.

In addition to the product list, eComNation has a special type of product list called 'Featured Products’. If user has flagged a product 'Featured’ from his store administration area, those products are displayed using this Tag.

Here is an example of featured product list block:

<html>
<head>
...
</head>
<body>
<h1>Products</h1>
<div class="item">
<ul>
{% for product in store.featured_products %}
<li>
<h2 class="title"><a href="{{ product.url }}">{{ product.name
}}</a></h2>
<div class="photo"> <a href="{{ product.url }}">{{ product |
product_img_tag }}</a> </div>
<p class="price">{{ product.price | money : store }}</p>
</li>
{% endfor %}
</ul>
</div>
<div style="clear"></div>
{{ store.paginated_products | will_paginate_liquid: "Prev", "Next" }}
</body>
</html>

Explanation

The only difference between a normal product list and a featured product list is the first line in that tag where we have specified 'store.featured_products’ instead of 'store.paginated_products’

3.8. Categories

From your eComNation store administration, you can assign products to one or more categories. This allows the shopper to click on categories and get desired products quickly while they are browsing through the store front.

Here is the code example that displays list of categories:

<ul>
{% for category in store.categories %}
<li><a href="{{ category.url }}">{{ category.name }}</a></li>
{% endfor %}
</ul>

Showing Featured Categories

<ul>
{% for category in store.featured_categories %}
<li><a href="{{ category.url }}">{{ category.name }}</a></li>
{% endfor %}
</ul>

Categories link with active category

In order to provide a better user experience, sometimes active category needs to be highlight using a difference CSS. In the following example, we are using a special ‘for loop’ to display an active category. In this example, we are assuming that a css class called 'active’ is already available.

<ul>
{% for category in store.categories %}
{% if store.active_category.name == category.name %}
{% assign active_class = "active" %} {% else %}
{% assign active_class = "" %} {% endif %}
<li><a href="{{ category.url }}" class={{ active_class }}>{{ category.name
}}</a></li>
{% endfor %}
</ul>

In this example, we are using the already known for loop for categories. However, the interesting part of the code begins from second line. Here we are using an {%if…%} {%else%} {%endif %} block to tell the system which class to apply when a particular category is active.

3.9. Product Detail

eComNation provides template called ‘product_detail.liquid’. This template is used to render detailed product information.

Displaying product photos

In the product detail page, one of the major elements is displaying multiple product images and also allowing user to see a bigger product image.

Let’s begin with the code that displays multiple product thumbnails and a larger image when click on the thumb image.

Here is the code:

{% for product_image in product.product_images %}
<li>
<a href="{{ product_image | img_url: 'medium'}}">
{{ product_image | images_tag: 'thumb'}}</a>
</li>
{% endfor %}

Next, we always need to display a default big image of the product. Here is the code which does the job:

{{product | product_img_tag: 'medium’ }}

If we further need to show even a larger version of the image, here is the code:

{{product | product_img_tag: 'large’ }}

Now, if you want that clickng on the big image should open the large image, you can link the big image to the large image in the following way:

Here is the code

<a href="{{product | product_img_url: 'large' }}">{{product | product_img_tag:'medium' }}</a>

Displaying product information

Here are the simple tags you can use to show detailed product information:

{{ product.name }} Show product title {{ product.description }} Show detailed description {{ product.price | money: store }} Show product price

Adding product to cart

Here is the code which allows user to specify quantity and add the product to cart:

<form method="post" action="/cart/add" >
<input type="hidden" id="product_id" name="product_id" value="{{ product.id
}}" />
<input type="text" value="1" size="2" name="quantity" id="quantity" class="textinput">
<input type="submit" name="button" id="button" value="Add to cart" /> </form>

In the above code, since we are collecting user data, we certainly need to have a 'form’ tag with a 'post’ method.

3.10. Shopping Cart

With every eComNation theme, there is a default template called ‘cart.liquid’. The 'cart.liquid’ template is used to render the items added to shopping cart. Morover in this page user can modify quantity and proceed to checkout. Lets look at what goes into the cart.liquid template one by one.

All dynamic tags of shopping cart page are within the 'form’ tag which is a standard HTML tag.

Here is form action:

<form action="/cart" method="post" id="cart">
---- shopping cart dynamic tags in this area ----
</form>

As you can see, the 'form’ tag does nothing special except accepting the 'post’ method based on the 'cart id’. This is a standard code and it is a pre-requisite for the shopping cart page to function properly.

Now, let’s take a look at how we can render the items added to the shopping cart.

Since there can be multiple items added to a cart, we will use the 'for loop’ to render to loop items added to the cart and render in our view:

<table>
{% for item in cart.items %}
<tr>
<!-- loop each item in a row -->
</tr>
{% endfor %}
</table>

Within this for loop, for each item that is rendered, we need to display following elements:

  1. Item name and link to product description
  2. Unit price of each item
  3. Quantity input so that user can modify quantity
  4. Amount for that items i.e. quantity multiplied by unit price
  5. Check box to remove one or more items

Let’s see how each of these elements is rendered using our tags:

{% for item in cart.items %}
<tr>
<td><a href="{{ item.product.url }}">{{ item.name }}</a></td>
<td><input type="text" size="2" value="{{ item.quantity }}" name="item_quantity_{{ item.id }}" id="item_quantity_{{ item.id }}" /></td>
<td>{{ item.unit_price | money: store }}</td>
<td>{{ item.price | money: store }}</td>
<td><input type="checkbox" value="true" name="item_check_{{ item.id }}"
id="item_check_{{ item.id }}"></td>
</tr>
{% endfor %}

In the above mentioned code, we have rendered all of the elements related to a product (which is added to shopping cart) in table column 'td’. This five columns will be loop for every row 'tr’.

Here is an explanation of these tags:

Product name with link to product detail page
<a href="{{ item.product.url }}"> {{ item.name }}</a>

Input field that accepts quantity for each item 
<input type="text" value="{{item.quantity }}"   name="item_quantity_{{ item.id }}" id="item_quantity_{{ item.id }}" />

Unit rate of each item
{{ item.unit_price | money: store }}

Unit rate multiplied by quantity entered i.e. today amount for each item
{{ item.price | money: store }}

Check box associated with each item to remove item from cart
<input type="checkbox" value="true" name="item_check_{{ item.id }}" id="item_check_{{ item.id }}">

Finally, we need the action buttons which will allow users to either update cart, checkout or continue shopping.

<a href="/products">Continue Shopping</a>
<button name="commit" value="Update cart" >Update cart</button> {% if store.payment_enabled? %}
<button name="commit" value="Checkout">Checkout</button> {% endif %}

In the above code, we simply have an 'a’ tag which takes user to the product catalog page. In the next line we have a 'button’ tag with value='update cart’ . This action allows user to update quantity if changed for any item added to the cart. And lastly, we have another 'button’ tag to allow user to checkout. Notice the use of {if store.payment_enabled? %} …. {endif} tag which makes the 'Checkout’ button displayed to the user only if at least one payment method is enabled by the store owner. Shopping cart header

In an online store it is usually preferred to display shopping info across all pages of the site. Usually the shopping info is how many products are added to shopping cart, the total amount of goods added to cart and a link to view the shopping cart page.

Here is the code:

Your cart contains {{ cart.total_items }} items
You have items worth {{ cart.total_amount | money: store }} in your cart
<a href="/cart">View Cart</a>

The above code is self-explainatory. Tag in the first line displayed the total number of items added to the shopping cart. In the second line, the {{cart.total_amount | money : store }} tag displays the total worth of goods added to the shopping cart. In third line, we simply provide a link to the 'cart’ template to view the cart content.

3.11. Content Page

The content pages added by user from store administration through the ‘Pages’ section is rendered in the template called 'page.liquid’.

Here is the code which displayed the page title and content of a page.

<h1>{{ page.title }}</h1>
<p>{{ page.body }} </p>

The tags are self-explanatory.

4. CheatSheet

4.1. Layout Template tags.

4.1.1. Title and Meta liquid tags

Title and Meta liquid tags :

<html> 
  <head>
  {% if store.which_template == 'Home' %}
    <title>{{ store.name }}</title>
  {% elsif store.which_template == 'Products' %}
    <title>{{ store.name }}</title>
  {% elsif store.which_template == 'Product_Detail' %}
    {% if product.browser_title == blank %}
      <title>{{ product.name }}</title>
    {% else %} 
      <title>{{ product.browser_title }}</title>
    {% endif %}
    <meta name="description" content="{{ product.meta_description }}"/>
    <meta name="keywords" content="{{ product.meta_keywords }}"/>
  {% elsif store.which_template == 'Category' %}
    {% if store.active_category.browser_title == blank %}
      <title>{{ store.active_category.name }}</title>
    {% else %}
      <title>{{ store.active_category.browser_title }}</title>
    {% endif%}
    <meta name="description" content="{{ store.active_category.meta_description }}"/>
    <meta name="keywords" content="{{ store.active_category.meta_keywords }}"/>
  {% elsif store.which_template == 'Page' %}
    {% if page.browser_title == blank %}
      <title>{{ page.title }}</title>
    {% else %} 
      <title>{{ page.browser_title }}</title>
    {% endif %}
    <meta name="description" content="{{page.meta_description}}"/>
    <meta name="keywords" content="{{page.meta_keywords}}"/>
  {% elsif store.which_template == 'Cart' %}
    <title>{{ store.name }}</title>
  {% else %}  
    {% if post.browser_title != blank %}
      <title>{{ post.browser_title }}</title>
      <meta property="og:title" content="{{ post.browser_title }}" />
    {% else %}
      {% if post.title == blank %} 
        <title>{{ store.name }}</title>
      {% else %}
        <title>{{ post.title }}</title>
        <meta property="og:title" content="{{ post.title }}" />
      {% endif %}
    {% endif %}
    {% if post.meta_description != blank %}
      <meta name="description" content="{{ post.meta_description }}">
      <meta property="og:description" content="{{ post.meta_description }}" />
    {% else %}
      <meta name="description" content="{{ post.meta_description }}">
      <meta property="og:description" content="{{ post.meta_description }}" />
    {% endif %}
    {% if post.meta_keywords != blank %}
      <meta name="keywords" content="{{ post.meta_keywords }}">
    {% else %}
      <meta name="keywords" content="{{ post.meta_keywords }}">
    {% endif %}
  {% endif %}
  </head>
</html> 
Description Tags
Reture Name of the store {{ store.name }}
To render the other template {{ content_for_layout }}
Browser title Product {{ product.browser_title }}
Product Mate tag description {{ product.meta_description }}
Product Mate tag keyword {{ product.meta_keywords }}
Return the Current category (in catelogue page) {{ store.active_category.name }}
Browser title for Current category {{ store.active_category.browser_title }}
Mate tag description for Current Category {{ store.active_category.meta_description }}
Mate tag keyword for Current Category {{ store.active_category.meta_keywords }}
Browser title for pages {{ page.browser_title }}
Mate tag description for page {{ page.meta_description }}
Mate tag keyword for page {{ page.meta_keywords }}
Returns Blog post title {{ post.title }}
Browser title for Blog post {{ post.browser_title }}
Mate tag description for Blog post {{ post.meta_description }}
Mate tag keyword for Blog post {{ post.meta_keywords }}

4.1.2. Stylesheet and Javascript liquid tags

Stylesheet and Javascript liquid tags :

<html>
  <head>
    <link type="text/css" rel="stylesheet"  href="{{current_theme.stylesheet_path }}/style.css?{{ store.css_cache_token }}">
    <script src="{{ current_theme.javascript_path }}/main.js?{{ store.js_cache_token }}"></script>
  </head>
</html>
Description Tags
Return the path of the Stylesheet director {{ current_theme.stylesheet_path }}
Clear the css cache on the server {{ store.css_cache_token }}
Return the path of the javascript directory {{ current_theme.javascript_path }}
Clear the js cache on the server {{ store.js_cache_token }}

4.1.3. Category iteration liquid tags

Category and subcategory iteration :

{% for category in store.categories %}
  {% if category.child_categories.size == 0 %}
    <a class="" href="{{ category.url }}">{{ category.name }}</a>
  {% else %}
    <a  href="{{ category.url }}">{{ category.name }}</a>
    {% for sub_category in category.child_categories %}
       <a href="{{ sub_category.url }}">{{ sub_category.name }}</a>
    {% endfor %}
  {% endif %}
{% endfor %}

{% for category in store.categories %} {% endfor %}

Description Tags
Return category url {{ category.url }}
Return category name {{ category.name }}

4.1.4. Total cast items liquid tags

Total cast items :

<a href="/cart">{{ cart.total_items }} </a>
Description Tags
Return total cart items {{ cart.total_items }}

4.1.4. Current logged in User & Logout liquid tags

Current logged in User & logout tag:

{% if current_user_name %}
  <a href="/customer/dashboard">Welcome, {{ current_user_name }}</a>
  {% customer_logout_tag Logout %}
{% else %}
  <a class="" href="/customer/login">Login</a>
  <a class="" href="/customer/customers">Register</a>
{% endif %}
Description Tags
Return current loggedin users Full name {{ current_user_name }}
Generate logout link {% customer_logout_tag Logout %}

4.2. Home Template tags

4.2.1. Feature product

Feature product liquid tags :

{% for product in store.featured_products %}
  <a href="{{ product.url }}">
    <img src=" {{ product | product_img_url : 'list' }}" alt=""/>
    {{ product.name }}
    {{ product.price | money:store }}
  </a>
{% endfor %}

{% for product in store.featured_products %} … {% endfor %}

Description Tags
Return the product url {{ product.url }}
Generates the image tag with its product image url {{ product | product_img_tag }}
Return product image url {{ product | product_img_url : ‘list’ }} eg: medium, list, thumb
Return the product name {{ product.name }}
Return the price of a product {{ product.price | money:store }}
Return the previous price of a product {{ product.previous_price | money:store }}

4.2.2. Blog post

Blog post liquid tags for home template :

{% for post in store.blog_posts limit:2 %}  
  <a href="{{ post.url }} ">{{post.title}} </a>
  <img src="{{ post.hero_image.big_url }}" alt="{{ post.hero_image.alt_text }}"> 
  {{post.published_on | date: "%B %d, %Y" }} 
{% endfor %}

{% for post in store.blog_posts %} … {% endfor %}

Description Tags
Return the blog post url {{ post.url }}
Return big image for blog post {{ post.hero_image.big_url }}
Return small image for blog post {{ post.hero_image.small_url }}
Return thumb image for blog post {{ post.hero_image.thumb_url }}
Return alt text for hero image {{ post.hero_image.alt_text }}
Return the published date of the post {{ post.published_on | date: “%B %d, %Y” }}

4.4. Product Template tags

4.4.1. Basic liquid tags for Product

Basic liquid tags for Product :

<h1>{{ product.name }}</h1>
<strong>{{ product.price | money : store | remove: ".00" }}  
<del>{{ product.previous_price | money : store | remove: ".00" }}</del>
<p>{{ product.description }}</p>
{{ product.detailed_description }}
Description Tags
Return name of the product {{ product.name }}
Return product SKU {{ product.sku }}
Return the product url {{ product.url }}
Return product category {{ product.category.name }}
Return product parent category {{ product.category.parent.name }}
Return Products price with currency {{ product.price | money : store }}
Return Products previous price with currency {{ product.previous_price | money : store }}
Return the product Description of the product page {{ product.description }}
Returen Detail Description of the product {{ product.detailed_description | paragraphs }}

4.4.2. Iterate Product images

Iterate Product images :

{% for product_image in product.product_images %}
  <img src="{{ product_image | img_url: 'medium'}}" alt="" /> 
{% endfor %}

{% for product_image in product.product_images %} … {% endfor %}

Tags Description
Return url of Orignal image or generate image tag with url {{ product | product_img_url }} or {{ product | images_tag }}
Return url of Medium image or generate image tag with url {{ product | product_img_url: ‘medium’ }} or {{ product | images_tag: 'medium’ }}
Return url of List image or generate image tag with url {{ product | product_img_url: 'list’ }} or {{ product | images_tag: 'list’ }}
Return url of Thumb image or generate image tag with url {{ product | product_img_url: 'thumb’ }} or {{ product | images_tag: 'thumb’ }}

Iterate the related products tag:

{% if product.related_products.size > 0 %}
  {% for related_product in product.related_products %}
    <a href="{{related_product.url}}">
      <img src="{{related_product | product_img_url}}" alt="{{ related_product.name }}"  />
    </a>
    <p>
      {{ related_product.name }}
      {{ related_product.price | money:store }}
      {{ related_product.previous_price | money:store }}
    </p>
  {% endfor %}
{% endif %}
Description Tags
Return related product name {{ related_product.name }}
Return related product url {{ related_product.url }}
Return related product image url {{ related_product.product_image_url }}
Return related product price with currency {{ related_product.price | money : store }}
Return related product previous price with currency {{ related_product.previous_price | money : store }}

4.5. Cart Template tags

4.5.1. Iterate Cart items

Iterate Cart items :

{% for item in cart.items %}
  <tr>
    <td>
      <a href="{{ item.product.url }}"><img src="{{ item.product | product_img_url: 'thumb' }}" alt=""></a>
      {{ item.name }}{{ item.option.name }}
    </td>
    <td>
      QUANTITY  <input type="text" size="2" value="{{ item.quantity }}" />
    </td>
    <td>
      PRICE  {{ item.unit_price |  money: store |remove: ".00"}}
    </td>
    <td>SUB TOTAL {{ item.actual_price | money: store |remove: ".00"}}</td>
  </tr>
{% endfor %}

{% for item in cart.items %} … {% endfor %}

Description Tags
Return cart discounted total {{ cart.total_discount }}
Return cart actual amount wiht currency {{ cart.actual_cart_amount | money : store }}
Return item with selected varient {{ item.option.name }}
Return item quantity {{ item.quantity }}
Return product thumb size image {{ item.product | product_img_url: ‘thumb’ }}
Return Products price with currency {{ item.unit_price | money: store }}
Return Products previous price with currency {{ item.actual_price | money: store }}

4.5.2. Cart Calculator

Cart Calculator :

{% if cart.total_discount %}
    Total  : <strong>{{ cart.actual_cart_amount | money : store }}</strong>
    Discount: <strong>{{ cart.total_discount | money : store }}</strong>
  {% if cart.gift_card_applied? %}
        Gift Card Amount : <strong>{{ cart.gift_card_amount | money : store }}</strong>
  {% endif %}
  Grand Total : <strong>{{ cart.discounted_cart_amount | minus: cart.gift_card_amount | money : store }}</strong>
{% else %}
  {% if cart.gift_card_applied? %}
    Gift Card Amount : <strong>{{ cart.gift_card_amount | money : store }}</strong>
  {% endif %}
  Total : <strong>{{ cart.actual_cart_amount | minus: cart.gift_card_amount | money : store "}}</strong>
{% endif %}
Description Tags
Return cart actual amount with currency {{ cart.actual_cart_amount | money : store }}
Return cart discounted amount with currency {{ cart.total_discount | money : store }}
Return applied gift card amount {{ cart.gift_card_amount | money : store }}
Return total cart amount if giftcard and discount coupone is applied {{ cart.discounted_cart_amount | minus: cart.gift_card_amount | money : store }}
Return total cart amount if giftcard is applied {{ cart.actual_cart_amount | minus: cart.gift_card_amount | money : store }}

4.6. Error tags

These tags can be used in all the pages

Error tags :

<p>{% store_alert_message_tag %}</p>
<p> {% store_error_message_tag %} </p>
Description Tags
Return Alert and confirmation Messages {% store_alert_message_tag %}
Returns Error Message / Messages {% store_error_message_tag %}

4.7. Login form

Login form syntax :

{% form 'customer_login' %}
  {{ form.errors | default_errors }}
  {% store_alert_message_tag %}
  <input type="email" name="customer_session[login]" required="required"  placeholder="Email Address" />
  <input type="password" name="customer_session[password]" required="required"  placeholder="Password" />
  <a href="/customer/forgot_password">Forgot Password?</a>
  <input type="submit" value="Sign in" >
{% endform %}
Description Tags / Parameter
Starting tag for Customer login form {% form ‘customer_login’ %}
Form validation {{ form.errors | default_errors }}
End tag for Customer login form {% endform %}
Email Address name=“customer_session[login]”
Password name=“customer_session[password]”

4.8. Registration form

Registration form syntax :

{% form 'create_customer' %}
  {{ form.errors | default_errors }}
  <input type="text" name="customer[first_name]" required="required" placeholder="First Name"/>
  <input type="text" name="customer[last_name]" required="required" placeholder="Last Name"/>
  <input type="email" name="customer[login]" required="required" placeholder="Email Address" />
  <input type="text" name="customer[phone]" required="required" placeholder="Phone No."/>
  <input type="password" name="customer[password]" required="required" placeholder="Password"/>
  <input type="password" name="customer[password_confirmation]" required="required" placeholder="Password again"/>
  <input  type="submit" value="Register">
{% endform %}

Description Tags / Parameter
Starting tag for Create New Customer form {% form ‘create_customer’ %}
End tag for Create New Customer form {% endform %}
Form validation {{ form.errors | default_errors }}
First Name name=“customer[first_name]”
Last Name name=“customer[last_name]”
Email Address name=“customer[login]”
Phone No. name=“customer[phone]”
Password name=“customer[password]”
Password again name=“customer[password_confirmation]”

4.9. Forgot password form

Forgot password form syntax :

{% form 'recover_customer_password' %}
  {{ form.errors | default_errors }}
  <input type="email" name="email" required="required" placeholder="Email Address"/>
    <input type="submit" value="Submit" class="fr-btn button">
{% endform %}
Description Tags / Parameter
Starting tag for forgot password form {% form ‘recover_customer_password’ %}
End tag for forgot password form {% endform %}
Form validation {{ form.errors | default_errors }}
Email Address name=“email”

4.10. Password Reset form

Password Reset form syntax :

{% form 'reset_customer_password' %}
  {{ form.errors | default_errors }}
  <input type="password" name="customer[password]" required="required" placeholder="Password"/>
  <input type="password" name="customer[password_confirmation]" required="required"  placeholder="Confirm Password"/>
  <input type="submit" value="Reset" >
{% endform %}
Description Tags / Parameter
Starting tag for resetting Customer’s password form {% form ‘reset_customer_password’ %}
End tag for resetting Customer’s password form {% endform %}
Form Validation {{ form.errors | default_errors }}
Password name=“customer[password]”
Confirm Password name=“customer[password_confirmation]”

4.11. Iterate Customers Multiple Addresses

Iterate Customers Multiple Addresses:

{% for cust in customer.addresses %}
    <p>
        {{ cust.name }}<br>
        {{ cust.phone }}<br>
        {{ customer.login }}<br>
        {{ cust.address1 }}<br>
        {{ cust.address2 }}<br>
        {{ cust.city }}, {{ cust.state }},<br>
        {{ cust.country_name }},<br>
        {{ cust.zipcode }}
    </p>
    <a href="/customer/edit_details?address_id={{cust.id}}">Edit Address</a>
{% endfor %}
Description Tags / Parameter
Starting tag for Multiple addresses {% for cust in customer.addresses %}
End tag for Multiple addresses {% endform %}
Returns Customer id {{ cust.id }}
Returns Customer name {{ cust.name }}
Returns Customer phone number {{ cust.phone }}
Returns registered Customers email id {{ customer.login }}
Returns Customer Address1 {{ cust.address1 }}
Returns Customer Address2 {{ cust.address2 }}
Returns Customer city {{ cust.city }}
Returns Customer state {{ cust.state }}
Returns customer country {{ cust.country_name }}
Returns customer pincode {{ cust.zipcode }}

4.12. Edit Customer Details

Edit Customer Details:

{% form 'change_customer_details' %}
  {{ form.errors | default_errors }}
  <input type="text" name="address[first_name]" value="{{ form.first_name }}"  required="required" placeholder="First Name"/>
  <input type="text" name="address[last_name]" value="{{ form.last_name }}" required="required" placeholder="Last Name" />
  <input type="text" name="address[phone]" value="{{ form.phone }}"  required="required" placeholder="Phone No."/>
  <input type="text" name="address[address1]"  value="{{ form.address1 }}" required="required" placeholder="ADDRESS LINE 1" />
  <input type="text" name="address[address2]" value="{{ form.address2 }}" placeholder="ADDRESS LINE 2"/>
  <select name="address[country_id]" data-default="{{form.country_id}}" id="address_country_id" required="required">{% countries_for_select %}</select>
  <div  id="address_state">
  {% if form.country_id %}
    {% if form.country.has_states %}
      <select name="address[state_id]" data-default="{{form.state_id}}" id="address_state_id">
      <option>Select State/Province</option>
      </select>
    {% else %}
      <input type="text" id="address_state_name" name="address[state_name]" value="{{form.state_name }}"/>
    {% endif %}
  {% endif %}
  <input type="text" name="address[city]" value="{{ form.city }}" required="required" placeholder="CITY"/>
  <input type="text" name="address[zipcode]" value="{{ form.zipcode }}" required="required" placeholder="ZIP/POSTAL"/>
  <input type="submit" value="Update">
{% endform %}
$(document).ready(function () {
  default_state_id = $("#address_state_id").data('default');
  if(typeof(default_state_id) == 'undefined')
    default_state_id = '';
  else
    default_state_id = default_state_id.toString();

  var country_dropdown = $('#address_country_id');
  country_dropdown.val(country_dropdown.data('default'));
  if($("#address_state_name").length == 0 )
        get_states_for_country(country_dropdown.val());

    $('#address_country_id').change(function () {
      get_states_for_country($(this).val());
    });
});

var get_states_for_country = function(countryid) {
  if(countryid == '') {
    $('#address_state').html('');
    return;
  }
  var dropdown = $('<select name="address[state_id]" id="address_state_id">');
  var blank = $('<option>').attr({value: ""}).html("Select State/Province");
  dropdown.append(blank);
  $.ajax({
    data: 'country_id=' + countryid,
    type: 'get',
    dataType: 'json',
    url: '/checkouts/states_for_country',
    success: function (data, textStatus, jqXHR) {
      var state_ids = []
      if (data != "") {
        $.each(data, function (index, value) {
            var option = $('<option>').attr({value: value.id}).html(value.name);
            state_ids.push(value.id)
            dropdown.append(option);
        });
        $('#address_state').html("");
        $('#address_state').append(dropdown);
        if(default_state_id != '' && $.inArray(default_state_id, state_ids))
          dropdown.val(default_state_id);
      }
      else
      $('#address_state').html("<input type='text' name='address[state_name]' value='' placeholder='STATE/PROVINCE'>");
    }
  })
}
Description Tags / Parameter
Starting tag for Change Customer address {% form ‘change_customer_details’ %}
End tag for Multiple addresses {% endform %}
Form Validation {{ form.errors | default_errors }}
Customer First name name=“address[first_name]”
value=“{{ form.first_name }}”
Customer Last name name=“address[last_name]”
value=“{{ form.last_name }}”
Customer Phone number name=“address[phone]”
value=“{{ form.phone }}”
Customer Address1 name=“address[address1]”
value=“{{ form.address1 }}”
Customer Address2 name=“address[address2]”
value=“{{ form.address2 }}”
Customer city name=“address[city]”
value=“{{ form.city }}”
Customer zipcode name=“address[zipcode]”
value=“{{ form.zipcode }}”

4.13. Customer order History tags

Customer order History tags:

<table>
  <thead>
    <th>
    <td><a href="#">Order Status  </a></td>
    <td><a href="#">Order </a></td>
    <td><a href="#">Date of Order </a></td>
    <td><a href="#">Amount </a></td>
    <td><a href="#">Detail </a></td>
    </th>
  </thead>
  <tbody>
    {% for order in orders %}
      <tr>
        <td>{{ order.status }}</td>
        <td>{{ order.number }}</td>
        <td>{{ order.created_at | date: "%B %d, %Y" }}</td>
        <td>{{ order.discounted_amount | money: store }}</td>
        <td><a href="{{ order.details_path }}">View</a></td>
      </tr>
    {% endfor %}   
  </tbody>
</table>

{% for order in orders %} … {% endfor %}

Description Tags
Returns order status {{ order.status }}
Returns order number {{ order.number }}
Returns Date when order place {{ order.created_at | date: “%B %d, %Y” }}
Returns Total order value with currency {{ order.discounted_amount | money: store }}
Returns url of order detail {{ order.details_path }}

4.14. Customer order detail template

Basic order Details

Basic order Detail tags :

<p>ORDER # <strong>{{ order.number }}</strong></p>
<p><strong>Placed on:</strong> {{ order.created_at | date: "%B %d, %Y" }}</p>
<p><strong>Payment Status:</strong>{{ order.status }}</p>
<p><strong>Payment Mode:</strong> {{ order.payment_mode }}</p>
<p><strong>Shipping Type:</strong> {{ order.shipping_type }}</p>
Description Tags
Returns order number {{ order.number }}
Returns date of order placed {{ order.created_at | date: “%B %d, %Y” }}
Returns order status
eg: pending, packing, ready to dispatch, shipping etc.
{{ order.status }}
Returns the mode of payment {{ order.payment_mode }}
Returns shipping type {{ order.shipping_type }}

Billing Address

Billing Address tags :

<p>
  {{ order.billing_address.name |capitalize }}
  {{ order.billing_address.address1 }}, 
  {{ order.billing_address.address2 }}, 
  {{ order.billing_address.city }}, 
  {{ order.billing_address.state }},
  {{ order.billing_address.country_name }} 
  {{ order.billing_address.zipcode }}
  <span>Phone: {{ order.billing_address.phone }}</span>
</p>
Description Tags
Returns Name on the billing address {{ order.billing_address.name |capitalize }}
Returns address1 on the billing address {{ order.billing_address.address1 }}
Returns address2 on the billing address {{ order.billing_address.address2 }}
Returns city on the billing address {{ order.billing_address.city }},
Returns state on the billing address {{ order.billing_address.state }}
Returns country on the billing address {{ order.billing_address.country_name }}
Returns zipcode on the billing address {{ order.billing_address.zipcode }}
Returns phone number of the customer on the billing address {{ order.billing_address.phone }}

Shipping Address

Shipping Address tags :

<p>
  {{ order.shipping_address.address1 }},
  {{ order.shipping_address.address2 }},
  {{ order.shipping_address.city }}, 
  {{ order.shipping_address.state }},
  {{ order.shipping_address.country_name }}
  {{ order.shipping_address.zipcode }}
  <span>Phone: {{ order.shipping_address.phone }}</span>
</p>
Description Tags
Returns Name on the billing Shipping {{ order.shipping_address.name |capitalize }}
Returns address1 on the billing Shipping {{ order.shipping_address.address1 }}
Returns address2 on the billing Shipping {{ order.shipping_address.address2 }}
Returns city on the billing Shipping {{ order.shipping_address.city }},
Returns state on the billing Shipping {{ order.shipping_address.state }}
Returns country on the billing Shipping {{ order.shipping_address.country_name }}
Returns zipcode on the billing Shipping {{ order.shipping_address.zipcode }}
Returns phone number of the customer on the Shipping address {{ order.shipping_address.phone }}

Iterate Order Item list

Iterate Order Item list :

<table>
  <thead>
    <tr>
      <th></th>
      <th>product</th>
      <th>quantity</th>
      <th>cost</th>
      <th>total</th>
    </tr>
  </thead>
  <tbody>
      {% for item in order.items %}
          <tr>
            <td></td>
            <td>{{ item.name }}</td>
            <td>{{ item.quantity }}</td>
            <td>{{ item.unit_actual_price | money: store }}</td>
            <td>{{ item.actual_price | money: store }}</td>
          </tr>
      {% endfor %}
  </tbody>
</table>
Description Tags
Staring tag for order item iteration {% for item in order.items %}
Ending tag {% endfor %}
Returns product name {{ item.name }}
Returns product quantity {{ item.quantity }}
Returns product unit price {{ item.unit_actual_price | money: store }}
Returns product actual price {{ item.actual_price | money: store }}

Order Calculation

Order Calculation :

{% if order.discount %}
  <tr>
    <td colspan="4">Sub Total</td>
    <td>{{ order.actual_amount | money: store }}</td>
  </tr>
  <tr>
    <td colspan="4">Discount</td>
    <td>{{ order.discount | money: store }}</td>
  </tr>
{% endif %}
<tr>
  <td colspan="4">Sub Total</td>
  <td>{{ order.sub_total | money: store}}</td>
</tr>
{% if order.is_tax_calculated %}
  <tr>
    <td colspan="4">Tax</td>
    <td>{{ order.tax_amount | money: store}}</td>
  </tr>
{% else %}
  <tr>
    <td colspan="4">*All applicable taxes included in total amount*</td>
    <td>0</td>
  </tr>
{% endif %}
<tr>
  <td colspan="4">Shipping & Handling</td>
  <td>{{ order.shipping_charge | money: store }}</td>
</tr>
{% if order.payment_processing_charge %}
  <tr>
    <td colspan="4">Payment processing charges</td>
    <td>{{ order.payment_processing_charge | money: store}}</td>
  </tr>
{% endif %}
<tr>
  <td colspan="4">Grand Total</td>
  <td>{{ order.grand_total | money: store }}</td>
</tr>
Description Tags
Discounted amount with currency {{ order.discount | money: store }}
Actual amount with currency {{ order.actual_amount | money: store }}
Returns difference of actual amount and discounted amount with currency {{ order.sub_total | money: store}}
Returns tax amount with currency {{ order.tax_amount | money: store}}
Returns shipping charge with currency {{ order.shipping_charge | money: store }}
Returns payment processing charge with currency {{ order.payment_processing_charge | money: store}}

4.15. Change Password template tags

Change Password form :

{% form 'change_customer_password' %}
  {{ form.errors | default_errors }}
  <input type="password" name="current_password" required="required" placeholder="Old Password"/>
  <input type="password" name="new_password" required="required" placeholder="New Password"/>
  <input type="password" name="confirm_password" required="required" placeholder="Confirm Password" />
  <input type="submit" value="Update" >
{% endform %}
Description Tags / Parameter
Starting tag for Changing Customer’s password form {% form ‘change_customer_password’ %}
End tag for Changing Customer’s password form {% endform %}
Form Validation {{ form.errors | default_errors }}
Old Password name=“current_password”
New Password name=“new_password”
Confirm Password name=“confirm_password”

4.16. Favourite products template

Iterate Favourite products:

Iterate Favourite products:

{% if favourite_products.size == 0 %}
  <h5>No Product in wishlist.</h5>
{% else %}
  <table>
    <thead>
      <tr>
        <th>Product Image </th>
        <th>Product Name </th>
        <th>Price </th>
      </tr>
    </thead>
    {% paginate favourite_products by 10 %} 
      {% for favourite_product in favourite_products %}
        <tr>
          <td>
            <a href="{{favourite_product.url}}">
              <img src="{{favourite_product | product_img_url: 'thumb'}}" alt="{{ favourite_product.name }}" class="" />
            </a>
          </td>
          <td><a href="{{favourite_product.url}}">{{favourite_product.name}}</a></td>
          <td>{{ favourite_product.price | money:store}}</td>
        </tr>
      {% endfor %} 
    {% endpaginate %}
  </table>
{% endif %}
Description Tags / Parameter
Starting tag for favourite products list with number of products {% paginate favourite_products by 10 %}
End tag {% endpaginate %}
Staring tag for iterate favourite products {% for favourite_product in favourite_products %}
End tag {% endfor %}
Returns Product Name {{ favourite_product.name }}
Returns Product url {{favourite_product.url}}
Returns Product image {{favourite_product | product_img_url: ‘thumb’}}
Returns Product price with currency {{ favourite_product.price | money:store}}

Pagination links for Favourite products:

{% paginate favourite_products by 10 %} 
  <ul>
    {% if paginate.previous %}
      <li><a href="{{ paginate.previous.url }}">Prev</a></li>
    {% endif %}
    {% if paginate.next %}
      <li><a href="{{ paginate.next.url }}">Next</a></li>
    {% endif %}
  </ul>
{% endpaginate %}
Description Tags / Parameter
Return url for previous page {{ paginate.previous.url }}
Return url for next page {{ paginate.next.url }}