Magento Mobile Application

Creating and confiuring a basic mobile

application (Must know)

Finally, with everything confiured and prepared, it is time to start exploring Magento Mobile

Admin Panel in order to create our fist Magento Mobile application.

Magento Mobile How-to

32

How to do it...

Follow these steps:

1. Inside your Magento Admin Panel, navigate to Mobile | Manage Apps on the

main menu.

2. Click on the Add App button in the top-right corner. The New App screen will be shown.

3. Since we have to create a separate application for each mobile device type, let's

choose our fist targeted platform.

Under the Device Type list, we can choose iPad, iPhone, or Android.

For the purpose of this recipe, since the procedure is almost the same for all device

types, I will choose Android.

4. After choosing the desired Device Type, click on the Continue button, and click on

the General tab under Manage Mobile App.

5. First we have to fil in the box named App Name. Choose an appropriate name for

your mobile application and insert it there.

6. Under the Store View list, make sure to choose our earlier defied Store View with

updated mobile theme exceptions, our mobile copyright information, and category

thumbnail images.

7. Set the Catalog Only App option to No.

8. Click on the Save and Continue Edit button in the top-right corner of the screen.

9. Now you will notice a warning message from Magento that says something like

the following:

Please upload an image for "Logo in Header" fild from Design Tab.

Please upload an image for "Banner on Home Screen" fild from Design Tab.

Don't worry, Magento expects us to add some basic images that we prepared for our

mobile app. So let's add them.

10. Click on the Design tab on the left-hand side of the screen.

11. Locate the Logo in Header label and click on the Browse… button on the right to

upload the prepared small header logo image. Make sure to upload the image with

proper dimensions for the selected device type (iPhone, iPad, or Android).

12. In the same way, click on the Browse… button on the right of the Banner on Home

Screen label and choose the appropriate prepared and resized banner image.

13. Now, let's click on the Save and Continue Edit button in order to save our settings.

How it works

For each device type, we will have to create a new Magento Mobile application in our Magento

Mobile Admin Panel.

Magento Mobile How-to

33

When we once select Device Type and click on the Save button, we are unable to change

Device Type later for that application.

If we have chosen the wrong Device Type, the only solution is to delete this app and to create

a new one with the proper settings.

The same applies with our chosen Store View when confiuring new app.

There's more...

When our confiuration is saved for the fist time, auto-generated App Code will appear on the

screen and that will be the code which will uniquely identify our Device Type— the assigned

application to be properly recognized with Magento Mobile.

For example, defand1 means that this application is the fist defied application for the

default Store View targeted on android (def = default store view, and=android).

How to use mobile application as catalog only

Under step 7 we set Catalog Only App to No, but sometimes, if we don't need checkout and

payment in our mobile app, but we want to use it just as catalog to show products to our

mobile customers, we just need to set the Catalog Only option to Yes.

Styling your mobile application (Must know)

To defie the look and feel of our mobile app, it is necessary to take some time to confiure

design area of our application. We are going to learn how to use all available styling options

inside our Magento Mobile Admin Panel in order to design the basic interface of our application.

Getting ready

Log in to your Magento Admin Panel, if not done already, and navigate to Mobile | Manage

Apps in the main menu.

Click on our previously created application in order to open the Edit App screen.

Navigate to the Design tab on the left-hand side of the screen where we already

uploaded logo in header and banner on home screen images.

You will notice the Color Themes tab in the middle of the screen. Expand it if not

already expanded.

On the right side of the screen, we have some kind of preview box for our mobile

application

...