Get started  
Login  

Help Center

Community / Forum Ask Zappter Support We build your app Marketplace

Documentation

English

General

Videos

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

Popular

App Store Submission Creating Push Notifications Typography Changing template Changing Rules

Business Modules

New

More Tutorials

Documentation

Customizing bottom bar

Modifying the bottom bar

Customizing bottom bar

Customizing your 'upper bar' or 'bottom bar' enhances the user experience and helps your app adapt to your brand. You can customize the bottom bar and every element inside it individually. You can switch on and off features on the bottom bar and modify the styles, behaviors, user interface, and display order inside the bottom bar.
Bottom bar elements
Profile, home button, orders, payments, stamps, loyalty points, and favorites are popular options. Depending on the features you have added to your app, there will be more individual elements to customize.
Follow the below steps to customize the elements. And when you hit 'save,' the on-screen simulator shows how your new changes will look on users' devices without the need to navigate away from the page. It saves your time when you have to try various options before finalizing the best design for your upper bar or bottom bar.
1. Admin > Design > Bottom Bar. Select 'Settings.
image.png 69.83 KB
Under every change, you get 'Save' or 'Discard' option. You can save changes at each change or save it all before moving on to the next tab. If you try to move to the 'Design' options with unsaved changes, Zappter prompts you to save or discard the changes on the current tab.
 
2. Under the 'Profile' tab, you can customize the app user profile icon on the bottom bar. 
image.png 468.19 KB
  • Hide «Profile» button: Enable or disable the profile icon on the button bar
  • Color: Customize the color of the profile icon
  • Display in: Whether to display the profile icon on the upper bar or the bottom bar
  • Upper Bar Alignment: Alignment of the profile icon within the bottom bar: left-aligned, center-aligned, or right-aligned
  • Icon: Replace the icon from the available options
  • Use Image: Instead of the icon, upload a picture to use for the profile option
3. Move on to the 'Home Button' tab where you can customize the settings for the button. 
image.png 505.26 KB
  • Enable Home Button: Enable or disable the home button
  • Color: Customize the color of the home button
4. Move on to the 'Orders' tab.
image.png 451.46 KB
  •  Hide «Orders» button: Enable or disable orders option on the bottom bar
  •  Text inside orders-popup: Customize the text that appears on the top of the orders window when users open this option. 
  •  Label for «Orders»:  Default is 'Orders.' It is like the Orders window title. You can select one of many options: Orders, Activities, Bookings, Requests 
  •  Color: Customize the color
  •  Display in: Select one of these options to display the Order option: Bottom bar, Upper bar, or inside the Profile
  •  Upper Bar Alignment: Where to place the Order option within the upper/bottom bar. Options: Left, center, and right
  •  Icon: Replace the icon 
  •  Use image: Use an image instead of an icon
5. Move on to the 'Payments' tab. 
image.png 395.73 KB
  • Manage credit cards:  Enable or disable to manage the credit cards in the profile settings 
6. Move on to the 'Stamps' tab. 
image.png 124.07 KB
  • Color: Customize the color
  • Display in: Select one of these options to display the Stamp option: Bottom bar, Upper bar, or inside the Profile
  • Upper Bar Alignment: Where to place the Stamp option within the upper/bottom bar. Options: Left, center, and right
  • Icon: Replace the icon 
  • Use image: Use an image instead of an icon
7. Next, click on the next 'Loyalty Points' tab.
image.png 124.25 KB
  •  Color: Customize the color
  •  Display in: Select one of these options to display the Loyalty points option: Bottom bar, Upper bar, or inside the Profile
  •  Upper Bar Alignment: Where to place the Loyalty points option within the upper/bottom bar. Options: Left, center, and right
  •  Icon: Replace the icon 
  •  Use image: Use an image instead of an icon
8. Then move onto the 'Favorite' tab.
image.png 124.23 KB
  •  Color: Customize the color
  •  Display in: Select one of these options to display the Favorite option: Bottom bar, Upper bar, or inside the Profile
  •  Upper Bar Alignment: Where to place the Favorite option within the upper/bottom bar. Options: Left, center, and right
  •  Icon: Replace the icon 
  •  Use image: Use an image instead of an icon
9. Save the changes.
Design options
10. Admin > Design > Bottom Bar. Select 'Design.'  With this option, you can fully customize the bottom bar itself.
11. Under the 'General' tab, you can customize the bottom bar show text. 
image.png 362.92 KB
  • Bottom Bar show text: Enable or disable showing tool tip
12. Move on to the 'Color' tab where you can customize the color.
image.png 409.78 KB
  • Bottom bar color: Color of the bottom bar
  • Icon color: Color of the icons. It is the color of the icons going to be unless you change it on each item level as discussed on the above sections
  • Active icon color: Active icons' color
13. Move on to the 'Popups' tab. With this option, you can customize the UI of resulting popup windows from the bottom bar.
image.png 436.28 KB
  • Modal Background:  Background color of the modal window
  • Modal Font Color: Color of the texts inside the modal window
  • Input fields background color: Text field background-color
  • Input fields font color: Popups' Text field font color
  • Example texts Font color: Color of the text in examples given inside the popups
  • Button background color: Button color
  • Button font color: Color of button text
14. Save the changes.
Sort options
15. Admin > Design > Bottom Bar. Select 'Sort.'  With this option, you can select the functional icons and then rearrange them using drag and drop.
image.png 352.46 KB
15. Once select the icon to display by selecting 'Choose existing' option, you can rearrange those icons using drag and drop.
image.png 380.75 KB
16. Save changes.
Last updated at 06.07.2022 00:10