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.