This section documents the Liquid markup language used in a Jumpseller Theme.
If you are not confident about what this is about get an overview on Design for Jumpseller

Customizing your Jumpseller theme, involves a solid understanding of HTML / CSS.
If you are not a web-designer consider hiring a recommend expert.

To test your liquid code in a sandbox please follow the link Liquid Sandbox.

About Liquid

Liquid is an open-source, it was developed for usage in Ruby on Rails web applications. It is used to load dynamic content on storefronts.

In Liquid there are two types of markup: Output and Tag.

Output markup (which may resolve to text) is surrounded by {{ }}, a matched pairs of curly brackets :

<div id="product-page">
  <h1>{{product.name}}</h1>
    <ul id="product-details">
      <li>Price: {{product.price}}>/li>
      <li>Description: {{product.description}}>/li>
    </ul>
</div>  

Tag markup (which cannot resolve to text) is surrounded by {% %}, a matched pairs of curly brackets and percent signs:

<ul>
{% for image in product.images %}
  <li>
    <a href="{{image}}"><img src="{{image | resize: '100' }}"/></a>
  </li>
{% endfor %}
</ul>  

Syntax

Our theme template language consists of variables and filters. Variables are the individual pieces of data about different aspects of your store, like product details and cart information. Filters are simple methods to format or manipulate output, like capitalizing words or modifying the size of an image.

Variables

You can use the variables in your code to display specific information. To use variables, wrap them in two curly brackets on either side. View all variables

  <h2>{% t 'Are you new at' %} {{ store.name }}?</h2>

  <h3>{{product.name}}</h3>

  <a href="{{ page.url }}">My Page</a>  

Filters

Filters are simple methods to format or manipulate output. The first parameter is your starting value, and it runs from left to right through one or more filters separated by bars.

<img src="{{ image | resize:'200x300' }}" />

{{ product.discount | divided_by:product.price | times:100 | round: 2 }}

{{ product.price | price: 'USD' }}  

Tags

Liquid tags are the programming logic that tells templates what to do. Tags are wrapped in: {% %} characters.

{% for product in paged.products %}

{% if category.products.size == 0 %}

{% assign partial_variable = 'one' %}

If / Else

These tags show output for different conditions. The opposite of if is unless. You can use and and or to combine conditions.

{% if product.images.size > 0 %}
  <img src="{{product.images.first}}" title="{{product.name}}" />
{% endif %}

{% if product.discount > 0 %}
  <del>{{product.price | price}}</del>
  <strong>{{product.price | minus:product.discount | price}}</strong>
  {% else %}
  <strong>{{product.price | price}}</strong>
{% endif %}

{% if store.description != empty %}
  {{store.description}}
{% endif %}

{% unless prod.id == product.id %}
  <p>{{product.name}}</p>
  <img src="{{ product.images.first }}" title="{{product.name}}" alt="{{product.name}}" />
{% endunless %}

Case Statement

If you need more conditions, you can use the case statement:

{% case product.status %}

{% when 'available'  %}
    Buy me!
{% when 'out-of-stock' %}
    Buy me soon!
{% when 'unavailable' %}
    You cann't buy now!
{% endcase %}

For Loops

These tags allow you to loop over collections:

{% for image in product.images %}
  <img src="{{ image | resize:'200x300' }}" alt="{{product.name}}" />
{% endfor %}

Cycle

Cycle is usually used within a loop to alternate between values:

{% cycle 'one', 'two', 'three' %}

{% for item in order.products %}
  <li class="{% cycle 'odd', 'even' %}">{{ product.name }}</li>
{% endfor %}

Raw

Temporarily disable tag processing to avoid syntax conflicts:

{ % raw % }
  Display text inside curly brackets like {{ this }} on a page with `raw`
{ % endraw % }

Variable Assignment

You can store data in your own variables, to be used in output or other tags as desired. The simplest way to create a variable is with the assign tag, which has a pretty straightforward syntax:

{% assign cat_id = product.categories.first.permalink %}
{% for prod in store.category[cat_id].products | limit:10 %}
  <p>{{prod.name }}</p>
  <img src="{{ prod.images.first }}" title="{{prod.name}}" alt="{{prod.name}}" />
{% endfor %}

If you want to combine a number of strings into a single string and save it to a variable, you can do that with the capture tag. This tag is a block which "captures" whatever is rendered inside it, then assigns the captured value to the given variable instead of rendering it to the screen.

