FREE Shopify food ordering theme

A free theme to help pubs and restaurants affected by COVID-19 process takeaway orders online through Shopify*.

With just a couple of hours' effort, you will be able to set up a fully functioning online ordering service allowing you to advertise your menu and take online payments.

We developed this simple theme for a local pub who are now using it successfully to manage their takeaway business during the current lockdown. We are making it freely-available to anyone who wants to use Shopify to set up online ordering for takeaways. We've provided some instructions below to help anyone get started.

A live website powered by this theme can be seen here: https://mended-drum.myshopify.com/

Download themeDownload sample data


* Shopify is currently offering a 90-day free trial to help businesses affected by Covid-19.

Key features

  • Manage a menu of up to 100s of products
  • Create menu sections (e.g. 'Starters', 'Mains' etc.)
  • Set delivery charges (including free delivery over a certain order value)
  • Delivery slot management
  • Collect special requests on dishes
  • Mobile-friendly design
  • Payments on credit card, Apple Pay and Google Pay (via Shopify payments)
  • Quick add-to-cart
  • Sell non-food items (e.g. tickets to events such as remote pub quizzes)
  • Pub-style blackboard design
  • Add your own logo, colours

Set up a Shopify account

Shopify is an easy-to-use ecommerce platform allowing business of all sizes to set up online stores quickly and easily. Shopify are currently offering a 90-day free trial which you can sign up for here.

What will it cost?

Once the free trial is over, Shopify plans start at £29/$29 per month. In addition you will pay 2% + 20p on each transaction to cover card fees etc. (this applies during the free trial). So, on a £50 order you will pay £1.20 (fees vary slightly on a per-country basis).

How to manage the site

Adding products

Product listing showing name, price, description, special request capture and variants

Products consist of:

  • Name (required)
  • Description (optional)
  • Image (optional - used on basket, checkout and emails)
  • Variants - (optional) for setting product options, e.g. offering a dish with chips and charging more
  • Product type - helpful for organising products into categories and also used for delivery slots.
  • Stock levels - if you want to manage this
  • Tags - we only use one tag, 'specialrequest' - used to determine whether a product will show the 'special requests

Below we show you how to manage your products. In order to give you a jump start, you can download some sample products from the Mended Drum menu here: .

Import your sample products

Click 'products' in the Shopify admin, then click the small 'Import' link at the top of the page:

Click 'Import'

Select the 'Sample takeaway products.csv' file provided and upload it by clicking 'upload and continue':

You'll get a confirmation which should look something like this. Click 'import products' to continue:

Your products should now be in there:

The burger products included in the sample data demonstrate all the features you can add to products: name, description, price, special requests and product variants (to charge more to include side dishes). Click on one to review how it's set up.

Creating a product

Click the 'Add product' button on the products screen to get going:

It's there on the right hand side

You will then be able to set your product up:

Setting name and description - dead simple

Add an optional image for use on basket, checkout and order emails

Add variants to manage different versions of dishes with different prices (and, optionally, stock levels if you only have limited numbers of each dish)

Set product type and add tags

Group products by using the 'Product type' feature. Use whichever terms you like, but make sure all related products have the same type. We'll use this to create your menu sections further down. Add the 'specialrequest' tag to enable the 'special request' feature on individual dishes.

Adding collections / menu sections

You may create collections (categories) to group items in your menu - e.g. starters, mains etc. Create collections by going to 'Products > Collections' in the Shopify admin screens.

