Set the app theme

Set the app theme

With our app builder, you are empowered to define the look and feel of your app by customizing the theme. In this article, we will discover where and how to customize a visually stunning and user-centered theme.

Note: This user guide is applicable to BigCommerce.

1. About app theme

An app theme is a collection of color schemes and other design attributes that create a sense of visual consistency throughout the entire app.

With Alphonso, you can configure the following components:
  1. Logo
  2. Colors
  3. Corner style
  4. Product image ratio

2. How to create the app theme? 

To create your unique app theme, simply follow these steps:
Step 1: Go to Design > Theme.

Step 2: Customize the components.
  1. Logo: Upload your logo to display in the middle of the home screen’s header. For optimal results, the logo should be a PNG or JPG image file with an optimal size of 150 px x 50 px.
  1. Colors
    1. Primary color: Set the primary color for buttons and product badges.
    2. Secondary color: Define the color used for notification badges.
    3. Header background: Choose the background color for the app header, with header text in contrasting black or white. 
    4. Bottom tab background: Choose the background color for the bottom tab. 
    5. Bottom tab icon active: Set the color for the icon and label in the active bottom tab.
    6. Bottom tab icon inactive: Set the color for the icons and labels when they are inactive.


  1. Corner style: Search bar, buttons, form fields, and other elements in the app can come in rounded-corner or sharp-corner. Select the style you prefer for your app.
  1. Product image ratio: Select one of the three aspect ratios available for your product images, namely Square 1:1, Rectangle 2:3, or Rectangle 3:4. 
Tip: Select a proper image ratio based on the majority of your product images. For images with different ratios, they can fit into the designated container without being cropped. However, it's advisable to replace them with images having the same ratio as the others to enhance a sense of harmony and unity throughout your design.


Step 3: To finish, click Save draft in the bottom right corner. 
Please note that saving a draft affects only the design page, allowing you to make further changes. To make the current design available to all mobile users, click Publish to Mobile. 

If you have any further questions, please reach out to us at customer.success@jmango360.com!


    • Related Articles

    • Getting started with Alphonso

      Welcome to Alphonso - the advanced app builder designed to empower you to create exceptional mobile apps. This article will take you on a guided tour of Alphonso and the core pages. By the end, you'll have a general understanding of leveraging ...

    • App listing

      Providing an app store profile is a crucial step when your app is ready to be published to users on app distribution platforms. You can create an app store profile via the App Listing in Alphonso by sharing the required input. In this article, we’ll ...

    • Configure smart app banners

      1. Introduction to smart app banners A smart app banner is a banner at the top or bottom of the screen on a mobile website to inform and encourage users to download or open the related app. Key characteristics of smart app banners: Creates a direct ...

    • Push notifications in Alphonso

      Push notifications have been proven to be a direct and cost-efficient communication channel, fostering user engagement and retention. In this guide, we’ll explore the scope of push notifications in Alphonso and how to send push notifications. 1. ...

    • Optimize app navigation with bottom tab

      Enhance user experience and streamline navigation in your app with the convenient bottom bar feature. This article shows you how to design and customize the bottom bar to suit your needs. From choosing icons to adding custom buttons, we've got you ...