Template
Website Templates
Website templates can be found under settings -> web.
We use the liquid templating language on top of HTML, JS and CSS to safely customise your 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
<div class="container tenant">
<div class="row">
<div class="col-md-8">
<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 }}">
<img class="img-responsive" style="background-image: url({{ tag.image }})"/>
{% 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">
<img class="img-square" style="background-image: url({{ item.image }})"/>
<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">
<img class="img-square" style="background-image: url({{ item.image }})"/>
<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 class="col-md-3 col-md-offset-1 hidden-mobile">
<div class="row form-login">
<div class="col-xs-12">
{% login_form %}
</div>
</div>
<div class="row order-summary">
<div class="col-xs-12">
{% shopping_cart %}
</div>
</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 %}
<span class="btn btn-block">Order is empty</span>
{% endunless %}
</div>
</div>
</div>
</div>Item Show
<div class="container tenant item-show">
<div class="row">
<div class="col-md-8">
<div class="row hidden-embed-mobile">
<div class="col-xs-12">
<h1>{{ item.name }}</h1>
</div>
</div>
<div class="row">
<img src={{item.image}} class="'img-responsive visible-embed-mobile" />
<div class="col-md-5">
<img src={{item.image}} class="'img-responsive hidden-embed-mobile" />
<p class="m-t m-b">{{ item.description | markdownify }}</p>
</div>
<div class="col-md-5">
{% item_form %}
</div>
</div>
</div>
<div class="col-md-3 col-md-offset-1 hidden-mobile">
<div class="row form-login">
<div class="col-xs-12">
{% login_form %}
</div>
</div>
<div class="row order-summary">
<div class="col-xs-12">
{% shopping_cart %}
</div>
</div>
</div>
</div>
</div>Shopping Cart
<h2>
Order
</h2>
{% store_selector %}
{% address_selector %}
{% if order.empty %}
<p>Add some items</p>
{% else %}
{% for item in order.order_items %}
<div id="order_item_{{ item.id }}" class="order-item d-flex flex-row justify-content-between">
<div class="d-flex flex-column">
<div>
<span class="item-quantity">
{{ item.quantity }} x
</span>
{{ item.name }}
</div>
<div class="description">
<small>{{ item.description }}</small>
<div class="actions">
{{ item | link_to_remove_item: 'Remove', class: 'btn btn-sm btn-link' }}
{{ item | link_to_edit_item: 'Change', class: 'btn btn-sm btn-link' }}
</div>
</div>
</div>
<div class="text-right">
{{ item.total | money }}
</div>
</div>
{% endfor %}
{% for item in order.order_fees %}
<div id="order_fee_{{ item.id }}" class="order-fee d-flex flex-row justify-content-between">
<div class="d-flex flex-column">
<div>
<b>{{ item.name }}</b>
</div>
</div>
<div class="text-right">
{{ item.total | money }}
</div>
</div>
{% endfor %}
<hr>
<div>
Total: <span class="pull-right" id="order_total">{{ order.total | money }}</span>
</div>
<hr>
{{ order | link_to_checkout: 'Order', class: 'btn btn-primary btn-block m-t-md' }}
{% endif %}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