{% for category in categories %}
  {% capture css_id %}category_{{ category.permalink }}{% endcapture %}
  <li id="{{ css_id }}" class="{{ css_id }}">{{ category.name }}</li>
{% endfor %}

Variables

Store

  • {{store.name}} Store name.
  • {{store.url}} Store url. e.g. http://www.mystore.com
  • {{store.current_url}} Store's current relative path. e.g. /winter-boots-200
  • {{store.logo}} Store logo URL.
  • {{store.description}} Store description.
  • {{store.currency}} Store currency. e.g. USD
  • {{store.customers_enabled}} true if Customers Login is Enabled (optional or required).
  • {{store.customers_optional}} true if Customers Login is optional.
  • {{store.fields}} Collection of store's custom fields.

    <ul>
    {% for field in store.fields %}
      <li>{{ field.label }}
      <ul>
      {% for value in field.values %}
        <li>{{ value }}</li>
      {% endfor %}
      </ul>
      </li>
    {% endfor %}
    <ul>
    

Products Collections

  • {{products.all}} All Products collection.
  • {{products.featured}} Featured Products collection.
  • {{products.latest}} Latest Products collection.
  • {{products.sorting_options}} Sorting options for the Products: Name, Price: Low to High, Price: High to Low.
  • {{products.product["permalink"]}} Returns a specific Product by its permalink.

Product

  • {{product.id}} Product unique identifier (Number).
  • {{product.permalink}} Product unique identifier (String). Matches the URL's path, e.g. http://www.mystore.com/product-permalink.
  • {{product.name}} Product name.
  • {{product.description}} Product description.
  • {{product.sku}} Product sku.
  • {{product.stock}} Product stock quantity.
  • {{product.stock_unlimited}} Product Stock Unlimited (Boolean).
  • {{product.weight}} Product weight.
  • {{product.status}} Product status. One of "available", "not-available", "disabled"
  • {{product.featured}} Returns true if product is featured (Boolean).
  • {{product.price}} Product price.
  • {{product.discount}} Product discount. Use {{product.price | minus:product.discount}} for price with discount
  • {{product.images}} Collection of images of the given product.
  • {{product.categories}} Collection of Categories assigned to the given product.
  • {{product.options}} Collection of Product Options. e.g. size, color, shape.
  • {{product.variants}} Collection of Product Variants. e.g. Small-Red, Medium-Red. Read more bellow.
  • {{product.fields}} Collection of Custom Fields of a Product.
  • {{product.field}} A specific Custom Field of a Product. Read more bellow.
  • {{product.digital}} Returns true if product is a digital or virtua product (Boolean).
  • {{product.attachments}} Collection of Attachments of a Product. e.g. MP3 files of a music product.
  • {{product.url}} Relative URL for product page.
  • {{product.add_to_cart_url}} Add to Cart URL for the given product. Read more

    {% for product in products.latest %}
      <div id="product-page">
        <h1>{{product.name}}</h1>
        <ul id="product-details">
          <li>Price: {{product.price}}>/li>
          <li>Description: {{product.description}}>/li>
        </ul>
      </div>  
    {% endfor %}
    
  • More information on Product Categories, Related Products, Product Images,...

Product Options

  • {{option.name}} Product Option Name
  • {{option.values}} Collection of Values (e.g. Blue, Red) for the given Product Option (e.g. Color)

Product Option Values

  • {{option.values}} Collection of Values (e.g. Blue, Red) of a Product Option (e.g. Color)
  • {{value.id}} Product Option Value unique identifier (Number).
  • {{value.name}} Product Option Value Name
  • {{option.variants}} Collection of Variants for the Product Option Value. Read more bellow.

Product Variants

A Product Variant is defined by a group of Product Options Values, so as an example, a product (T-Shirt) with two options: Color, with the values Red and Yellow, and Size, with the values Big and Small would have the Product Variants: Big-Red, Small-Red, Big-Yellow and Small-Yellow.

  • {{product.variants}} Collection of Variants of a Product
  • {{variant.id}} Product Variant unique identifier (Number).
  • {{variant.sku}} Product Variant Sku
  • {{variant.stock}} Product Variant Stock
  • {{variant.stock_unlimited}} Product Variant Stock Unlimited (Boolean)
  • {{variant.price}} Product Variant Price
  • {{variant.discount}} Product Variant Discount
  • {{variant.values}} Collection of Product Options Values (e.g. Red x Large, or Yellow x Small)
  • {{variant.attachments}} Collection of Attachments of a Variant. Read more bellow.
  • {{variant.add_to_cart_url}} URL to Add to Cart the given product's variant. Read more

