Create a Custom HTML Theme

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>

Liquid 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' }}

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 'not-available' %}
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 %}

Jumpseller Variables

Store

{{store.name}} Store’s name.
{{store.original_name}} Store’s original name will display any special characters that exist.
{{store.url}} Store url to the index page. e.g. https//mystore.com/en/
{{store.base_url}} : Store domain. e.g. https//mystore.com/
{{store.current_url}} Store’s current relative path, will include any query_string or locale if available. e.g. /winter-boots-200
{{store.logo}} Store’s logo URL.
{{store.favicon}} Prints the store’s favicon url.
{{favicon}} Prints the rendered HTML code to be supported by several browsers and devices.
{{store.description}} Store’s description.
{{store.address}} Address object for the store’s main address (deprecated).
{{store.currency}} Store’s currency. e.g. USD
{{store.currencies_codes}} Collection of store’s currencies codes.
{{store.email}} Store’s Administrator email.
{{store.customers_enabled}} true if Customer’s Login is Enabled (optional or required).
{{store.customers_optional}} true if Customer’s Login is Optional.
{{store.fields}} Collection of store’s custom fields.
{{store.tax_on_product_price}} True or False if taxes are included in products’ prices.
{{store.shipping_countries}} Collection of countries to which the store ships to.
{{store.featured_reviews}} Collection of reviews that are both published and featured.
{{store.location}} Store’s default Location.

<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. https//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.stock_locations['Location Name'].stock}} Product stock quantity based on the store’s location(s).
{{product.weight}} Product weight.
{{product.width}} Product width.
{{product.length}} Product length.
{{product.height}} Product height.
{{product.status}} Product status. One of “available”, “not-available”, “disabled”
{{product.featured}} Returns true if product is featured (Boolean).
{{product.created_at}} Returns the creation date of the product. (dd/mm/yyyy).
{{product.price}} Product price.
{{product.discount}} Product discount. Use {{product.price | minus:product.discount}} for price with discount.
{{product.discount_begins}} Product Discount initial date if there is an begin date
{{product.discount_expires}} Product discount expiration date if there is an expiration.
{{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. Read more bellow.
{{product.custom_fields}} Collection of Custom Fields of a Product.
{{product.digital}} Returns true if product is a digital or virtual product (Boolean).
{{product.barcode}} Product barcode.
{{product.google_product_category}} Category of a Product based on the Google product taxonomy.
{{product.attachments}} Collection of Attachments of a Product. e.g. MP3 files of a music product.
{{product.url}} Relative URL for product page.
{{product.template}} Theme Template rendered for the given product.
{{product.add_to_cart_url}} Add to Cart URL for the given product. Read more
{{product.reviews}} Collection of the reviews of the product.
{{product.reviews_enabled}} Returns true if product has its reviews enabled.
{{product.back_in_stock_enabled}} Returns true if the product is eligible to be notified when it is back in stock.
{{product.back_in_stock_url}} Returns the URL to the Back in Stock subscription form.
{{product.fields}} Collection of Custom Fields of a Product. (Deprecrated)
{{product.field}} A specific Custom Field of a Product. Read more bellow. (Deprecrated)

{% 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.id}} Product Option unique identifier (Number).
{{option.values}} Collection of Values (e.g. Blue, Red) for the given Product Option (e.g. Color)
{{option.placeholder}} Placeholder for input and text type options

Product Option Values

{{value.id}} Product Option Value unique identifier (Number).
{{value.name}} Product Option Value Name
{{value.image}} The image of one of the Variants associated with this Option Value
{{value.custom}} Product Option Value Color if the Product Option is of type color
{{value.variants}} Collection of Variants for the Product Option Value. Read more below.

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.stock_locations['Location Name'].stock}} Product Variant Stock quantity based on the store’s location(s).
{{variant.price}} Product Variant Price
{{variant.discount}} Product Variant Discount
{{variant.discount_begins}} Product Discount initial date if there is an begin date
{{variant.discount_expires}} Product Discount expiration date if there is an expiration
{{variant.image}} Product Variant Image URL
{{variant.image_id}} Product Variant Image ID
{{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.custom_fields }} Collection of Custom Fields of a Product.
{{ product.custom_fields["field-label"] }} Custom Field Values of a Product. e.g. {{ product.custom_fields["year"] }} outputs custom field values.
{{ field[0] }} Text Label identifying the Custom Field.
{{ field[1] }} Collection of Custom Field Values.
{{ custom_field.label }} Text Label identifying the Custom Field.
{{ custom_field.type }} Type of the Custom Field.
{{ custom_field.values }} Collection of Custom Field Values.
{{ custom_field_value.label }} Text Label identifying the Custom Field.
{{ custom_field_value.field_id }} Custom Field Value ID.
{{ custom_field_value.value }} Input, select option or text area value of the Custom Field.
{{ custom_field_value.custom_field }} Custom Field of the Custom Field Value.

