Build the brands page

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.

1. About the brands page

The Brands page in a mobile app offers users the ability to explore and purchase products based on specific brands. 
  1. Brands and their changes are fetched automatically from BigCommerce backend. If there are new brands, you need to manually add them to the brands page. 
  2. Design possibilities: 
    1. The brands page supports showing a search bar, brand images, spacer, and an A-Z scroll bar.
    2. You can design your brands page based on your preference for either a simple or visual layout. 
  3. The brands page can be accessed via the following options: 
    1. An in-app page such as the Home page(s), the Categories page, or the My Account page 
    2. Bottom tab
    3. Individual brands can be accessed via blocks on in-app pages.

2. How to design the brands page?

To access Alphonso, in your BigCommerce backend, navigate to Apps > My Apps > JMango360 Mobile.

2.1. Create and design the brands page. 

Step 1: In Alphonso, go to Design > Brands.

Step 2: Build the brands page.
  1. Select the brands from the list and click Apply. 
    1. Note: The selected brands are added to the design in alphabetical order. You can't rearrange the order.
  2. To delete a brand, hover over it and click Delete.
  3. Upload a new brand image for each selected brand.
    1. Note: By default, the brand image can be pulled from the BigCommerce backend, but you can upload a new image. Additionally, the brand images follow the theme corner style. 
Step 3: Configure the page settings.
You can make changes to the following settings:
  1. Screen name: Change the screen name as you prefer. Please note that it cannot be left empty.
  2. Search bar: Toggle the Show brand search bar setting and specify the bar’s background color and hint text. 
  3. A-Z scroll bar: Choose whether to display or hide the A-Z scroll bar by toggling the setting.
  4. Spacer: Toggle the Show spacer setting and specify the spacer’s height and background color. 
  5. Brand image: To display the brand images, enable the Show brand image setting. 

Step 4: Add and design custom blocks.
Leverage custom blocks to direct users to a particular destination within the app. This is especially helpful if you intend to draw attention to specific content, like promotions or other noteworthy information. 
  1. To add a custom block, drag and drop the block to the brands page.
  2. Hover over the block and click Design. You can edit the banner name, upload an image banner, and link it to a destination. 


Step 5: Click Save draft in the bottom right corner to save your design on the page.

2.2 Make the page accessible

Step 6: You can link the page to a button in the bottom tab or a block on a page within the app. 
  1. To enable navigation from the bottom tab, configure a button in the Bottom Tab section, rename the title, choose the icon, and link it to Brands page.

  1. On a page within the app such as the home page, Categories, or My Account page), you can use action links to link a block or an element to the Brands page.

Step 7:  To finish, click Save draft again to save your changes. 
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.

3. Best practices for building the brands page

3.1 Design a simple or visual page layout 

The brands page can be designed with your preference for a simple or visual layout.
  1. If your app has a long list of brands, a simple layout (with or without brand images) can be a good choice. Adding a search bar and an A-Z scroll bar is recommended to optimize the brand search functionality. 
  2. If you have a small number of brands, you can create a custom layout by designing a brand page from scratch on the Custom page or a new tab on the home page.

3.2 Optimize navigation to the brands page.

  1. If you want to capture users' full attention on the brands page, place an icon in the bottom tab and link it to the page.
  2. Alternatively, you can direct users to the brands page by linking it to a block on in-app pages such as Home or Categories. For example, on the Categories page, create a custom banner showing Shop by Brand and then link the block to the page.

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 categories page

      In this article, we'll take you through the step-by-step process of creating your categories page. 1. About the category structure Here are some important notes on the category structure in Alphonso: The category structure in Alphonso is ...

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

    • 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. 1. About custom pages Custom pages can be displayed on the ...