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.png69.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.png468.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 iconwithin 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.png505.26 KB
Enable HomeButton: Enable or disable the home button
Color: Customize the color of the home button
4. Move on to the 'Orders' tab.
image.png451.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.png395.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.png124.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.png124.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.png124.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.png362.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.png409.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.png436.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.png352.46 KB
15. Once select the icon to display by selecting 'Choose existing' option, you can rearrange those icons using drag and drop.