Example Code to present a SelectList with a Label with the Product Option (e.g. Size) and the different Values (e.g. Large, Small) as options and with the remaining stock available:

{% for option in product.options %}
 <label for="{{option.name}}">{{option.name}}: </label>
 <select name="{{option.name}}">
 {% for value in option.values %}
   <option value="{{value.id}}">
   {{value.name}}
   {% for variant in product.variants %}
     {% if variant.values.first.id == value.id %} - {{variant.stock}} in stock{% endif %}
   {% endfor %}
   </option>
 {% endfor %}
</select>
{% endfor %}

Custom Fields

A Custom Field is defined by a label, like Product Year, and a Value, like the string "Made in 2012". The Custom Field Value can support one of the following formats: input field, select option or text area.

  • {{ product.fields }} Collection of Custom Fields of a Product.
  • {{ product.field["field-label"] }} Single Custom Field of a Product. e.g. {{ product.field["year"].value }} outputs value "2010".
  • {{ field.label }} Text Label identifying the Custom Field.
  • {{ field.type }} The typeText Label identifying the Custom Field.
  • {{ field.value }} Input, select option or text area's value of the Custom Field.

    <table>  
    {% for field in product.fields %}  
    <tr>  
      <td>{{field.label}}:</td>  
      <td>{{field.value}}</td>  
    </tr>  
    {% endfor %}  
    </table>
    

Cart

Deprecated in favor of {{ order }} tag.
{{cart.total}} should now be {{ order.total }} which displays the total price of the cart/order.

Category

  • {{categories}} Categories collection.
  • {{category.id}} Category unique identifier (Number).
  • {{category.permalink}} Category unique identifier (String). Matches the URL's path, e.g. http://www.mystore.com/category-permalink.
  • {{category.name}} Category name. e.g. "Winter Shoes"
  • {{category.description}} Category description.
  • {{category.url}} Category full URL e.g. http://www.mystore.com/winter-shoes
  • {{category.products}} Collection of products from the given category.
  • {{category.subcategories}} Collection of subcategories of the given category.
  • {{category.parent}} The parent's category of the given category.
  • {{category.sorting_options}} Sorting options for the category: Order, Name or Price
  • {{category.images}} Collection of images of the given category.
  • More information on Multiple Categories, Select a specific Category,...

Page

  • {{pages.all}} All Pages collection.
  • {{page.id}} Page unique identifier (Number).
  • {{page.permalink}} Page unique identifier (String). Matches the URL's path, e.g. http://www.mystore.com/page-permalink.
  • {{page.title}} Page title.
  • {{page.body}} Page body content.
  • {{page.date}} Page creation date.
  • {{page.url}} Page URL.
  • {{page.category}} Returns the Page Category assigned to this Page.
  • {{pages.page["permalink"]}} Returns a specific Page by its permalink.

    {% for page in pages.all %}
    <div>
      <p>{{page.title}}</p>
      <p>{{page.body}}</p>
    </div>
    {% endfor%}  
    

Page Categories

  • {{pages.categories.all}} All Page Categories Collection.
  • {{pagecategory.permalink}} Page Category's unique identifier (String). It is converted from the name, e.g. name: "Our Company", permalink: "our-company"
  • {{pagecategory.name}} Page Category's name.
  • {{pagecategory.pages }} Returns the Pages Collection assigned with the Page Category.
  • {{pages.categories.category["permalink"]}} Returns a specific Page Category by its permalink.

    {% for page in pages.categories.category.news.pages %}
    <div>
      <p>{{page.title}} / {{page.date | date: "%Y-%m-%d"}}</p>
      <p>{{page.body}}</p>
    </div>
    {% endfor%}
    

