Design the home screen

Design the home screen

Home screen is potentially one of the most important screens in your app. Designing a home screen that is both visually compelling and high-converting is incredibly essential. This article will show you how. 

Before we start, it's helpful to know that you can always preview your design using our preview panel and preview app. And don’t forget to save changes when you’re done.

Add a home screen

After you successfully integrate your app with your store, you’re taken to  JMango360 Back Office >  Design module where you see the home screen is the first menu item in the side menu. By default, the home screen comes with neither design nor menu icon. You can rename the home screen and add an icon to it. For details, see  Add and manage menu items.

If you want to add another home screen to the menu, just click  Add Feature >  Home Screen. A new home screen will be added at the top of the side menu. 



Design home screen #1 - Title bar

You’re allowed to display text label (maximum characters: 30) or logo (maximum size: 1125 x 200 px) on the title bar of the home screen. 



For the display of the title bar, three options are available. They are all enabled by default.
  1. Slideshow and Button Row Offset: This option is enabled by default to make the title bar NOT overlap the slideshow or buttons. App version 2.32.0 or later is required.
  2. Enable Search function on Title Bar [Native App only]: Decide if the global search icon is displayed on the title bar so customers can search for wanted products.
  3. Display Shopping Cart icon on Title Bar [Native App only]: Decide if the shopping cart icon is displayed on the title bar so customers can access the shopping cart to see what’s inside.

Design home screen #2 - Slideshow

Slideshow is a great choice for sale promotions. You are able to create a slideshow of as many slides as you wish and disable the slideshow if you no longer want it. 


  1. Disable slideshow: Select the check box to hide the slideshow from the home screen.  
  2. Add/remove/re-order slides:
    1. Add a slide: Click Add Slide to add a new slide to the slideshow.
    2. Remove a slide: Choose a slide and click Delete Slide. Alternatively, hover over a slide thumbnail (right below the Disable Slideshow check box) and click the Remove icon that appears. 
    3. Reorder a slide in the slideshow: Choose a value in the Position drop-down list.
  3. Add/remove/edit image associated with a slide
    1. Add an image to a slide: Click on a slide and a pop-up appears allowing you to upload a new image or choose from existing images. Recommended image size: 1125 x 800 px
    2. Remove the image associated with a slide: Hover over a slide and click the Remove icon that appears.
    3. Change the display of the image: Choose a value in the Image Display drop-down list. If the image is of recommended size, just leave this setting as default.
      1. Scaled and cropped to fill display area
      2. Resized to fit display width or height
      3. Stretch to fill display area
      4. Titled to fill display area
      5. Centered without resizing
    4. Add text to a slide: Enter text in the box if you want to display text over a slide. Maximum characters: 160.
  4. Make a slide interactive:
    1. Link to feature: Associate a slide with a menu item in the side menu.
    2. Link to website: Associate a slide with a web page. Tapping the slide will open an in-app browser that redirects customers to the web page.
    3. Link to product URL: Associate a slide with a specific product. When customers click the slide, they will be taken to the associated product details.
Please note that if you disable the  Slideshow and Button Row Offset in Title Bar setting, the title bar will overlap the slideshow. In that case, you should leave the first 200 px in height of the image blank to avoid bad display. 


Design home screen #3 - Buttons

The home screen must contain clear buttons that allow customers to get the most important product categories and other pages within your app quickly. You are able to create as many button rows as you wish, each button row can contain no more than three buttons. 


  1. Add/remove/re-order button/row:
    1. Add a button row: Click Add Row.
    2. Add a button to a row: Select a row, then click Add Button. You can add up to three buttons to a row.
    3. Reorder a button/row: Place the cursor over the Re-arrange icon  associated with a button/row, then drag the button/row to a new position.
    4. Remove a button/row: Hover over a button/row, then click the Delete icon (the recycle icon).
  2. Add/remove/edit image associated with a button:
    1. Add an image to a button: Click on a button and a pop-up appears allowing you to upload a new image or choose from existing images. The recommended image size depends on the number of buttons per row:
      1. 1125 x 400 px for a 1-column button
      2. 562 x 400 px for a 2-column button
      3. 375 x 400 px for a 3-column button
    2. Remove the image associated with a button: Hover over a button and click the Remove icon that appears.
    3. Change the display of the image: Choose a value in the Image Display drop-down list. If the image is of recommended size, just leave this setting as default.
      1. Scaled and cropped to fill display area
      2. Resized to fit display width or height
      3. Stretch to fill display area
      4. Titled to fill display area
      5. Centered without resizing
    4. Specify the button color: If you want to create a button with no image, you can specify the button color using the color picker. 
    5. Add text to button: Enter text in the box if you want to display text over a button. Maximum characters: 30
    6. Specify the text color: Use the color picker to specify the text color as you wish.
  3. Make a button interactive:
    1. Link to feature: Associate a button with a menu item in the side menu.
    2. Link to website: Associate a button with a web page. Tapping the button will open an in-app browser that redirects customers to the web page.
    3. Link to product URL: Associate a button with a specific product. When customers click the button, they will be taken to the associated product details.

    • Related Articles

    • Best practices to design the home screen

      This article shows you practical tips and tricks to design a perfect home screen for your app. For basic understanding of home screen design, please take a look at Design the home screen. Before we start, it's helpful to know that you can always ...
    • Basics and overview of app design

      After successfully creating an app, your next step is to design your app the way you want. JMango360 provides you with a range of useful features to help you get a beautiful and attractive app. Where to design your app? You design your app in ...
    • How to promote a specific product on the home page?

      Required app version: Native App - 2.60.3 | PWA - 1.4.1 You might want to promote a specific product on your mobile app or PWA using slideshow or buttons on the home page. Follow the steps below: Go to JMango360 Back Office > Design > Home ...
    • How to integrate with your loyalty program?

      JMango360's standard offering does not support loyalty program integration. That said, you can still present your loyalty program in your app as a menu item or a home screen button/slide. The only limitation is that the app loyalty points can be ...
    • How to create a link to a product on PWA?

      Create a link to a product on the PWA's home page Required PWA version: 1.4.1 With just a few steps you can put a specific product of your PWA just one tap away from the PWA's home page. Here is how: Go to JMango360 Back Office > Design > Home ...