Build the categories page

Build the categories page

In this article, we'll take you through the step-by-step process of creating your categories page. 


Note: This user guide is applicable to BigCommerce. 

1. About the category structure

Here are some important notes on the category structure in Alphonso:

  1. The category structure in Alphonso is automatically fetched from the e-commerce backend, allowing you to rapidly design the categories page for your app.
  1. You can select the categories and reorder them as you prefer.
Tip: If you want to create an app-only offering or offer early access compared to the website, make use of showing hidden categories on the Categories page of your app. 
  1. The level 1 and level 2 categories are shown on the Categories page, while subsequent levels are shown in a category scroller on product listing pages.
  1. You can design the category structure with either a simple layout or by using image banners, depending on your preference.

2. How to create and design the categories page?

To access Alphonso, in your e-commerce backend, navigate to Apps > My Apps > JMango360 Mobile.
Step 1: Go to Design > Categories.

Step 2: Build a category structure.
  1. Select the categories from the category tree and click Apply. 
    1. Note: Categories in gray are the hidden categories in the e-commerce backend, and they can be selected in the app. You can use this feature to create an app-only category.
  2. To rearrange the order, drag and drop the categories to a different location.
  3. To delete a category, hover over it and click Delete.
Step 3: Design the layout.
  1. Design top categories.
By default, the category names and banners are pulled from the e-commerce backend. You can edit the names and upload banners according to your preferences. 
Note: Default e-commerce banners are 250 px high, while uploaded banners adapt to their image size.

  1. Add spacers (divider lines) to the category structure. 
If you want to have divider lines between the blocks, the spacer block is there to help you create clean and visually distinct sections.
  1. To add spacers, drag and drop the spacer block onto the preview pane, and then click Design to set its height and color.
  2. For optimal spacing on your app screen, it’s recommended to set a height of 5 px for small gaps and 24 px for bigger ones. 

Step 4: Add and design custom banners.
In addition to the category blocks, you can add custom blocks that can take app users to destinations other than categories.
  1. To add a custom banner, drag and drop the block to the Categories page.
  2. Hover over the block and click Design. You can edit the banner name, upload an image banner, and link the block to a destination. 


With the various settings options, you can create different layout styles. Below are the four typical layouts you can consider. Define the layout you want to design and adjust the relevant settings accordingly.
Simple layout
without spacers

Simple layout with spacers

Banner layout
Content highlight layout




Design tip: If you want to have full control over the category names’ font, size, and positioning, you can hide those names in the structure and incorporate them into your banner. 


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

    • Build the brands page

      In this article, we'll provide you with an overview of the Alphonso brands page, step-by-step instructions, and best practices for building the page. Note: This user guide is applicable to BigCommerce. 1. About the brands page The Brands page in a ...

    • Build custom pages

      In this article, we'll elaborate on the possibilities of custom pages. You can use this feature to provide information about, for example, the company, FAQs, shipping information, and more. Note: This user guide is applicable to BigCommerce. 1. About ...

    • Configure the product detail page

      In this article, we'll walk you through the introduction of product detail blocks how to leverage them to create an impactful product detail page. Note: This user guide is applicable to BigCommerce. 1. About product detail blocks When you open the ...

    • 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 ...