Order

  • {{order.id}} Order unique identifier (Number).
  • {{order.status_id}} Order status (Pending Payment, Paid, Shipped, Canceled).
  • {{order.status}} Translated Order status.
  • {{order.date}} Order date.
  • {{order.products}} Collection of products for the given order.
  • {{order.products_count}} Total number of individual products for the given order.
  • {{order.subtotal}} Subtotal value for the given order. Excluding taxes, shipping and discounts.
  • {{order.shipping}} Shipping value for the given order.
  • {{order.weight}} Weight value for the given order.
  • {{order.tax}} Tax value for the given order.
  • {{order.discount}} Discount value for the given order.
  • {{order.total}} Total value for the given order. Including taxes, shipping and discounts.
  • {{order.get_regions_url}} Get Regions for Country's Order URL. Result in JSON format.
  • {{order.shipping_address.name}} Name in the shipping address.
  • {{order.shipping_address.formatted}} Formated address.
  • {{order.billing_address.name}} Name in the billing address.
  • {{order.billing_address.taxid}} Tax Id in the billing address e.g. VAT, NIF or RUT number.
  • {{order.billing_address.formatted}} Formated address given in the order.
  • {{order.shipping_countries}} Collection of allowed shipping countries for the given order.
  • {{order.billing_countries}} Collection of billable countries for the given order.
  • {{order.email}} E-mail of the client that made the order.
  • {{order.phone}} Phone of the client that made the order.
  • {{order.payment_method_id}} Payment method ID used e.g. paypal_express, webpay.
  • {{order.payment_method}} Payment method name used e.g. PayPal.
  • {{order.payment_information}} Payment information for the chosen payment method.
  • {{order.additional_information}} Additional information for your order.
  • {{order.shipping_required}} Shipping Information Required (Boolean) e.g. false when selling Virtual Products like an event ticket.
  • {{order.shipping_method}} Shipping method name used e.g. Fedex.
  • {{order.shipping_method_id}} Shipping method ID used e.g. free, tables.
  • {{order.shipping_tracking_number}} Shipping Tracking Number.
  • {{order.shipping_tracking_url}} Shipping Tracking URL.
  • {{order.shipping_tracking_company}} Shipping Tracking Company.
  • {{order.url}} Cart Page URL for the given Order.
  • {{order.update_url}} URL to update ordered quantities.
  • {{order.checkout_url}} Checkout Page URL for the given Order.
  • {{order.place_order_url}} URL to Place Order action for the given Order.
  • {{order.additional_fields}} Collection of Additional Fields of a Product.
  • {{order.additional_field}} A specific Additional Field of an Order.
  • {{ estimate_form }} The estimate shipping form. Used at Cart or Checkout page.

Ordered Product

  • {{orderedproduct.id}} Ordered Product unique identifier (Number).
  • {{orderedproduct.product_id}} Original Product unique identifier (Number).
  • {{orderedproduct.name}} Ordered Product name
  • {{orderedproduct.name_with_options}} Product name with Options Name and Options Values e.g. "Air Jordan's (Size: L, Color: Black)"
  • {{orderedproduct.description}} Ordered Product description.
  • {{orderedproduct.sku}} Product SKU.
  • {{orderedproduct.qty}} Ordered Quantity of this Product at the Order (Number).
  • {{orderedproduct.stock}} Product stock quantity.
  • {{orderedproduct.stock_unlimited}} Product Stock Unlimited (Boolean).
  • {{orderedproduct.weight}} Product weight.
  • {{orderedproduct.price}} Ordered Product price.
  • {{orderedproduct.subtotal}} Subtotal value for the given ordered product (qty x price). Excluding taxes, shipping and discounts.
  • {{orderedproduct.discount}} Ordered Product discount. Use {{orderedproduct.price | minus:orderedproduct.discount}} for price with discount.
  • {{orderedproduct.images}} Collection of images of the given product.
  • {{orderedproduct.categories}} Collection of Categories assigned to the given Ordered product.
  • {{orderedproduct.options}} Collection of Product options. e.g. size, color, shape.
  • {{orderedproduct.fields}} Collection of Custom Fields of a Product
  • {{orderedproduct.digital}} Returns true if the ordened product is a digital or virtua product (Boolean).
  • {{orderedproduct.attachments}} Collection of Attachments of an Ordered Product. Read more bellow.
  • {{orderedproduct.url}} URL for product page.
  • {{orderedproduct.remove_url}} URL to Remove from Cart the given product.

