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