<table>
  {% for field in product.custom_fields %}
  <tr>
    <td>{{field[0]}}:</td>
    {% for custom_field_value in field[1] %}
      <td>{{custom_field_value.value}}</td>
    {% endfor %}
  </tr>
  {% endfor %}
</table>

Custom Fields (Deprecrated)

{{ 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 type 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>

Product Reviews Collection

Collection of reviews of a product.

{{reviews.rating}} Average rating of the reviews in the collection.
{{reviews.count}} Number of reviews in the collection.

Collection of reviews from multiple products.

{{store.featured_reviews}} Collection of reviews that are both published and featured.

Cart

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

Sorting Options

{{sorting_option.text}} The text of the option, it can be: Position, Name: A to Z, Name: Z to A, Price: Low to High, Price: High to Low or Date: Newest first.
{{sorting_option.url}} The url of the sorted page, e.g. www.mistore.com/zapatos/name/asc.
{{sorting_option.selected}} True if option is selected, False if not.
{{sorting_option.code}} The code of the option, it can be: position-asc, name-asc, name-desc, price-asc, price-desc or date-desc according to the following mapping:

Code	Text	URL Path
position-asc	Position	/position/asc
name-asc	Name: A to Z	/name/asc
name-desc	Name: Z to A	/name/desc
price-asc	Price: Low to High	/price/asc
price-desc	Price: High to Low	/price/desc
date-desc	Date: Newest first	/date/desc

Filters

{{filters}} All Filters collection.
{{filter.name}} Filter name. e.g. “Size”.
{{filter.id}} Filter unique identifier (Number).
{{filter.values}} All Filters values collection.
{{filter.value.name}} Filter value name. e.g. “Large”.
{{filter.value.id}} Filter value unique identifier (Number).
{{filter.value.selected}} Return true if value is selected, false if not.
{{filter.value.products_count}} Total number of individual products for the given filter value.

<form id="filters" method="get" action="{{current_url}}">
  {% for filter in filters %}
    <div class="selected-filters">
    {% for filter_value in filter.values %}
      {% if filter_value.selected %}
        <div>
        {{filter_value.name}}
        <span onclick="$('#{{filter_value.id}}').removeAttr('checked'); $('#filters').submit();">X</span>
        </div>
      {% endif %}
    {% endfor %}
    </div>
  {% endfor %}
  <ul>
    {% for filter in filters %}
      <li>{{filter.name}}
      <ul>
        {% for filter_value in filter.values %}
          <li>{{filter_value.name}}
          <input type="checkbox" id="{{filter_value.id}}" name="{{filter.id}}" value="{{filter_value.name}}" {% if filter_value.selected %}checked{% endif %}>
          <label for="{{filter_value.id}}">{{filter_value.name}}</label>
          <span>{{filter_value.products_count}}</span>
          </li>
        {% endfor %}
      </ul>
      </li>
    {% endfor %}
  </ul>
  <button type="submit">Filter</button>
</form>

More information about filters configuration in this support article.

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. https//mystore.com/product-permalink.
{{page.title}} Page title.
{{page.body}} Page body content.
{{page.date}} Page creation date.
{{page.url}} Page URL.
{{page.template}} Theme Template rendered for the given Page.
{{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 (Abandoned, Pending Payment, Paid, Canceled).
{{order.status}} Translated Order status.
{{order.status_code}} Order status code (abandoned, pending_payment, paid, canceled).
{{order.date}} Order creation date, formatted.
{{order.created_at}} Order creation date, raw.
{{order.completion_date}} Order completion date, formatted.
{{order.locale}} Order locale.
{{order.customer}} The Customer of an Order.
{{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.subtotal_with_discount}} Subtotal value for the given order. Excluding taxes, shipping and shipping discount.
{{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.shipping_tax}} Shipping tax value for the given order.
{{order.discount}} Discount value for the given order.
{{order.shipping_discount}} Shipping 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}} Address object for the order’s shipping address.
{{order.shipping_address.formatted}} Formated shipping address string.
{{order.billing_address}} Address object for the order’s billing address.
{{order.billing_address.formatted}} Formated billing address string.
{{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.tracking_number}} Shipping Tracking Number.
{{order.tracking_url}} Shipping Tracking URL.
{{order.tracking_company}} Shipping Tracking Company.
{{order.shipment_status}} Fulfillment status.
{{order.shipment_status_code}} Shipment status code of the Order (not_applicable, unfulfilled, requested, in_transit, delivered, failed, pickup_available, in_preparation, fulfilled).
{{order.shipment_expected_arrival}} Shipment Expected Delivery Date.
{{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 an Order.
{{order.additional_field}} A specific Additional Field of an Order. e.g. order.additional_field[‘geolocation’]
{{order.minimum_purchase.above_minimum}} Specifies if Minimum Purchase Conditions are met (Boolean)
{{order.minimum_purchase.condition_value}} Minimum Purchase Condition Type: qty or price
{{order.applied_promotions}} Collection of Promotions applied to the order”
{{estimate_form }} The estimate shipping form. Used at Cart or Checkout page.
{{estimate_form }} The estimate shipping form. Used at Cart or Checkout page.

Ordered Minimum Purchase conditions

Set minimum conditions to checkout in terms of number of items or minimum purchase amount.

{{order.minimum_purchase.above_minimum}} Returns if the order is above the minumum checkout conditions (Boolean).
{{order.minimum_purchase.condition_type}} Display the condition type: price or qty.
{{order.minimum_purchase.condition_value}} Minumum condition value, price or quantity of products.

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}} Ordered Product name with Options Name and Options Values e.g. “Air Jordan’s (Size: L, Color: Black)”
{{orderedproduct.description}} Ordered Product description.
{{orderedproduct.sku}} Ordered Product SKU.
{{orderedproduct.qty}} Ordered Quantity of this Product at the Order (Number).
{{orderedproduct.stock}} Product stock quantity.
{{orderedproduct.stock_unlimited}} Ordered Product Stock Unlimited (Boolean).
{{orderedproduct.weight}} Ordered Product weight.
{{orderedproduct.width}} Ordered Product width.
{{orderedproduct.length}} Ordered Product length.
{{orderedproduct.height}} Ordered Product height.
{{orderedproduct.barcode}} Ordered Product barcode.
{{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.image}} Image of the given Ordered Product.
{{orderedproduct.images}} Collection of images of the given Ordered Product.
{{orderedproduct.categories}} Collection of Categories assigned to the given Ordered Product.
{{orderedproduct.options}} Collection of Ordered Product Options. e.g. size, color, shape.
{{orderedproduct.fields}} Collection of Custom Fields of a Ordered Product.
{{orderedproduct.digital}} Returns true if the Ordered Product is a digital or virtual 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 Ordered Product.

Order Promotions

{{promotion.name}} Name of the Promotion that Applied to the order”
{{promotion.discount}} Total discount on the Order by the Promotion”
{{promotion.type}} Promotion Type”
{{promotion.coupon}} Coupon Code if Applicable

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>

Ordered Product Digital

{{orderedproduct.digital_products}} Collection of Digital Products of an Order. e.g. Concert Tickets or Music Tracks.
{{orderedproduct.digital_products.name}} Name of a give Digital Product. e.g. “Concert Ticket”
{{orderedproduct.digital_products.url}} URL of a give Digital Product. eg. “http://cdn.jumpseller.com/concert-ticket.pdf”

<table>
  {% for orderedproduct in order.products %}
    {% for digital in orderedproduct.digital_products %}
      <tr>
        <td><a href="{{digital.url}}">{{digital.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.id}} Customer unique identifier (Number).
{{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_edit_url}} URL to Customer Edit Page.
{{customer_registration_url}} URL to Customer Registration.
{{customer.additional_fields}} Collection of Additional Fields of a Customer.
{{customer.additional_field}} A specific Additional Field of a Customer.

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

More information on Customers

Addresses

Address information used for a Customer, defined on Orders and for each Customer.

{{address.name}} First Name (e.g. John).
{{address.surname}} Surname (e.g. Smith).
{{address.fullname}} Concatenated First and Surname in the customer address (e.g. John Smith)
{{address.address}} Street Address on the customer address (e.g. Oxford Street)
{{address.street_number}} Street Number on the customer address (if available, e.g. Door 30)
{{address.complement}} Street Address Complement (e.g. Office A2)
{{address.city}} City name.
{{address.postal}} Postal Code (e.g. SW19 5AE)
{{address.country}} Country name (e.g. Chile).
{{address.country_code}} Country ISO Code (e.g. CL).
{{address.region}} Region name (e.g. Metropolitana)
{{address.municipality}} Municipality (3rd regional sub-division) (e.g. Providencia)
{{address.latitude}} GPS latitude coordinate.
{{address.longitude}} GPS longitud coordinate.
{{address.taxid}} Tax Number ID (e.g. PT509168930)
{{address.edit_url}} URL to edit the customer address.
{{address.delete_url}} URL to delete the customer address.
{{address.set_primary_url}}} URL to set the customer address as Primary.
{{address.default}}} Returns address primary status (true or false).
{{address.formatted}}} Returns a formatted address information.

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

