Beginners Guide - Menu Template

This is the detailed version of the guide on the digital menu app.

Did you happen to check the menu of your favorite restaurant or your own restaurant on the website? Most of the time you will end up with a PDF file, which is just a digital version of their menu used in the restaurant. You will have to download the PDF, open it in a PDF viewer and then navigate through it using your two fingers. Difficult, right? It becomes more complicated when you want to check the menu again on some other day. Either you go and download the PDF again (of course now you have two PDFs and one has '(1)' in its name.) or you find the old PDF in some manner and open it. Much more difficult.

What if you can have an interactive menu app, which you can install on your phone and but only takes a few kilobytes of storage? Isn't it better if you can access it from your home screen any time you want, even you don't have an internet connection? This is where our solution comes in handy to you.

Let's get started

It's straightforward and simple,

Go to my.poexis.com.
Navigate to 'My Templates'.
Find out the 'Menu' template.
Click 'Create'.
Click 'Make a Copy'.

The file will be created in your Google Drive. After that, don't forget to give a suitable name for the document.

Wait, are you using Poexis for the first time? Check out our 'Getting Started' guide first. It will help you to clear a lot of doubts.

🔥page Getting Started

Editing the Template

In the template, you will find four slides. Each of the slides has a different layout. To build a single section app, these four slides are sufficient. But what if we want more than one section? Let's find out.

Most of the information you will see in this guide, will be available in the template slides themselves. In each slide, a small section on the left side is dedicated to instructions and help.

Getting Assets

We are going to build an app for a restaurant 'Rice Bowl'. For that, you will need design assets like a logo. Head over to this Google Drive folder for getting the assets.

Assets folder in Google Drive: Click Here!

You can download the files or add a shortcut to this folder in your 'My Drive'.

Title Slide

Now, let us begin editing the slides. After the cover slide and a help slide to open Poexis Add-on you will find a slide with the layout called 'Title Slide'. In this slide, you can define the name of your app, primary color. and logo.

App Name

Changing the name is straightforward, just edit the text box. This name will be used in the final app URL and the browser tab. So let us change the app name to 'Rice Bowl'.

The App Name defined in the Title Slide will be used in the final app URL and as the name of the browser tab. So give it a nice name

Logo

If you added the shortcut insert the logo by,

Insert > Image > Drive > My Drive > Rice Bowl > Rice_Bowl_Logo@2x.png .

If you downloaded the logo just drag and drop 'Rice_Bowl_Logo@2x.png' to the slide.

Primary Color

The primary color is your brand color. The color you choose as the primary color will be used in various design elements in your app. For example, the color of the title bar will be in the primary color.

If you already have a brand color just add it in the custom colors section. For Rice Bowl, the brand color is, (Click the 'Copy' icon at the right end of the code block)

#db3d3d

See the GIF,

This will be the slide after making the changes,

The next slide will be the 'Menu'. 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. If that does not make much sense, wait a bit more. We will come back to explain this in detail after building the sections.

Sections and Section Header

Section Header is used to group and arrange elements into sections. Each section header slide is followed by at least one slide with content. This slide can have the 'Content Area' layout or any other content layout, specific to the template. Content layouts are used to arrange the elements in a slide in a predefined manner in the final app.

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

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

Now we have a section, called 'Home'. At this point, you can link a menu entry to the 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).

When you link a Section Header to Menu, that section will be added to the hamburger menu of the final app. Add an entry for every section that needs to be present in the hamburger menu in the 'Menu' slide and link each entry to the corresponding 'Section Header' slide. A user can navigate into each section by clicking the corresponding entry in the hamburger menu.

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.

There will be a slide with the 'Content Area' layout after the section header. One property of Section Header is that it will be automatically linked to the next slide in the document. This means the Home will be linked to this Content area. Let us start adding elements in the Content Area slide. From the assets folder,

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

