Build the category structure

In this article, we'll share information about the Alphonso category tree and take you through the step-by-step process of creating your category page. 

The synchronized category structure automatically pulls the category tree from BigCommerce. In Alphonso, you can then design and configure the category page by adding image banners, reordering categories, and choosing which categories and subcategories you want to present in the app. 

1. About synchronized category tree

Overview of configuration possibilities:

1. Automatically fetch the category tree from BigCommerce. Showing the level 1 and level 2 categories on the Categories page. Subsequent levels are shown in a category scroller on product listing pages.
   
2. Change the order of the level 1 categories.
   
3. Show or hide inactive subcategories. With this feature, you can create app-exclusive categories to create app-only offering or offer early access compared to the website. 
   
4. Change the user interface and style of your category structure.
   

2. How to design the category page

Step 1: Go to Design > Categories > Use category tree.

Step 2: Build a category structure using category tree.

1. Select the categories, then click Apply. You can choose subcategories and hidden categories.
2. To rearrange the order, drag your categories.
   
3. To delete a category tree, hover over it and click Delete.

Step 3: Design the layout.

You can make changes to the spacer, category name, and category banner.

1. Change the height and color of the spacer.
   
1. Input a number into the spacer height text field.
   
2. Enter the color code in the text field or click on the color box.
   
2. For further settings, hover over a category, and then click Design. 

With the various settings options, you can create three different layout styles. Define the layout you want to design and adjust the relevant settings accordingly.

Layout styles	Actions
Simple layout	By default, there is no spacer among categories. Edit top category names if you wish.
Simple layout with spacer	Specify spacers by changing height and color. Edit top category names if you wish.
Banner layout	Specify spacers by changing height and color. Edit top category names if you wish. Show top category names. Show category banners. Use default banners or upload your own banners. Default banners pulled from the BigCommerce backend have a fixed height of 250 px, while uploaded banners adjust their height based on the banner size.

Design tip: You can incorporate the category name into your banner design to have full control over font choice, size, and positioning.

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.

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 the Alphonso app builder and the core pages in the app builder. By the end, you'll have a general ...

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

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

• Preview the app

  With our intuitive app previewer powered by Appetize.io, you can get a realistic and interactive preview of your app before publishing it. This article will guide you through previewing and interacting with your app, ensuring it meets your ...

• App listing

  Providing an app store profile is a crucial step when your app is ready to be published to users on app distribution platforms. You can create an app store profile via the App Listing in Alphonso by sharing the required input. In this article, we’ll ...