Product Attachments

  • {{product.attachments}} Collection of Attachments of a Product. e.g. MP3 files of a music product.
  • {{orderedproduct.attachments}} Collection of Attachments of an Ordered Product. e.g. PDF files of an e-book product.
  • {{variant.attachments}} Collection of Attachments of a Product's Variant.
  • {{attachment.name}} Name of a give Product Attachment. e.g. "Web-Design101.pdf"
  • {{attachment.url}} URL of a give Product Attachment. eg. "http://cdn.jumpseller.com/web-design101.pdf"

    <table>  
    {% for orderedproduct in order.products %}    
    {% for attachment in orderedproduct.attachments %}  
    <tr>  
      <td><a href="{{attachment.url}}">{{attachment.name}}</a></td>  
    </tr>  
    {% endfor %}  
    {% endfor %}
    </table>
    

Customers

  • {{login_form}} Outputs the customer login form.
  • {{customer_reset_password_form}} Outputs the customer reset password form. Can be used at Customer Reset Password & Checkout Success Blocks.
  • {{customer_details_form}} Outputs the customer details form. Can be used at Customer Details Block for registration and edit customers.
  • {{customer.name}} name for the given customer. Can be used at Customer Page Block.
  • {{customer.email}} Email for the given customer
  • {{customer.phone}} Phone for the given customer
  • {{customer.category.code}} Category's code for given customer (e.g. wholesale-customer).
  • {{customer.category.name}} Category's name for given customer (e.g. Wholesale Customer).
  • {{customer.shipping_address.formatted}} Formatted primary shipping address for the given Customer.
  • {{customer.billing_address.formatted}} Formatted primary billing address for for the given Customer.
  • {{customer.shipping_addresses}} Returns shipping addresses list of the given customer.
  • {{customer.billing_addresses}} Returns shipping addresses list of the given customer.
  • {{customer.orders}} Collection of orders for the given Customer.
  • {{customer.logout_url}} URL to Logout the currently Logged in customer.
  • {{customer.save_password_url}} URL to submit a new Customer's Password (e.g. when reseting password).
  • {{customer.add_billing_address_url}} URL to Customer Add Billing Address Page.
  • {{customer.add_shipping_address_url}} URL to Customer Add Shipping Address Page.
  • {{customer.edit_url}} URL to edit customer.
  • {{customer_account_url}} URL to Customer Page Account.
  • {{customer_login_url}} URL to Customer Login.
  • {{customer_registration_url}} URL to Customer Registration.

Example code to list of its previous orders at the Customer Account Page.

    {% if customer %}
      <p>{{ customer.name }}</p>
      <h3>{% t "Previous Sales" %}</h3>
      <table>  
        {% for order in customer.orders %}
        <tr>
          <td>#{{order.id}}</td>
          <td>{{order.total | price }}</td>
          <td>{{order.status }}</td>
        </tr>
        {% endfor %}
      </table>
    {% endif %}

Addresses

  • {{address.edit_url}} URL to edit customer address.
  • {{address.delete_url}} URL to delete customer address.
  • {{address.set_primary_url}}} URL to set customer address to primary.
  • {{address.default}}} Returns address primary status.

Example code to list of Customer Shipping Addresses

      {% for shipping_address in customer.shipping_addresses %}
        <p>{{ shipping_address.formatted}}
          <a href="{{ shipping_address.edit_url}}" style="font-size:10px;">({% t 'Edit' %})</a>
          {% if shipping_address.default == false %}
            <a href="{{ shipping_address.set_primary_url}}" style="font-size:10px;">({% t 'Make Primary' %})</a>
          {% endif %}
          <a href="{{ shipping_address.delete_url}}" style="font-size:10px;">({% t 'Delete' %})</a>
        </p>
      {% endfor %}

Promotions and Discounts

  • {{coupon_form}} Outputs the coupon code form at the Cart or Checkout block.
  • {{product.discount}} Discount value on a product.
  • {{cart.discount}} Discount value on all product's cart.
  • {{order.discount}} Discount value on a order.

Search

  • {{ search.query }} Query string to search.
  • {{ search.url_send }} URL where to post the search form.
  • {{ search.results }} Products collection made up by the items found during the search.

    <form method="get" action="{{search.url_send}}" id="search-form">
      <input type="text" name="q" value="{{search.query}}" />
      <input type="submit" value='{{"Search" | t}}' />
    </form>  
    