Now add a text box under the image, and fill the text given below, (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.

The slide deck will have two slides as shown below,

One thing to note is that the 'Content Area' layout keeps the vertical order in which you place the elements in the slide. This means if the image is above the text in the slide, it will be the same in the final app. If the image is below the text, the image will come after the text in the final app.

In the Content Area layout, the vertical order in which the elements are placed will be preserved in the final app.

Defining the Home Screen

When you have multiple sections, you can decide which should be the 'Home' screen. The 'Home' screen is the first screen that a user will see when the app is opened. For this just add the 'Home' sticker to the first content layout in that section.

For the Rice Bowl app, even though there is only one section as of now, we need to show it as the Home. For that,

Go to the slide with the Rice Bowl logo and text.
Open Poexis Creator: Add-ons > Poexis > Creator.
Click: General > Home > Paste the Sticker.

A small home sticker will appear on the slide.

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.

Publish the App to Test Minimum Requirements

At this point, your slide deck meets the minimum requirements to publish an app. Let us test it.

Click the 'Publish' button at the top right corner in the Creator.
Wait for the process to complete.
Click: 'Here' to open the final app.

You will be taken to the app.

Voilà! That is the first stage of your app. It is nowhere near to the finish, but now you know what should be done before attempting to publish an app.

Adding Elements

Now let us start building the real restaurant menu. For this, you will need content. Everything is available in the Drive folder we shared earlier.

Creating a New Slide and Linking it to a Section

Let us add a new slide, after the slide with the Rice Bowl image and Text,

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]).

Now you need to tell Poexis that the new slide that you just created is part of the 'Home' section. By default, only one slide is connected to a Section Header. To connect more slides you need to add the 'Scroll Sticker',

In Poexis Creator: General > Scroll > Paste Sticker.
Note that you have to paste the scroll sticker in every content slide after the section header.
So paste a scroll sticker also in the slide with Rice Bowl Image and Text (You can also copy and paste the stickers to another slide).

Now you will have a section called 'Home' and two content slides with a scroll sticker in each of them.

Creating Buttons

We are planning a menu with three sections. For that, we can add 3 buttons on the home page. Apart from the navigation menu, buttons give direct navigation to a section or a page in your app.

To add a button all you have to do is draw a rectangle and add text,

Click the Shape icon in the toolbar > Shapes > Select Rectangle shape > 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.

To center align the buttons with respect to the screen, just center align the text.

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

We will add the links to these buttons after finishing the sections.

You can add more slides under this and link them with the Scroll Sticker. Try doing it on your own. Add a 'Highlights' section with pictures and content from the assets folder.

Images for Highlights Section: Open

Creating Sections

To add a section,

Add a new slide to the slide deck.
Change the layout to Section Header.
Change the title of the new section to 'Appetizers'.
Create a menu entry, say 'Appetizers', for the new section.
Link the menu entry to this new section.

Now we can add a content slide to add elements,

Create a new slide: Ctrl+M.
Change the layout to Content Area.

Here we will add the contents of Appetizers. You can just add text boxes and make an entry for each menu item. But there is a better way, using 'List Sticker'.

List Sticker

List sticker is one of the powerful stickers available in Poexis. This sticker allows you to add content to a spreadsheet and link it to the slides. This means you don't have to go through the process of adding a new slide, linking the slide to a section, and adding elements in the new slide. You just update the contents in the spreadsheet and while publishing the app, Poexis will fetch the content from the spreadsheet and arrange the content according to the specified settings.

So let's make a spreadsheet,

Go to my.poexis.com > My Templates > Menu.
Click on 'Sheet Template' available above the buttons.
Click 'Make a Copy' on the following screen.

A new spreadsheet with some content will get opened. It will have sheets with names 'Appetizers', 'Entrees', 'Main', and 'Settings'.

Before adding the sheet in a list sticker you need to share it with our Digital Assistant. Lo and Behold, here is Leo DaVinci.