Collection with heading (we'll set those up later) and products

Collections consist of:

  • Name
  • Rules to define which products belong in the collection

In the 'title' field enter the collection name. This will not get displayed on the front end of the site, but make sure it's descriptive so that you understand what the collection is when viewing it in the Shopify admin.

Setting collection rules

Create a rule to assign products to the collection. Follow the example below under the 'conditions' heading. In this example, the collection will contain all products that have the product type 'Gourmet burgers' (as per the sample product data). As you create new products with the type 'Gourmet burgers', they will automatically be added to this collection.

Collection conditions and sorting

You can also set the sort order of products, by setting the 'sort' to 'Manually' and clicking and dragging products into the order you wish them to appear in your menu:

Manually sorting products

That's it! Create all the collections you need and we'll build the menu page next.

Delivery slot booking

The theme allows you to request that the customer specifies a delivery/collection slot. If you do not wish to offer this you can skip this section. This can be useful if you want to restrict the amount of available slots in a given time period - e.g. 10 orders per half hour. The site can be set to not let users proceed to checkout without first selecting a slot.

Specify a delivery/collection slot

To set up delivery slot booking, create a product with the product type 'Delivery slot':

Create delivery slot product

Your actual delivery slots will exist as variants of this product, so first check the 'This products has variants' box:

Then create the slots themselves. For our site, we created two options, 'Date' and 'Time'. Into each we entered each possible option. Shopify will then create combinations for you (e.g. Friday 17th April, 4:30pm):

Creating date/time options

If you want to restrict the amount of each slot that's available, add a quantity against each:

Limiting the availability of slots

Save the product. Next, create a collection to hold this product - set it to include only products that have the type 'Delivery product':

Creating the delivery slot collection

Create your menu page

Now we've created products and collections, it's time to add them to the menu page. First, we need to add the Takeaway theme to your store. Go to 'Online Store > Themes':

Click 'Upload theme' and select the theme ZIP file (which you can download from here if you haven't already).

Wait for it to install, then click 'Customize' once it's there:

Click 'customize' next to the theme name

The homepage editing screen will appear:

In the main area of the screen is a preview of what your page will look like. If you scroll down you'll see lots of placeholders where your dishes are going to be once you link it all up. Down the left hand side are all the page sections. We've left ours in as examples, but you'll need to edit them to get them to work with yours.

On the left hand side you will see a list of the page contents. To begin with, we've left our menu sections in there to get you started. At the moment they will not show actual products as they will not be linked to your categories. We'll do that shortly.

Detail of the page management panel

The management panel on the left hand side lets you control the display of your menu. You'll see in it the following options:

  • Header - use this to control the header at the top of the page - you can add your logo here if you wish
  • Slideshow - this is the large image area at the top of the page. You can add photos and descriptions of your menu in here
  • Rich text - use this to add some introductory/explanatory text
  • Below these are the actual sections of your menu -more of this in a sec
  • At the very bottom is the 'review your order' button which takes users to the checkout - LEAVE THIS IN PLACE! =)

You can move the panels around by clicking and dragging them using the 'handle' - the small icon comprising 6 dots.

You can hide panels by clicking the 'eye' icon.

You can also select 'Theme settings' at the top of the panel to change the colours and fonts on your site.

Play around with the above to get comfortable. As you edit, the page on the right hand side will update as you go.

Add your dishes to the menu

To link up the collections of dishes you created earlier, select the 'Gourmet burgers' menu section, and you'll see something like this:

You can set:

  • Name - this is just a label to help you organise the page in the Shopify admin - this does not get displayed to the users
  • Heading line 1 & 2 - set one, either or both of these to add the section heading
  • Description - add an optional description if you so wish

To get the products in there, we'll need to link it up to a collection. Click the 'select collection' button to choose a collection to display:

Select your collection

The main display area should now update and your products should be visible:

Done!

You can go ahead and create/edit/update the other menu sections. If you want to add a new one use the 'add section' link at the bottom of the list:

Add section

Then select 'Featured collection' from the next screen and set it up as per the steps above:

Once set up, your new section will be added to the bottom of the list - be sure to move it above the 'Review your order' and 'Pick a slot' sections by clicking and dragging it up the list:

We're not far off now. If you want to manage delivery/collection slots, we'll just need to add that to the menu too. If you don't, be sure to switch off the 'Review your order' section on the menu page.

Adding delivery/collection slots to your menu page

We need to wire up the delivery/collection category we created earlier. To do so, fins the 'Pick a slot' panel and link it to the category:

Once you link it up it should display differently and look how we want it to:

Make sure the 'pick a slot' section is below all the other menu sections, just above the 'review your order' section.

Finally, if you want to ensure users have to pick a slot before checking out, you can do so in 'Theme settings'. Note: this check is on by default so if you do not wish to force users to choose a slot, you'll need to turn this off:

Click 'Slot booking'

Check/uncheck the button, then click 'Save' in the top right hand side of the screen:

Sign up to accept credit and debit cards

In order to accept card payments you'll need to sign up to Shopify Payments. Go to 'Setting > Payment providers' in the admin and follow the sign up process:

Settings link is in the bottom left

Delivery settings

Also in the 'Settings' section you can set up your delivery charges and options. Click 'Shipping' and go into the setup screen:

Shipping/delivery settings

Once there, click 'Manage rates' in the top right and scroll down to the 'Shipping to' section:

You can then click the 'add rate' button to add shipping charges. For our store, we added the following:

In this way we can offer free collection. We can also offer free delivery for those customers spending over £10 (though you can set this to whichever level you want). We also named the rates to make it clear where we deliver to.

Publishing the theme

Your store will be viewable on a web address along the lines of yourname.myshopify.com. If you view it right now it won't look right because the theme we've set up is not yet published - it's using the default theme that comes with Shopify. In order to make our theme live, go to 'Online store > Themes'. Find our theme in the 'Theme library' section, click the 'Actions' link and select 'Publish'.

Voila! Your site should now be live and ready to take orders.

Other resources

The above guide covers everything specific to our theme. Beyond this, operating your store, managing products etc. uses standard Shopify functionality. Instructions of how to do this are covered in Shopify's excellent tutorials: https://help.shopify.com/en. Some areas of specific interest:

  • Managing orders: https://help.shopify.com/en
  • Add a domain: https://help.shopify.com/en/manual/domains/add-a-domain/using-existing-domains/connecting-domains. Shopify will work perfectly fine on the *.myshopify.com address, but you may wish to point your own domain at it. Do be aware that if you have an existing website on a domain, you cannot use this same domain for your Shopify store. Instead, you may wish to setup a subdomain: so if your main site is at www.pubname.co.uk, you could set up takeaway.pubname.co.uk for your Shopify site. See your domain provider's help section for details on how to set up a subdomain.

Support

The theme is provided as-is. We can't promise to provide free support for specific cases, but please add comments below: we'll try to support where we can and would love to hear if you've used this theme.

Disclaimer

We should point out that this theme was developed by Chris (co-founder) without the involvement of the Onstate dev and design teams. So for the technically-minded of you out there please be aware that the code is therefore hardly what you'd call best practice and well-formed, but it works, alright? ;)