Locations

{{locations.all}} All active Locations collection.
{{locations.pickups}} All active store pickup points collection.

Location

Location information used for order fulfillment, order pickup address definition, and for physical addresses that represent the business. The location represents an object available in the store’s methods collection.

{{location.name}} The location’s name (e.g. My Store).
{{location.email}} The location’s associated email (e.g. mystoresaddress@aol.com).
{{location.street_address}} Address object for this Location.
{{location.phone}} Phone object for this Location.
{{location.description}} Description written by the merchant regarding the location’s information.
{{location.instructions}} Instructions written by the merchant regarding the location.

Promotions and Discounts

{{product.discount}} Discount value on a product.
{{cart.discount}} Discount value on all product’s cart.
{{order.discount}} Discount value on a order.
{{order.shipping_discount}} Shipping discount value on a order.
{{coupon_form}} Outputs the coupon code form at the Cart or Checkout block.
{{order.coupons}} Outputs a comma separared list of applied coupons to the 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="post" 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>

{{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.

{{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.name }} Returns the Contact name.
{{ contact.email }} Returns the Contact email address.
{{ contact.phone }} Returns the Contact phone number.
{{ contact.message }} Returns the Contact message.
{{ 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>

{{social.facebook.url}} Facebook URL from the store settings.
{{social.facebook.handler}} Facebook handler from the store settings.
{{social.twitter.url}} Twitter URL from the store settings.
{{social.twitter.handler}} Twitter handler from the store settings.
{{social.pinterest.url}} Pinterest URL from the store settings.
{{social.pinterest.handler}} Pinterest handler from the store settings.
{{social.instagram.url}} Instagram URL from the store settings.
{{social.instagram.handler}} Instagram handler from the store settings.
{{social.whatsapp.url}} WhatsApp URL from the store settings.
{{social.whatsapp.handler}} WhatsApp phone number from the store settings.
{{social.youtube.url}} Youtube URL from the store settings.
{{social.youtube.handler}} Youtube handler from the store settings.
{{social.tiktok.url}} TikTok URL from the store settings.
{{social.tiktok.handler}} TikTok handler from the store settings.
{{social.messenger.url}} Messenger URL to start a conversation with the Facebook profile on the store settings.

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.
{{page_title}} In Products and Pages, this tag provides with a title of the content normally used by search engines when applied in the HTML metatags. In all other pages will return the title of the current page. See how to edit these titles in Seo and Meta Tags
{{ meta_description }} In Products & Pages, this tag provides a description to the webpage content which is normally used by search engines when applied in HTML metatags.
{{ email.recipients }} Returns an array with the email’s recipientes for a given type of email.
{{ email.send_to }} Returns a string indicating the type of email recipient. This value can be either “accepts_marketing” or “all_customers”. It is important to exercise caution when removing this field, as doing so may prevent your customers from unsubscribing from your emails. Failure to allow customers to unsubscribe could result in your emails being flagged as spam in the future.
{{ 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.
{{ current_currency }} Return the ISO code of the currently selected currency. Mainly used for cases where the multicurrecy method used is the Admin Panel.

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

{{ template }} Template of the current page:

Template Code	Description
`home`	Home
`searchresults`	Search Results
`error`	Error
`customer__reset_password`	Reset Password
`customer__login`	Customer Login
`customer__details`	Customer Creation
`customer__address`	Customer Edition
`customer__account`	Customer Account
`contactpage`	Contact
`checkout__success`	Success
`checkout__revieworder`	Review Order
`checkout__checkout`	Checkout Form
`checkout__cart`	Cart
`page`	Custom Pages
`product`	Product Details
`category`	Products by Category

Partials

A partial is a named block of liquid code living in its own file that can be reused many times from templates, components, or other 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 use a partial in a component or template (or in another partial) use the render tag:

{% render 'partial-name' %} Note that the .liquid extension is omitted.

To see how this works, let’s say the following is the content of partial numbers.liquid:

name: {{name}}
stock: {{stock}}
description: '{{description}}'

This partial is expecting to be able to read three variables: name, stock, description, printing each on separate lines. To pass variables from the current liquid file into this partial, you may pass them as named arguments within the render tag. For example:

{% capture description %}A great product{% endcapture %}
{% render 'numbers', name: 'Shoes', stock: product.stock, description: description %}

If the product’s stock - read from product.stock - is 15 units, then the output will be:

name: Shoes
stock: 15
description: 'A great product'

With the render tag, the rendered partial will be provided access only to the global variables available for the current template and component alongside the arguments specified in the tag. This means that if the description variable was mistakenly not specified as an argument in the render tag, as in the following example:

{% capture description %}A great product{% endcapture %}
{% render 'numbers', name: 'Shoes', stock: product.stock %}

then the rendered partial would not receive the contents of the description variable. This would lead to the following output as the variable is not defined:

name: Shoes
stock: 15
description: ''

The deprecated include tag is an old alternative to the render tag that does not isolate the variables of the including file from the included partial. Use of this tag is strongly discouraged and it is being discontinued from Jumpseller themes.

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. Example: fa-solid fa-check to be used like <i class="fa-solid fa-check"></i>.
name The Theme Option’s name displayed at the Admin Panel.
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).
type Defines the Option Type. Accepted values are: input, text, checkbox, select, file, color, category, link.

Type	Description
`category`	Display a select field with all Store’s categories. On liquid it prints the category permalink.
`checkbox`	Checkbox field who returns true or false.
`color`	Displays a color picker selector.
`file`	To upload files. Supports every type of files and max 2MB of size.
`google_font`	Display a select field with all Google Fonts.
`icon`	Display a select field with all solid and brands icons from Font Awesome. On liquid it prints the CSS class of the icon.
`image`	To upload images. Supports jpg jpeg gif png svg bmp jfif ico webp icon x-icon files and max 2MB of size.
`input`	Input field to insert short texts.
`link`	Display a select field with all links it the Store, like products, categories and pages. Also is possible to select an external link.
`page`	Display a select field with all Store’s pages. On liquid it prints the page permalink.
`ph_icon`	Display a select field with all icons from Phosphor Icons. On liquid it prints the CSS class of the icon.
`product`	Display a select field with all Store’s products. On liquid it prints the product permalink.
`select`	List of options in a select field. It is made up of the label and the value that is printed in liquid.
`slider`	Displays a slider field with a minimum and maximum range values to choose in between, it’s a liquid integer type. You can set the value’s unit for example px, em, rem, %. The unit is just for display, the result is a number.
`text`	Textarea field to insert large texts.
`video`	Input field to insert a video link. Only accepts YouTube and Vimeo links.

Components

Components are dynamic theme options that can be displayed on multiple layouts of themesEach components is composed with a liquid partial with his own JSON file, p.e. banner.liquid and banner.json. The JSON file uses the same structure as common theme options but features some additional functionalities.

JSON file (banners.json):

{
  "name": "Banners",
  "icon": "image",
  "max_usage": 5,
  "templates_in": [ "home", "contactpage", "product", "error", "category", "page" ],
  "options": {
    "title": {
      "name": "Title",
      "type": "input",
      "default": "Banners"
    }
  },
  "properties": {
    "banners": {
      "type": "banner",
      "multiple": true
    },
    "logo": {
      "type": "logo",
      "multiple": false
    }
  },
}

The main differences in this structure while comparing to the one of the theme options are the following:

max_usage which defines the maximum number of times the component can be used per page. This empty field means that the component can be used without limitations.
templates_in contain an array of templates where the component can be used. Examples are “contactpage” and “home”. An empty array means that the component cannot be used directly in a template.
properties is the field that will allow you to add subcomponents (see next topic). This field has its own structure that can be summarized as:
```
{
"banners": {
  "type": "banner",
  "multiple": true
},
"logo": {
  "type": "logo",
  "multiple": false
},
}
```
In this structure we have 3 important fields:
- key which can take the value of any (unique) string and is the key to a certain set of subcomponents. “banners” and “logo” are two examples of valid keys.
- type defines the type of components that can be added to this group. The type has to be the exact code of a component previously installed in the theme. “banner” and “logo” are two examples of a valid type.
- multiple defines whether it is a set of components or a single component. In this case, “banners” will point to a group of components, while “logo” will point to a single component.

Partial file (banners.liquid):

<div id="{{component.id}}">
  <h1>{{component.options.title}}</h1>
  {% for banner in component.subcomponnets.banners %}
    {% include 'components/banner', banner: banner %}
  {% endfor %}

  <p>
    Powered by:
    <img
      src="{{component.subcomponnets.logo.options.image}}"
      alt="{{component.subcomponnets.logo.optionsdescription}}"
    />
  </p>
</div>

Some expressions that are important to highlight:

{{component.id}} Component unique identifier.
{{component.options.title}} For call an specific option of a specific component.
{{component.subcomponents.banners}} For acessing a subcomponents group.
{{index_for_components}} Paste this tag in the layout you wanna add components. Currently, the templates that support components are: “home”, “contactpage”, “error” and “product”.

Subcomponents

To avoid repeating HTML code and even properties in a json, properties were implemented, which were discussed above. In practice, these properties will be represented by subcomponents.

Subcomponents are, in fact, components that will be placed inside other components.

Considering the structure of the banners.json, it is possible to access the subcomponents (within the liquid of the “parent” component) as follows:

{{ component.subcomponents.banners | first }} to access the first banner of the group defined by banners

{{ component.subcomponents.logo }} to access the only logo of the group defined by logo

Rendering Subcomponents

Components can be rendered directly through the parent component’s liquid, just as if they were component options. Assuming that the component of type logo has a property of type file called image and given the structure presented above, it is possible to render the subcomponent as follows:

<img src=”{{ component.subcomponents.logo.options.image }}” />

To simplify the parent component’s liquid file and to make it easier to reuse code, it is possible to include the subcomponent’s liquid file, as showed here:

{% include 'components/logo', logo: component.subcomponents.logo %}

Based on this example, inside the file components/logo.liquid it is possible to access the logo options like this:

{{ logo.options.image }}

It’s also possible to access the parent component’s options In the following way:

{{ component.options.title }}

Cross selling

Cross selling is a functionality that allows you to display related products automatically or manually, which is integrated into the cart page. In the partial section there is a file called cross_selling_cart.liquid.

{{ cross_selling.products_count }} Number of products inside Cross Selling collection.
{{ cross_selling.products }} Products inside Cross Selling collection. Use the products liquid tags to handle them.

{% unless cross_selling.products_count == 0 %}
<div id="cross-selling-products">
  {% for cs_product in cross_selling.products %}
  <div>
    <a href="{{cs_product.url}}">
      {% if cs_product.variant.image != blank %}
      <img src="{{cs_product.variant.image}}" alt="{{cs_product.name}}" />
      {% elsif cs_product.images != empty %}
      <img src="{{cs_product.images.first}}" alt="{{cs_product.name }}"/>
      {% else %}
      <span>There is no product's image available.</span>
      {% endif %}
    </a>
    <h3>{{ cs_product.name}}</h3>
    {% if cs_product.variant != blank %}
    {% for variant_value in cs_product.variant.values %}
    <span class="d-block text-muted">
      {{variant_value.option.name}}: {{variant_value.name }}
    </span>
    {% endfor %}
    {% endif %}
    {% if options.hide_price != true %}
    <div class="list-price">
      {% if cs_product.discount > 0 %}
        {% if cs_product.variant != blank %}
          <span class="price-normal">{{ cs_product.variant.price | minus:cs_product.discount | price }}</span>
          <span class="price-discounted">{{ cs_product.variant.price | price }}</span>
        {% else %}
          <span class="price-normal">{{ cs_product.price | minus:cs_product.discount | price }}</span>
          <span class="price-discounted">{{ cs_product.price | price }}</span>
        {% endif %}
      {% else %}
        {% if cs_product.variant != blank %}
          <span class="price-normal">{{cs_product.variant.price | price }}</span>
        {% else %}
          <span class="price-normal">{{ cs_product.price | price }}</span>
        {% endif %}
      {% endif %}
    </div>
    {% endif %}
    <form id="{{cs_product.id}}" action="{% if cs_product.variant != blank %}{{cs_product.variant.add_to_cart_url}}{% else %}{{cs_product.add_to_cart_url}}{% endif %}" method="post" enctype="multipart/form-data" name="buy">
      <button type="submit" value="Add to Cart">Add to Cart</button>
    </form>
  </div>
  {% endfor %}
</div>
{% endunless %}

Bought Together

Bought Together only works for Advanced and Enterprise plans. Display packs of frequently bought together products on the product page. In the partial section there is a file called bought_together.liquid.

{{ bought_together.pack_count }} Number of packs in Bought Together collection.
{{ bought_together.packs_stock? }} Checks if exists at least one pack with all products available and with stock.
{{ bought_together.packs_discount? }} Checks if exists at least one pack that has a discount (and the pack is available and has stock).
{{ bought_together.packs }} Packs inside Bought Together collection. Returns an array with Bought Together Packs collection.

Using pack as an example of an item inside the {{ bought_together.packs }} packs array:

{{ pack.product_count }} Number of products in the pack.
{{ pack.products }} Products in the pack. Use the products liquid tags to handle them.
{{ pack.stock? }} Checks if all products are available and with stock.
{{ pack.discount? }} Checks if the pack has a discount (and is available and has stock).
{{ pack.pack_price }} Combined price of the pack. Doesn’t include the current product price nor any possible discount.
{{ pack.pack_discount }} Combined discount of the pack. Doesn’t include the current product discount.

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.