How to design a Mobile Store app?    
This topic is assigned to Victor Robu

Jun 04, 2014 06:25 AM

Introduction

If you're reading this guide you probably need a new mobile app for your store. The first step in this process is to use SeattleCloud app builder with the mobile ordering features from our Marketplace to create a working app that can be previewed and tested using our Previewer Applications.


A checklist for building your first app

Step 1.  We advise all our customers to write on a paper the basic app requirements. Having this will help you design your app much faster.

I have already compiled a list of requirements for my Mobile Store app so I'll share these with you:

- NO TABS
Buttons for: Categories, Win a Prize, About, Our Locations, Facebook page and Share the app.
Categories: Fashion, Jewelry, Electronics, Sports. etc




Step 2. Pick a template from our Available Templates page or start with a Blank Template.

- As first page (index.html) I'll use the Button Menu and will add some custom design to it.
- Categories: Product Order page type.
- Win a prize: Slot Machine page type.
- About: About Us page type.
- Find us: Map page.
- Facebook: Mobile page type.
- Share the app: App Share page type.
- Order page type for processing the order.

** I'll pick a Blank Template; however, the app that I'm designing now will be added as a template, and you may pick it from our templates page: MobileShop



Building your Mobile Store app

Step 1. Since I have already written down all of the app requirements and the needed features (page types), I'll simply add all the needed pages in my app.

Step 2.  In the navigation settings I've chosen the "No Tabs" option because I don't need tab buttons in my app. However, feel free to pick Native or Custom tabs if you need them, this is up to you.

Now I'll start to customize the "Landing page" of my app which is index.html .

Using the Button Menu page is really easy (TUTORIAL). However, I'll design 2 custom buttons in it with our Layout Editor - One will be for the Product Order page and the second one for the Order page type.

Final result: 




Step 3. In this step, I'll configure the ordering feature in my app by following the related TUTORIAL.

result:



**Please note: If you're developing this app for your customer, you may provide him with a restricted access to the app for updating his available products without "touching" the app design and app settings. (TUTORIAL)


Step 4. In the last step, I'll configure the pages used in my app. Bellow I'll show how I've designed these pages in my app and will provide URL's to the page tutorials (if tutorials are available):

Win a prize - Slot Machine (TUTORIAL)





About




Find us - Map page type (TUTORIAL)



Share with your friends - App Share (TUTORIAL)





Facebook Fan Page - Mobile page type (TUTORIAL)



    1