Click on the 'Share' Button at the top right of the spreadsheet.
Add the email id of DaVinci and click 'Send'.

Leo's email is,

davinci@poexis.com

don't spam him, okay?

Now we need the link to this spreadsheet,

Click the 'Share' button again.
Click 'Copy Link' in the 'Get Link' dialogue box.

Let's head back to Google Slides,

We created a new slide under the Appetizers section with the Content Area layout. While this slide is active,

Poexis Creator > General > List.
Paste the link you copied from Spreadsheet to the 'Sheet URL' field.

In the Sheet Name field, you need to specify which sheet should be looked at for content. If you go back to the spreadsheet, you can see that there are a few sheets at the bottom, with the names 'Appetizers', 'Entrees', 'Main', and Settings. Here we are going to use 'Appetizers'.

In the 'Sheets Name' field enter "Appetizers" (without quotes).
Click 'Paste your Sticker'.

Now Poexis will look for the content in the Appetizers sheet while publishing this slide.

Using Same Spreadsheet Document for Multiple List Stickers

You don't have to create a new spreadsheet for a List sticker. You can use multiple sheets in the same spreadsheet to specify different content. Let's try that,

We will create another section,

Create a new slide: Ctrl+M.
Change layout to 'Section Header' and Name it 'Main Course'.
Again create a new slide, and change the layout to 'Content Area'.

Now let us paste a list sticker to add contents,

Poexis > Creator > General > List.
Copy and paste the sheet URL as you did before in the 'Sheet URL' field.
But in the 'Sheet Name' field enter "Main" (without quotes).

When you hit the publish button, Poexis will fetch data for 'Appetizers' from the 'Appetizers' sheet and for 'Main course' from the 'Main' sheet. in this way, you can simply add more sheets to use in different sections.

Using Template Specific Layouts

Every Poexis template contains layouts specific to that template. You may not find them in another template. The Menu template has two of them, 'Item Left' and 'Item Right'. These layouts are used to arrange the elements inside the slide side by side. Let us create a new section first.

Create a new Section Header slide and add the title as "Desserts" (without quotes).
Add a content slide after it.
Select the layout "Item Right".

Now you will see a slide with markings for an image or video on the right half and text boxes in the left half. This implies that the 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. Now copy and paste details of one dish from the Desserts sheet in the Assets Spreadsheet,

Assets Google Sheet: Open

Images for Desserts Section: Open

Notice that there are two more fields in the spreadsheet, Price, and Contents. You can add them in new lines in the same text box. But there is a cool feature that is supported by this template. You can add icons that represent a particular ingredient in a dish. Also, you can indicate some dishes are free of certain ingredients. To do this you just have to specify the name of the ingredient in a particular format,

For Gluten-Free food just add,

:gluten:

Simple. You can add more than one icon in the same line. For the complete list of supported icons see this page,

pageSupported Icons on Poexis

After adding the elements the slide will look like this,

An additional line is added between the elements, because of aesthetic reasons. You can add additional text boxes if you want. Poexis will reproduce them in the same vertical order as in the case of 'Content Area' but the text will be confined to the right half of the screen.

Now add let us a slide with 'Item Left' layout. In this layout everything specified about the 'Item Right' is valid. The only difference is that the media is placed on the left side of the text. That's all.

Create a new slide.
Change layout to "Item Left".

Use the 'Item Right' and 'Item Left' layouts alternatively for a good-looking menu page.

After adding two more slides, don't forget to add Scroll stickers to connect them to the Desserts section.

Adding Links

Now we have built the sections of our app. The only thing remaining is adding links in the 'Menu' slide.

Make menu entries for Appetizers, Main Course and Desserts.
Link each entry to the corresponding Section Header slide.

Do you remember adding few buttons in the Home section? Now let us link them. By default, every button is linked to the home page. We need to link each button to its section. Just like we did in the Menu slide,

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. Check out this page if you want help to publish your app,

pagePublishing your app

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