Breadcrumbs

  • {{breadcrumb.url}} The URL to the breadcrumb page. e.g. a category page
  • {{breadcrumb.text}} The name of the breadcrumb. e.g. a category name

    <div class="breadcrumbs">
    <ul>
    {% for breadcrumb in breadcrumbs %}
      {%if forloop.last %}  
        <li><strong>{{breadcrumb.text}}</strong>>/li>  
      {% else %}
        <li><a href="{{breadcrumb.url}}">{{breadcrumb.text}}</a> > </li>
      {% endif %}
    {% endfor %}
    </ul>
    </div>
    

Navigation Menu

  • {{menu}} JSON containing all navigation menu items for all navigation menus.
  • {{menu.menu_key.name}} Returns the name for 'menu_key' navigation menu.
  • {{menu.menu_key.items}} JSON containing all navigation menu items for 'menu_key' navigation menu.
  • {{active_items}} Array with the IDs of all active navigation menu items, i.e., that link to the same URL as the user's current {{store.url}}.

Navigation Menu Item

  • {{menu_item.id}} Menu Item unique identifier (Number).
  • {{menu_item.name}} Returns the translated Name.
  • {{menu_item.url}} Returns the localized URL.
  • {{menu_item.type}} : Returns the type of link for this menu.
  • {{menu_item.level}} Returns the how deep the menu is nested, i.e., the dropdown level.
  • {{menu_item.menu_order}} Return the order of this item in the menu scope.
  • {{menu_item.images}} : Return the images for this menu (for Categories)
  • {{menu_item.dropdown}} Returns true if this item is a dropdown menu.
  • {{menu_item.category}} : Returns true if this item is a category menu.
  • {{menu_item.external}} Returns true if this item is an external URL.
  • {{menu_item.has_parent}} Returns whether this item has a parent menu or not, i.e., if it is inside a dropdown
  • {{menu_item.active}} Returns whether this item or any of its children points to the current URL
  • {{menu_item.items}} Returns this item's children, i.e., all its navigation menu items if it is a dropdown

Languages

  • {{ languages }} Collection of store's available languages.
  • {{ languages.first }} Current store language object. e.g. {{ languages.first.code }} outputs 'en' or 'es'.
  • {{ language.code }} Returns the language code.
  • {{ language.name }} Returns the language name.
  • {{ language.url }} Returns the url to switch do the chosen language.
  • {% t “string of text” %} Returns the “string of text” translated in the current language. Strings translations are managed at the Control Panel > Languages.
  • {% t “string of text %{email} %{size}” | email: "test@google.com" | size: "{{language_name}}" %} Returns the “string of text” translated in the current language. You can use this method to insert Liquid variables (note: only Strings!) available in the current context into the translated string, without having to translate the content. Use the Liquid '{% capture %}' or '{% assign %}' tag to pass values to a Liquid variable.

    {% if languages.size > 1 %}
    <ul>
      {% for language in languages %}
      <li>
        <a href="{{language.url}}">{{language.name}}</a>
      </li>
      {% endfor %}
    </ul>
    {% endif %}  
    

Pagination

If a given collection like {{ products.all }} or {{ category.products }} holds more items than the maximum number (40) you should paginate it. Pagination allows you split a product or page collection over different pages.

  • products.all or products.latest or products.featured or category.products or pages or search.results Collection to paginate.
  • paged.products or paged.pages or paged.results The paginated collection.
  • {{ paged.default }} or {{ pager }} The default pager HTML object.

Optionally you can extend Pagination with:

  • {{ paged.previous_page }} The previous pagination number, e.g. 2.
  • {{ paged.previous_url }} The previous pagination's page url, e.g. /wines?page=2 .
  • {{ paged.current_page }} The current pagination number, e.g. 3.
  • {{ paged.next_page }} The next pagination number, e.g. 4.
  • {{ paged.next_url }} The next pagination's page url, e.g. /wines?page=4 .
  • {{ paged.per_page }} The number of items per page, e.g. 12
  • {{ paged.total_pages }} The number of paginated pages, e.g. 4
  • {{ paged.total }} The total number of paginated products, e.g. 48.

    <div class="product-gallery">  
      {% paginate category.products by 20 %}  
        {% for product in paged.products %}  
        <div class="product">  
          <a href="{{product.url}}">{{product.name}}</a>  
        </div>  
        {% endfor %}  
      <div class="pagination">
        {{pager}}<p>{{paged.per_page}} products</p>
      </div>  
      {% endpaginate %}  
    </div>
    

