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.

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.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.
{{products.categories}}	Array containing the categories assigned to the product.
{{product.name}}	Product name
{{product.id}}	Product unique identifier.
{{product.permalink}}	Product other unique identifier. Same as in the product's URL
{{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 (example: size, color).

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.

{{variant.price}}	Product Variant Price
{{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 (Example: Red x Large, or Yellow x Small)

Example Code to present a Select with a Label with the Product Option (example: 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 %}

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.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.url}}	Cart url
{{order.date}}	Order date
{{order.products}}	Collection of products in the order
{{order.update_url}}	Link to update ordered quantities.
{{order.shipping}}	Shipping value for the given order.
{{order.tax}}	Tax value for the given order.
{{order.subtotal}}	Subtotal for the given order.
{{order.total}}	Total for the given order.
{{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.client.email}}	E-mail of the client that made the order.
{{order.client.phone}}	Phone of the client that made the order.
{{order.payment_method}}	Payment method 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)

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. p.e. a category page
{{breadcrumb.text}}	The name of the breadcrumb. p.e. 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

{{ language.name }}	Returns the language name.
{{ language.url }}	Returns the url to switch do the chosen language.
{{ “string of text” \| t }}	Returns the “string of text” translated in the current language.

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

Contact Page

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

Special Variables

{{ ‘example_image.jpg’ \| asset }}	Returns one of the files included in the theme (eg: stylesheets, images, javascript).
{{ ‘Intro Text’ \| text }}	Theme text option.
{{ ‘Custom Color’ \| color }}	Theme color option.
{{ ‘Headline’ \| input }}	Theme input option.
{{ image \| resize: ’10×10′ }}	Resizes an images (in this case to a 10×10 size).
{{ image \| thumb: ’20×20′ }}	Creates a thumb of the image (in this case to a 20×20 size).
{{ 123 \| 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=''{{"example_image.jpg" | asset }}' />

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

If you still have troubles please contact us.

{{category.name}}	Category name.
{{category.url}}	Category URL.
{{category.id}}	Unique category identifier.
{{category.products}}	Collection of products from the given category.
{{category.subcategories}}	Collection of subcategories.
{{category.sorting_options}}	Sorting options for the category: Name, Price: Low to High, Price: High to Low.
{{category.pager}}	Returns a pager in html for the category products.