To define the look and feel of our mobile app builder , it is necessary to take some time to configure 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.
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 design.
How to do it…
Follow these steps:
1. Choose the most appropriate Preset Theme:
Under the Color Themes tab, navigate to the Preset Theme list. Here are some default predefined design themes for a mobile application. Click on the list to expand and preview the available themes. Choose a theme from the list. After choosing the theme, click on the Update Preview button in order to see the changes we made.
2. Define the custom interface and font colors:
Of course, if we want to make some changes in the selected default theme, we can do it, so let’s inspect color options that are available to us for stylizing our app. Click on some of the color options and choose the custom color from the palette. To see the changes in our future mobile application, just click on the Update Preview button on the right-hand side of the screen.
We can see that the new selected color appears somewhere on the Preview Image on the right.
For the preview screen we can also choose screen 1 or screen 2 to see the changes applied to the mobile app interface.
Since it is much easier to see something than explain it with words, let’s list color options with images to see where each color appears:
3. Set up advanced settings:
Click on and choose colors for each Advanced Settings option and click on the Update Preview button to see the changes.
Advanced settings in most cases can remain the default and it is not necessary to change them, but feel free to play with options until the moment you are satisfied with your mobile application preview.
4. Define the mobile app title bar buttons:
On the application header (title bar) there are some optional buttons that can be removed. For example, if we are using our application as catalog only, we don’t need to display the Account button. Also, if we don’t want to enable search in our mobile app, we can choose not to display the Search button on the header.
Locate the Tabs row below the Color Themes tab and expand it if not already expanded, in order to see the available options.
Under the Title Bar options we have the Home, Search, and Account buttons displayed and for Search and Account we have an option to disable them—not including them in our mobile application.
Try to click on the Make Inactive link under the Search button and click on the Update Preview button to see the changes.
Notice that the Search button disappears from our mobile application header. Of course, we can enable it again if we want; just click on the Activate link under the Search button and it will become active again.
The same options are available for the Account button.
The Home button is not possible to deactivate, because we must have it in our
application, so the users can return to our app’s home page from any screen inside.
5. Define the sort order of option menu items in our app:
Under the Options Menu Items list, we have three items listed in the order they will appear inside our application’s options menu:
* More info
Basically, they are just shortcuts to some of the screens in our mobile application.
The Shop menu item is the shortcut to the Categories list, Cart is shortcut to the content of the user’s Shopping Cart, and More info is the shortcut to our application’s copyright information (About screen).
Click on the left and right arrow icons under each menu item in order to change the sort order in which they will appear inside our app’s options menu.
We can also deactivate each of them by clicking on the Make Inactive link under each item and also reactivate by clicking on the Activate link.
6. Save our configuration:
Once we are satisfied with the colors, fonts, and buttons in the mobile app, we just need to click on the Save or Save and Continue Edit button in order to save our configuration.
How it works
When we define options and styles for our mobile application, and submit our app to Magento Mobile, the mobile application loads the configuration that we defined and sets up the look and feel by using defined options.
We can always change these options, but when our application is already submitted to App Store/Google Play, if we make some changes, it will be necessary to resubmit the application as a new one and that can cause some additional costs.
If we are unsatisfied with our custom color configuration, we can click on the Reset theme to default button to restore the default theme settings. Of course, not all of the screens of our application are visible from Preview Image in Magento Mobile Admin Panel. All the colors, depending on screen type, will be visible in a Preview application that we will use to preview the final mobile application before submitting it to Magento Mobile.
- Magento merchants: Our solution is specially designed for Magento platform so you can get all the best features of Magento to apps. If you use a solution for every platform you’remissing many good things.
- Mobile shopping apps: You will have apps that are coded separately and specifically for iPhone and android. Your customers can search and download your shopping apps from Google Play and Apple stores. And again, such tailored apps will bring the best user experience!
Some post you may consider: