1. Home
  2. Docs
  3. App Builder – User Guide
  4. Settings
  5. Sidebar

Sidebar

Link to config: Go to Admin panel > choose [App Builder] > Select a template that you want to update > Choose option [Sidebar] on the dropdown http://prntscr.com/10zpb02

1. Layouts

There are 10 layout templates that users can choose to set up for their sidebar. Please refer to [Layout] tab for the detail http://prntscr.com/10zpgoh :

– Layout 1: Sidebar Overlay
– Layout 2: Sidebar Scale Right
– Layout 3: Sidebar Scale Rotate
– Layout 4: Sidebar Stack
– Layout 5: Sidebar Fixed Stack
– Layout 6: Sidebar Scale Bottom
– Layout 7: Sidebar Scale Top
– Layout 8: Sidebar 3D in
– Layout 9: Sidebar 3D out
– Layout 10: Sidebar Popup

2. General 

We have 3 sections for a sidebar: Header sidebar, Categories, Link customize

Header sidebarIncluding customer info (avatar, users name, email) and Sign in/ Sign out button http://prntscr.com/10zr9q9
Enable Header SidebarShow/hide this section
AlignmentSet this section as left-align, center-align or right-align
CategoriesIncluding categories info
Enable CategoriesShow/hide this section
AlignmentSet this section as left-align, center-align or right-align
TitleSet title for this section
Show hierarchyShow/hide sub-categories 
Max DepthOnly set value for this field if users turn on [Show hierarchy] function. Ex: If you set = 1 => only sub-category level 1 will be shown.
Show product countsShow/hide product number for each category
Enable Image CategoriesShow/hide category image
Include CategoriesOnly selected categories will be shown on Sidebar
Exclude CategoriesSelected categories will NOT be shown on Sidebar
Link customizeIncluding customization links
Enable Link CustomizeShow/hide this section
AlignmentSet this section as left-align, center-align or right-align
Enable IconShow/hide the icon 
TitleSet title for this section
Content BlockUsers can add  a customization link with info:- Icon- Action to click- Title

3. Style 

Users can totally config: Background color, Text color, Border color, Background image for their sidebar to make it more attractive by clicking on [Style] tab.

Was this article helpful to you? Yes No

How can we help?