Design the home screen

Design the home screen

In this guide, we'll explore the power of multi-home and various blocks that allow you to customize and enhance the visual appeal of your app's home screens. From showcasing product collections to adding interactive elements, these blocks offer endless possibilities for crafting engaging
user experiences. 

1. Multi-home

1.1 About multi-home

Alphonso provides you with a new and outstanding feature, which is Multi-home. This feature allows you to categorize and display content in tabs within the home screen’s space, ensuring a clutter-free experience that instantly engages users. You can:
  1. Present information in an organized and visually appealing format on each page. 
  2. Highlight key content by placing important information in prominent tabs.
  3. Arrange pages according to your preferences to create a tailored home screen experience.

1.2 How to set up multi-home?

Step 1: Go to Design > Home.

Step 2: Toggle Multi-home to create multiple tabs on the home screen.


Step 3: Hover over the page line, and click Design.
  1. Enter the page name, and then click Add.
  2. Arrange their orders according to your preferences.
  3. To delete a home screen, click the trash bin icon.

Step 4: Click Save draft in the bottom right corner. 

After setting up multi-home using the simple steps outlined above, you'll be ready to dive into the exciting world of home screen design. Let's explore the array of home blocks at your disposal to craft a truly tailored user experience.

2. Home blocks

2.1 About home blocks

  1. Search bar
Help your users easily find what they're looking for with a convenient search bar. Enable seamless navigation and improve user experience by allowing them to search for specific products and categories within your app.

  1. Spacer
Create a space between two elements in an interface. Help you design a clear app layout with visual breathing room for the eye, making users want to stay on the app.

  1. Category grid
Display your categories in style with a visually appealing carousel. Showcase up to 8 categories in a grid view, allowing users to explore different sections of your app effortlessly. Please note that you can choose main categories or subcategories to show in the category grid.

  1. Countdown
Boost sales and create urgency with the custom countdown block. Highlight limited-time offers, flash sales, or upcoming events to engage users and prompt immediate action. Customize the start and end dates, colors, text, and background images to create a captivating countdown timer for your special promotions.

“Where should this lead your customers”
With our customizable block features, you can easily determine where each element should lead your customers. Whether it's linking to specific categories, products, pages, URLs, email addresses, phone calls, or social media profiles, we've got you covered.

  1. Image banner
Let your creativity shine by adding custom images to your app. Whether it's your brand logo, stunning visuals, or promotional banners, visually engage your users and convey your unique brand identity. 

  1. Image grid
Capture attention with an eye-catching image grid. Showcase multiple images in a visually appealing layout, perfect for displaying product collections, portfolios, or event highlights. Display up to 8 images in a customizable grid layout with 2-6 columns. 

  1. Image slide
Tell a visual story with an image slideshow with up to 8 images. Showcase a series of captivating images in a slideshow format, allowing users to swipe through and immerse themselves in your content.

  1. Video
Bring your app to life by incorporating custom videos. Share product demos, brand stories, or engaging content that resonates with your audience and enhances their app experience. 

To get detailed information about the format and recommended sizes for image banners, image grid, image slides and videos, please take a look at Design information to create app assets.
  1. Product carousel
Highlight your featured products with a dynamic product carousel. Showcase a selection of products in an interactive and engaging manner, enticing users to explore and make purchases. Feature up to 8 products from the category you choose. 

  1. Product swipeable cards
Engage users with a carousel with a parallax effect. Showcase up to 10 products from the category you choose, keeping users entertained and informed.


  1.  Product grid
Present your products in an organized manner with a grid layout to feature up to 10 products. Allow users to browse multiple products at a glance, providing them with a convenient shopping experience.

  1. Recently viewed
Display up to 12 products app users have recently explored. Make it easy for them to revisit previously viewed products with the recently viewed block. 

2.2 How to design with home blocks?

To use blocks in the home screen section, follow these steps:
Step 1: Go to Design > Home.

Step 2: Drag and drop to add blocks.

Step 3: Design and manage a block.
  1. Design: Hover over the desired block and click Design. The design settings differ for each block.

  1. Delete: Hover over a block and click Delete.
  2. Reorder: Drag and drop a block in the preview pane.

Step 4: 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.

With our multi-home and drag-and-drop blocks, the possibilities for customizing your app are endless. Experiment with different block combinations, unleash your creativity, and create a stunning app that stands out. Start exploring these blocks today and build an app that captivates and delights your users at every touchpoint.

If you have any further questions about using home blocks, we’re happy to help! 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 the Alphonso app builder and the core pages in the app builder. By the end, you'll have a general ...

    • Overview of design features

      Step into the realm of app design and let your creativity take flight! Our app builder empowers you to craft visually appealing apps without the need for coding knowledge. In this guide, we will provide a design overview of Alphonso, presenting steps ...

    • 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-centric theme. 1. About app theme An app theme is a ...

    • Design information to create app assets

      In this article, we'll guide you through the app assets needed for designing within the app and preparing assets for publishing your app. 1. Graphic assets within the app 1.1 Brand logo Showcase your brand prominently at the top of your app’s home ...

    • Configure My Account page

      In this article, we'll explore the elements and configuration options that allow you to create a tailored and engaging experience for your app users. 1. About My Account The My Account screen in your app is a crucial hub of information and ...