Creating a Custom HTML Theme

With a JumpSeller Plus Plan you can fully customize the appearance of your shop by editing the HTML code

To start, go to the Settings section and click on Themes on the right side column. You should then see a button called 'Enable Custom HTML', when you click it you will get an editor with your current theme HTML code.

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

Introduction

JumpSeller uses liquid as its template language. 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>

Variables

Store

{{store.name}} Store name.
{{store.url}} Store url.
{{store.current_url}} Store's current url.
{{store.logo}} Store logo.
{{store.description}} Store description.
{{store.currency}} Store currency.

Product

{{products}} Products collection.
{{products.featured}} Featured Products collection.
{{products.latest}} Latest Products collection.
{{product.name}} Product name
{{product.id}} Product unique identifier. Number.
{{product.permalink}} Product other unique identifier. Matches the URL, e.g. http://www.mystore.com/current-product-id.
{{product.description}} Product description
{{product.price}} Product price
{{product.discount}}Product discount. Use {{product.price | minus:product.discount}} for price with discount
{{product.status}}Product status
{{product.featured}} Returns true if product is featured
{{product.sku}} Product sku
{{product.stock}} Product stock quantity
{{product.url}} Url for product page
{{product.stock}} Product Stock
{{product.stock_unlimited}} Product Stock Unlimited (Boolean)
{{product.add_to_cart_url}} Add to cart url for the given product.
{{product.images}} Collection of images of 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.
{{product.fields}} Collection of Custom Fields of a Product
{{product.categories}} Array containing the categories assigned to the given product.
{{product.add_to_cart_url}} Link to Add to Cart the given product.

Product Options

{{option.name}} Product Option Name
{{option.values}} Collection of Attributes (ex: Blue, Red) for the given Product Option (ex: Color)
{{value.id}} Value Id

Product Variants

A Product Variant is defined by a group of Product Options Attributes, so as an example, a product (t-shirt) with two options: Color with the attributes Red and Yellow, Size with the attributes 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.price}} Product Variant Price
{{variant.discount}} Product Variant Discount
{{variant.sku}} Product Variant Sku
{{variant.stock}} Product Variant Stock
{{variant.stock_unlimited}} Product Variant Stock Unlimited (Boolean)
{{variant.values}} Collection of Product Options Attributes (e.g. Red x Large, or Yellow x Small)
{{variant.add_to_cart_url}} Link to Add to Cart the given product's variant.

Example Code to present a Select with a Label with the Product Option (e.g. Size) and the different Values (ex: 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.name}}">
     {{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.value }} Input, select option or text area value of the Custom Field.

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

Cart

{{ cart.products }} Products in cart.
{{ cart.products_count }} Number of products in cart
{{ cart.subtotal }} Subtotal price of the products in the cart.
{{ cart.tax }} Price of county taxes.
{{ cart.shipping }} Price of shipping taxes.
{{ cart.total }} Total price of the cart, including country and shipping taxes.
{{ estimate_form }} The estimate shipping form.

Pages

{{page.title}} Page title.
{{page.id}} Page unique identifier. Matches the URL, e.g. http://www.mystore.com/current-page-id.
{{page.url}} Page URL.
{{page.body}} Page body content.
{{page.date}} Page creation date.
{{page.category}} Returns the Page Category from this page.

{{pagecategories}} Returns all Page Categories.

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

Order

{{order.id}} Order id (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 items for the given order.
{{order.shipping}} Shipping value for the given order.
{{order.tax}} Tax value for the given order.
{{order.subtotal}} Subtotal for the given order.
{{order.discount}} Discount for the given order.
{{order.total}} Total for the given order.
{{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.formated}} Formated address.
{{order.billing_address.name}} Name in the billing address.
{{order.billing_address.formated}} 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 (eg: paypal_express, webpay).
{{order.payment_method}} Payment method name used (eg: Paypal).
{{order.payment_information}} Payment information for the chosen payment method.
{{order.additional_information}} Additional information for your order.
{{order.shipping_method}} Shipping method (eg: Royal Mail)
{{order.url}} Cart Page URL for the given Order.
{{order.update_url}} Link to update ordered quantities.
{{order.checkout_url}} Checkout Page URL for the given Order.
{{order.place_order_url}} Link to Place Order action for the given Order.

Promotions and Discounts

{{coupon_form}} Outputs the coupon code form.
{{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.

{{ search.pager }} Navigation pager of search results.

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

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.

{% 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 wtih:

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

Special Variables

{{ 'image_file.jpg' | asset }} Returns one of the files included in the theme (eg: stylesheets, images, javascript). Always use the asset tag instead of direct links.
{{ 'Intro Text' | text }} Theme text option.
{{ 'Headline' | input }} Theme input option.
{{ template }} Current Theme Block's name used. e.g: layout, home, category
{{ 'Custom Color' | color }} Theme color option.
{{ 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.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.
```
<link rel="stylesheet" type="text/css" href='{{ "grid.css" | asset }}' />
<img src='{{ "image_file.jpg" | asset }}' />  
```

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 visit first our community forum and, if not enough, contact us.

Go to Top

Creating a Custom HTML Theme

Variables

Resources