Get started  

Help Center

Community / Forum Ask Zappter Support We build your app Marketplace





Mastering the content editor Pixel perfect design Setup your E-Commerce Store Configure your booking engine Event-System / Drop-In


App Store Submission Creating Push Notifications Typography Changing template Changing Rules

Business Modules


More Tutorials


Customizing the sidebar

Managing custom sidebars

This section explains how you can customize your sidebars so they go with your app design. Then move on to explain how to assign some predefined tasks to sidebar options.

Customizing sidebars

After creating your custom sidebar, the next step would be to customizing it. The below steps guide you through the task.
1. Admin > Customize > Sidebar.  The sidebar appears, click on it to customize.
image.png 152.93 KB
2. The content editor opens with only elements that are used in customizing the sidebar.
image.png 196.72 KB
3. Expand the 'Content and text' (If adding text content).
image.png 207.49 KB
Adding or working with content on a sidebar is similar to creating, editing, or customizing your app content. (If you're new to creating content on your app) Read the section 'Creating Content' under Zappter Core Plugin documentation for detailed instructions. 
4. Expand the 'Media' (If adding media like images, videos, and animation. the below sample is with a Lottie animation added). 
image.png 259.4 KB
5. Expand the 'Sidebar Actions.' In this section, you add one of these three types of tasks a user can perform with a sidebar: 
'Sidebar Actions' is specific to sidebars unlike the 'Content and text' or 'Media' groups described in steps 3 & 4. 

Assigning sidebar tasks

Through a sidebar, a user can perform one of these actions:
  • Actions: Available options, Change language, Show login, and Show logout
  • Open Link: Provide a URL link to open
  • Show Popup: Show a  popup with text content in it. Ideal for showing legal information, general instructions, etc.

  1. When adding an 'Action,' provide a caption to the button that calls the action, such as change language
  2. Select the action in the list
  3. In the 'Icon' tab, choose an icon for this action
  4. In the 'Colors' tab, customize the colors of this action button
  5. Create
image.png 386.62 KB
Before adding your Privacy Policy, Legal Disclosure Policy, or Cookie Policy, you need to customize each of them to reflect your business policies under Admin > Settings.
image.png 261.29 KB
Open Link: 

  1. Provide the button with a caption
  2. Provide the link URL
  3. In the 'Icon' tab, choose an icon for this button
  4. In the 'Colors' tab, customize the colors of this button
  5. App tracking/data collection 
  6. Create
image.png 346.75 KB
image.png 267.18 KB
Show Popup:

  1. Provide the button with a caption
  2. Provide a detail description about the title
  3. In the 'Icon' tab, choose an icon for this button
  4. In the 'Colors' tab, customize the colors of this button
  5. Create
image.png 314.15 KB
image.png 267.84 KB
6. Click on the 'Back' button, and in the main content screen, click 'Put online' to publish your changes on users' devices. The button's caption changes from 'Put online' to 'Published'  once the changes have been applied successfully. 
image.png 170.93 KB

Customized sidebar example

A newly created sidebar has been customized and replacing the default sidebar.
image.png 266.69 KB
Last updated at 06.07.2022 22:40