BETA

Website Templates

Beta website templates can be found under integrations -> web.

We use the liquid templating language on top of HTML, JS and CSS to safely customise you online ordering website.

There a currently limited pages that can be edited in this way.

The ordering index /order, and the item page /order/item-name, there’s also a snippet template for the shopping cart which is used on both pages

Default Template

This template matches the standard setup and provides a good place to start your modifications

Item Index



Item Show



Shopping Cart



Example Template

Remove the right hand menu and use the mobile footer for the cart.

Item Index:

<div class="container tenant">
  <div class="row">

    <div class="col-md-12">

      <div class="row">
        <ul class="nav nav-tabs" role="tablist">
          {% for tag in menu.tags %}


          <li role="presentation" class="{% if forloop.first %}active{% endif %}">
            <a href="#{{ tag.slug }}" aria-controls="{{ tag.slug }}" role="tab" data-toggle="tab">{{ tag.name }}</a>
          </li>

          {% endfor %}
        </ul>
      </div>

      <div class="tab-content">

        {% for tag in menu.tags %}
        <div role="tabpanel" class="tab-pane {% if forloop.first %}active{% endif %}" id="{{ tag.slug }}">
          {% for subtag in tag.tags %}
          <div class="row tag">
            <div class="col-xs-12">
              <h2>{{ subtag.name }}</h2>
              <hr>
            </div>
          </div>
          <div class="row tag-row">
            {% for item in subtag.items %}
            <a href="{{embed}}{{item.path}}" class="col-md-3 col-sm-4 col-xs-6 m-t-sm item">

              <div class="details">
                <p class="item-price">{{ item.price }}</p>
                <p class="item-name">{{ item.name }}</p>

              </div>
              <p class="item-description">{{ item.description }}</p>
            </a>
            {% endfor %}
          </div>
          {% endfor %}
          <div class="row m-t-sm tag">
            {% for item in tag.items %}
            <a href="{{embed}}{{item.path}}" class="col-md-3 col-sm-4 col-xs-6 m-t-sm item">
              <div class="details">
                <p class="item-price">{{ item.price }}</p>
                <p class="item-name">{{ item.name }}</p>

              </div>
              <p class="item-description">{{ item.description }}</p>
            </a>
            {% endfor %}
          </div>
        </div>
        {% endfor %}
      </div>

    </div>

  </div>
</div>

<div class="tenant">
  <div class="fixed-bottom">
    <div class="container">
      <div class='cart'>
        {% unless order.empty %}
          <span class="pull-right">
            {{ order | link_to_checkout: 'Checkout', class: 'btn btn-primary' }}
          </span>
          <div class="btn" style='display: inline-block'>
            Total: ${{ order.total }}
          </div>
        {% else %}
          {% if user.last_order %}
            {% load_last_order_button %}
          {% else %}
            <span class="btn btn-block">Order is empty</span>
          {% endif %}
        {% endunless %}
      </div>
    </div>
  </div>
</div>

Item Show:

<div class="container tenant">
  <div class="row">

    <div class="col-md-12">

      <h1>{{ item.name }}</h1>
      <p>
        {{item.description}}
      </p>

      {% item_form %}

    </div>

  </div>
</div>

In Development

We are currently working on a way for the entire ordering website to be customisable.

Ready to get started? Get in touch.

Contact