Let us Build a Digital Menu App for a Restaurant

In this guide, we will walk through building a restaurant menu app from Google Slides. It's quick and easy to do. Let's get started.

A menu in a website is either in a PDF document or a fixed menu that requires technical help to modify. This reduces the possibility of quick updates and highlighting a dish such as a day's special. Poexis offers a quick and easy-to-maintain menu app, which can be created and modified using Google Slides.

Difficult to follow?

This guide is written to highlight only the steps involved in building a menu app. If you want more detailed explanations, or if any step is confusing, refer to the following guide for help.

pageBeginners Guide - Menu Template

Getting Started

It's straightforward and simple,

  • Navigate to 'My Templates'.

  • Find out the 'Menu' template.

  • Click 'Create'.

  • Click 'Make a Copy'.

Editing the Template

You can use the logo and other files in this folder.

Assets folder in Google Drive: Click Here!

Title Slide

  • App Name: Click and add an app name

  • Logo: Insert > Image > [Logo file from the assets folder]

  • Change Primary Color: Right Click > Change Background > [Add the color given below]

(Click the Copy icon at the right end of the box.)

#db3d3d

Read More on Title Slide layout.

The edited slide will be as shown below,

The Menu is used for navigation within the app. To access various sections of your app, you should link each section to a menu entry. Add an entry as you make every section.

More on Menu layout

Sections and Section Header

Section Header is used to group and arrange elements into sections. Section Header will be automatically linked to the next slide in the slide deck.

In the template, you will find a Section Header slide just after the 'Menu' slide.

  • Edit the slide and add the title as 'Home'.

Linking to Menu

Now link a menu entry to this Section Header,

  • Add the text 'Home', in the Menu slide.

  • Select the text > Right Click > Link.

  • Select the Section Header slide 'Home' (You may have to go into the 'Slides in this presentation' menu in the link panel).

If you use the same text in Menu and Section Header, Google Slides will automatically suggest the destination slide, when you try to add a hyperlink to the menu entry.

Content Area and Adding Elements

Content Area slide is under Section Header slide, therefore it is linked to 'Home' section. 'Content Area' layout keeps the vertical order. It means if the image is above the text, it will be reproduced as such in the app. From the assets folder,

  • Add the PNG file 'Home-Page@2x.png' to this slide.

Add a text box under the image, and fill the text given below (How?) (Click the 'Copy' icon at the right end of the code block).

At Rice Bowl we create light and healthy food, combining inspiration from home made meal and exciting modern flair. With influences ranging from the simple western cuisine to the exotic Asian spices, you’ll find a nostalgic collection of comforts, classics and curiosities with a modern twist.

Defining the Home Screen

The 'Home' screen is the first screen that a user will see when the app is opened. To define the home section, add the 'Home' sticker to the first content layout in that section. Paste the Home sticker,

  • Go to the slide with the Rice Bowl logo and text.

  • Open Poexis Creator: Add-ons > Poexis > Creator.

  • Click: General > Home > Paste the Sticker.

Refer a the GIF on this page if you run into any issues.

Two things need to be ensured,

  • The 'Home' sticker needs to be placed in the first content layout slide, not in the Section Header slide.

  • Every slide deck must have a home section defined before publishing the app.

Adding Elements

Creating and Linking a New Slide

To add a new slide,

  • Slide > New Slide, or Ctrl+M (In both Mac and PC).

  • Make sure the new slide has 'Content Area' as layout. If not change it by clicking 'Layouts' in the toolbar and select the 'Content Area' layout. (Another way is Slide > Apply Layout > [Select Layout]). (Layouts)

We want the new slide to be part of the Home section. For this, a Scroll Sticker is used,

  • In Poexis Creator: General > Scroll > Paste Sticker.

Note that you have to paste the scroll sticker in EVERY content slide after the section header.

  • Paste a scroll sticker also in the previous slide. (You can also copy and paste the stickers to another slide).

Creating Buttons

To add a button all you have to do is draw a rectangle and add text, (Issues? Look in Buttons)

  • Click the Shape icon in the toolbar > Shapes > Rectangle > [Draw a rectangle] (Also available at Insert > Shape > Shapes > Rectangle).

  • To add a button label click the rectangle and type the text.

  • Draw three rectangles and arrange them vertically. Add labels as Appetizers, Main Course, and Desserts.

The buttons need to be linked to the respective sections. That will be done after we finish building the sections.

If you want to align a button to the center of the screen in the final app, just center align the text inside the rectangle in Google Slides

Creating Sections

To add a section,

  • Add a new slide and change the layout to Section Header.

  • Change the title of the new section to 'Appetizers'.

  • Create a menu entry, say 'Appetizers', and link it to the Appetizers section.

  • Add a Content Area slide after the section header.

To add content to this slide, we will use the List Sticker.

List Sticker

This sticker allows you to add content to a spreadsheet and link it to the slides. While publishing the app, Poexis will fetch the content from the spreadsheet and arrange the content according to the specified settings,

Let's make a spreadsheet,

You can add or modify the content. More on List sticker.

After that share the spreadsheet with our Digital Assistant, Leo DaVinci

  • Click on the 'Share' Button at the top right of the spreadsheet.

  • Add the email id of DaVinci and click 'Send'.

davinci@poexis.com

Copy the link to this spreadsheet,

  • Click the 'Share' button again.

  • Click 'Copy Link' in the 'Get Link' dialogue box.

Back in the slides, under the newly created 'Appetizers' section, but in the Content Area slide,

  • Poexis Creator > General > List.

  • Paste the link you copied from Spreadsheet to the 'Sheet URL' field.

  • In the 'Sheets Name' field enter "Appetizers" (without quotes), which is the sheet with the data.

You can use the same spreadsheet document for different list stickers. You just have to use different sheets inside the document.

  • Create a new Section Header called "Main Course" and add a Content Area slide.

  • Poexis > Creator > General > List

  • Enter the same URL, but "Main" in the 'Sheet Name' field.

Using Template Specific Layouts

Every Poexis template contains layouts specific to that template. The Menu template has two of them.

  • Create a new Section Header slide and add the title as "Desserts" and add a slide after it.

  • Select the layout "Item Right".

Media content added to this slide will be placed on the right half of the final app and text content will be on the left half.

Copy and paste details of one dish from the Desserts sheet in the Assets Spreadsheet, to this slide,

Assets Google Sheet: Open

Images for Desserts Section: Open

In this template, you can add icons that represent a particular ingredient in a dish. For adding a gluten-free icon, copy and paste the following text,

:gluten:
pageSupported Icons on Poexis

After adding the elements the slide will look like this,

Now let us add a slide with 'Item Left' layout,

  • Create a new slide.

  • Change layout to "Item Left".

  • Add another dish from assets.

After adding more than one slide, don't forget to add a Scroll sticker to connect them to the Desserts section

Links in Menu slide,

  • Make menu entries for Main Course and Desserts.

  • Link each entry to the corresponding Section Header slide.

We have three buttons in the Home section. By default, every button is linked to the home page.

  • Select the rectangle shape. make sure you are not selecting the text inside the shape but the shape itself.

  • Right Click > Link > Slides in this Presentation > [Select Slide].

  • Link each button to the corresponding Section Header slide.

That's it. WE'RE DONE!!!

Publish the App

Alright, everything is done. Let's publish and see the app.

  • In Poexis Creator click 'Publish'.

  • Wait for the build to finish.

  • Click 'Here' to open the app.

There you go... You have a good-looking interactive menu app. To share the app you can share the URL.

In case you run into some issues or want to check something here are the links to the slide deck and final app for reference,

Slide Deck

Final App

Last updated