1. Home
  2. Docs
  3. App Builder – User Guide
  4. Screens
  5. Category

Category

This page will show you how to set up a Category page.

1. General

Exclude categoryUsers can select 1 or multiple categories on this field to make sure they will NOT display on App
View:
– List
– Grid
To select a type of display categories: (only apply for main categories, not sub-categories)
– List: will show categories as a list
– Grid: will show categories as a grid. If users choose this option, user can config more number of [Column grid] and [Child Aspect Ratio] (the height of item)
Item Show all
Enable item Show allShow/hide “Show all” item
Note: “Show all” item only show with [Template] = Item grid
Enable Change Name Item Show allko work
Position Item Show allko work
Text Show allko work
General Item
Padding itemSet distance among category items
Template
Select templateThere are 6 available templates: default, Item card, Item overlay, Item contained, Item grid, Item basic
Enable SubcategoriesShow/hide sub-categories
Enable numberShow/hide count item on each category
Template = Item Horizontal / Item Card
Enable ImageShow/hide category image
Enable shadowShow/hide shadow for each category item
Enable borderShow/hide border of category item
Border colorSet border color
Note: only affect when [Enable border] = Yes
Enable round imageDisplay round/square category image.
Note: Only apply for “Item card” template
Template = Overlay
AlignmentSet position to category name/count item: left, right, center
Opacity ColorSet opacity color to category items
OpacitySet opacity index to category items
Template = Contained
Enable ImageShow/hide category image
Enable RoundDisplay round/square category image.
Enable BorderShow/hide border of category item
Border colorSet border color
Note: only affect when [Enable border] = Yes
Template = Grid
Note: For only this template, user can show/hide sub-categories
Max Length SubcategoryLimit the number of displaying sub-categories
Column subcategorySet number of column grid
Enable Round SubcategoryDisplay round/square sub-category image.
Enable Border SubcategoryShow/hide border of sub-category item
Border color SubcategorySet border color
Note: only affect when [Enable border subcategory] = Yes
Border radius Image SubcategorySet border radius for sub-category name image
Font Size SubcategorySet font size for sub-category name
Text color SubcategorySet text color for sub-category name
Template = Basic
Enable IconShow/hide “>” icon next to category name https://prnt.sc/130673c
Icon sizeSet icon size
Note: only affect when [Enable icon] = Yes
Icon colorSet icon color
Note: only affect when [Enable icon] = Yes
Enable BorderShow/hide border of category item
Border colorSet border color
Note: only affect when [Enable border] = Yes

2. Style

Padding/Margin
Background children Items
(only set layout = vertical)
Config Item
Background Item
Radius Item
Radius Image Item
Text Color Item
Text Font size Item
Subtext Color Item
Subtext Font size Item

3. Layout

DefaultIt is similar with Horizontal layout
VerticalThe main category list will show as vertical
https://prnt.sc/1306d4s
HorizontalThe main category list will show as horizontal https://prnt.sc/1306b2c

4. Configuration

App bar
Enable searchShow/hide search box
Enable cartShow/hide Cart icon
Bannerhttps://prnt.sc/12zctwv
Enable bannerShow/hide the banner image on the Product list page
Width bannerAllow users to config width of the banner
Height bannerAllow users to config height of the banner
Border radius bannerAllow users to config radius of the banner
BannerAllow users to select/upload a banner image

5. Examples

5.1. Template 1

To set up a category page as this template 1:

Step 1Config banner imagehttps://prnt.sc/1301xck
Step 2On [General] tab:
– View = Grid
– Column Grid = 2
– Child Aspect Ratio: re-setup if needed
https://prnt.sc/1302jk5
Step 3Select template = Item Overlayhttps://prnt.sc/1302ing
Step 4On [Layout] tab:
– Select layout = Horizontal
https://prnt.sc/1302cyw

5.2. Template 2

To set up a category page as this template 2:

Step 1Config banner imagehttps://prnt.sc/1301xck
Step 2On [General] tab:
– View = Grid
– Column Grid = 2
– Child Aspect Ratio: re-setup if needed
https://prnt.sc/1302jk5
Step 3Select template = Item Overlayhttps://prnt.sc/1302ing
Step 4On [Layout] tab:
– Select layout = Vertical
https://prnt.sc/1302w2r

5.3. Template 3

To set up a category page as this template 3:

Step 1Config banner imagehttps://prnt.sc/1301xck
Step 2On [General] tab:
– View = List
https://prnt.sc/1302qhx
Step 3– Select template = Item Horizontal
– Enable shadow = Yes
– Enable border = Yes
– Enable number = Yes
https://prnt.sc/1302s5j
Step 4On [Layout] tab:
– Select layout = Vertical
https://prnt.sc/1302w2r

Was this article helpful to you? Yes No

How can we help?