Design the home screen
In this guide, we'll explore the power of 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.
Note: This user guide is applicable to BigCommerce.
Design tip 1: 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.
Design tip 2: Within the customizable blocks, including countdown, image banner, image grid, image slide, and video, you can easily link them to a different destination. In the section Where should this lead your customers?, you can select a specific category, a product, a page, a URL, an email address, a phone call, or a social media profile.
1. About home blocks
Search bar
Add a search bar to search for specific products and categories within your app. The search bar is, by default, also visible on your categories page.
Spacer
Create a space between two elements in an interface.
Category grid
Showcase up to 8 categories in a grid view. You can choose main categories or subcategories to show in the category grid.
Countdown
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.
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.
Image grid
Display up to 8 images in a customizable grid layout with 2-6 columns. You can set the background color and choose to display space among images.
By default, Spacing is disabled, so there will be no space, and the images will have sharp corners.
If Spacing is enabled, there will be space among the images, and they will have rounded corners.
You can replace the default white background color with a different color in the grid.
Image slide
Upload up to 8 images to create a visual story with an image slideshow. Users can view a sequence of images by sliding or swiping through.
Video
Upload a video to bring your app to life. You can share product demos, brand stories, or engaging content that resonates with your audience. The video supports sound but is set to be off by default. Users can enable the sound if desired.
Product carousel
Highlight your featured products with a product carousel. You can choose a category or a subcategory up to level 3. The carousel features up to the first 8 products from the chosen category or subcategory, based on the the sort of products in the e-commerce backend.
Product swipeable cards
Engage users with a carousel with a parallax effect. Similar to the carousel, this block allows you to display up to the 8 first products from the selected category or subcategory. The order of these products is also determined by the sort of products in the e-commerce backend.
Product grid
Feature up to 4 first in an organized manner with a 2- column grid layout. These 4 first products shown are from the selected category or subcategory, and their order is also based on the sorting settings in the e-commerce backend.
Recently viewed
Display up to 12 products that the user has recently viewed. The block allows users to quickly revisit items they've shown interest in, facilitating a seamless and personalized shopping experience.
2. How to design with home blocks?
To access Alphonso, in your BigCommerce backend, navigate to Apps > My Apps > JMango360 Mobile.Follow the steps below to design the home page using blocks in the Home section:
Step 1: Go to Design > Home.
Step 2: Drag and drop to add blocks.
Step 3: Design and manage a block.
- Design: Hover over the block and click Design. The design settings differ for each block.
- Delete: Hover over a block and click Delete.
- 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 Alphonso and the core pages. By the end, you'll have a general understanding of leveraging ...Configure the home settings
In this article, we provide a step-by-step guide on setting up the multi-home feature and effective ways to manage home screens through editing options in the home list. 1. Multi-home 1.1 About multi-home Alphonso provides you with a new and ...Overview of design features
Step into the realm of app design and let your creativity take flight! Alphonso 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 for ...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. ...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 ...