Tiered Pages

This feature can be used to display many items such as restaurant menus, inventory, rosters, special events, etc. in a clean & efficient manner

An Example

As restaurant menus are typical of how Tiered Tabs can be used, we’ll review an example of how this is setup.

Basically, a Tiered Tab or Page is simply a nested array of documents that are opened from within a main document. The main document is the Tiered Pages Module. The Tiers are either Lists or HTML/TEXT pages that are opened from within that main Tier.

So, with that basic understanding, let’s take a look at how this will work with a simple menu design.

Step One: To start, you simply need to add “tiered pages” to your app under “Select Modules.”

Note: You may select up to 5 Tiered Page modules within one app. Each of these Tiered modules may have multiple pages with images. It is well to keep in mind that while you may add huge amounts of content and graphics, it is best to keep the user’s experience in mind. Don’t overload any app with heavy graphics, as this will cause the app to be slow to open.

Step Two: Save & Continue, which will take you to the Customize Module screen. Click on the Tiered Pages Module to configure the module.

Step Three: Once inside the module, you’ll have a choice of selecting a 1 or 2 column design for the middle tier. A two-column design can typically be used for prices of a restaurant or roster numbers of a team member. For this menu example, we will use 2 columns & save changes.

Screen Shot 2016-05-06 at 11.46.40 AM

Step Four: Add a Tab Title – something that describes the module as this is the name that will appear on the app’s menu. It is best to use short titles.

Note: If you will have a large Tiered Pages module (with many pages of content, you may enable the Search function. This is not necessary for small Tiered modules.

Step Five: After you add the title, click on the “+” sign below the Title field (see above graphic image). This will add a new field for additional content to the middle layers. Layers are simply added by pressing the “+” sign and saving.

Screen Shot 2016-05-06 at 11.54.11 AM


Step Six: Within the Top layer, you have the choice to add a “list” item, which will allow you to add an additional layer, or a “text/html” layer which will load the final content of that tier. Clicking on the “+” sign will add two more fields like this:


For this example, we’re building a menu, so under our Breakfast Tier, we will add one of the choices in the Middle Tier List item and the price in the Right Column field. Like this:


Always SAVE before continuing or you will lose your work!

Step Seven: See that little up and down expand arrow next to the Right Column ($8.95) field? Clicking on that icon will open a new screen where you may add additional content about your item. In this case, we added enticing information about the Western Omelet.


Step Eight: And scrolling on down, we can upload an image to appear before or after the Text.



Together, the uploaded image and the item description create a mouth-watering tier for the app user. A back button at the top of the page allows the user to go back to the main tier to see what else is available.



Here’s how it works on the app:


Optional Choices: You may add multiple items to each tier to complete/enhance the module for you needs.

Another option is to choose “text/html” for the top tier, which will allow you to skip the middle tier altogether, in case that’s a better fit for your app.

In the following example, we’ve listed the restaurant’s special Desert as a Text/HTML tab instead of List. Selecting the HTML option  will open up the WYSWYG & image options to complete these modules without the need for an additional layer.image025

Below is an example of this transition.


We hope that you enjoy the power and simplicity of Tiered Tabs and Pages, as will your customers & users.