Contact Page

  • {{ contact.url }} Returns the Contact Page URL.
  • {{ contact_form }} Returns the Contact Page form HTML.

    <form accept-charset="UTF-8" action="/contact/send" method="post">  
      <input class="text" name="contact[email]" type="text">
      <input class="text" name="contact[name]" type="text">
      <input class="text" name="contact[phone]" type="text">
      <textarea class="text" name="contact[message]"><textarea>
      <input class="button" value="Send" type="submit">  
    </form>  
    

Special Variables

  • {{ 'image_file.jpg' | asset }} Returns one of the files included in the theme e.g. stylesheets, images, javascript). Always use the asset tag instead of direct links.
  • {{ template }} Current Theme Block's name used. e.g: layout, home, category.
  • {{ email.recipients }} Returns an array with the email's recipientes for a given type of email.
  • {{ product.images.first | resize: '10×10' }} Resizes an images (in this case to a 10×10 size).
  • {{ product.images.first | thumb: '20×20' }} Creates a thumb of the image (in this case to a 20×20 size).
  • {{ product.discount | divided_by:product.price | times:100 | round: 2 }} Rounds any given number to a given precision in decimal digits, e.g 12,4153333% to 12,42%
  • {{ product.price | price: 'USD' }} If store currency is EUR it converts the given number into the given currency. If they are the same just adds currency symbol. The exchange rate is provided by Google.
  • {% t “string of text %{email} %{size}” | email: "test@google.com" | size: "{{language_name}}" %} Returns the “string of text” translated in the current language. You can use this method to insert Liquid variables (note: only Strings!) available in the current context into the translated string, without having to translate the content. Use the Liquid '{% capture %}' or '{% assign %}' tag to pass values to a Liquid variable.

    <link rel="stylesheet" type="text/css" href='{{ "grid.css" | asset }}' />
    <img src='{{ "image_file.jpg" | asset }}' />  
    

Partials

To create a partial in the Jumpseller code editor, simply create a new file and save it with the .liquid extension, e.g.: "partial-name.liquid".
To include a partial at any Theme Block use the tag include, e.g.: include "partial-name"

  • {% include 'partial-name' %} Note that the .liquid extension is omitted in the code.

You can also include multiple variables to your partials by assigning them in one of two ways:

{% assign partial_variable = 'one' %}
{% assign partial_variable_two = 'number two' %}
{% include 'partial-name' %}

or, alternatively:

{% include 'partial-name', partial_variable: 'one', partial_variable_two: 'number two' %}

You can expose any Liquid variables from the current Theme Block to your partial using the with parameter
For example, let's say you have the following product.liquid partial in your theme:

Title: '{{ title }}',
Product Name: '{{ product.name }}',
Product Stock: '{{ product.stock }}'

Within any theme page you can include `product.liquid like so:

{% assign title = 'This Product Page' %}
{% include 'product' with product %}

And the result will be:

Title: 'This Product Page', Product Name: 'Shoes', Product Stock: '5'  

Theme Options

The Theme Options are managed in a JSON file named options.json, with the following example structure:

{
  "Social Networks": {
    "icon": "archive",
    "options": {
      "enable_facebook": {
        "name": "Enable Facebook Share Button",
        "type": "checkbox",
        "default": "1"
      },
      "facebook_url": {
        "name": "Facebook URL",
        "type": "input",
        "default": "https://www.facebook.com/jumpseller"
      },
      "twitter_url": {
        "name": "Twitter URL",
        "type": "input",
        "default": "https://twitter.com/jumpseller"
      },
      "number_tweets": {
        "name": "Number of Latest Tweets to Display",
        "type": "select",
        "default": "10",
        "options": [
          {
            "5": "5"
          },
          {
            "10": "10"
          },
          {
            "15": "15"
          }
        ]
      }
    }
  }
}
  • icon The Font Awesome class for the icon you want to display associated with a group of Theme Options
  • name The Theme Option's name displayed at the Admin Panel.
  • type Defines the Option Type. Accepted values are: input, text, checkbox, select, file, color.
  • default The Default value of the Theme Option.
  • options Identifies the start of the Theme Options inside a group. It is also used to show the available options displayed at the Select List (only used when type=select).

More information about liquid can be found on the following page: Liquid for Designers.

If you are facing any problem, doubts and need extra help, please contact us.