Get started  
Login  

Help Center

Community / Forum Ask Zappter Support We build your app Marketplace

Documentation

English

General

Getting started Creating content Installing plugins Customizing upper bar Customizing bottom bar Changing template Try the app Changing Rules Changing Logo Accessing Web App
Changing the design Customizing Design Typography Button Colors Hiding an element Resizing, Rotating & Cropping Images Marketplace App Designs
Add a sidebar menu Creating a sidebar Customizing the sidebar Restoring default sidebar
Create intro slides Setting up intro slides Duplicating a slide
Workstations Understanding Workstations Mail Groups & Accounts
Publishing your app App Store Submission App Icon App Store Description Keywords Screenshots Startscreen Google Feature Graphic Apple Guidelines All Set, Submit
Custom web-app domain Setting Up Custom Domain Domain Redirects
Account & Help Troubleshooting Granting Support Access Manage Subscriptions Changing Account Info Restart from scratch
Pages & Categories Creating pages Creating categories Creating sub-categories Linking categories Creating user-targeted content Limiting to Registered Users Only Upperbar & Bottombar Categories Horizontal Scrolling Pages Google Maps Marker

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

E-Commerce / Shop Setting Defaults Creating Articles How to Design Product Pages? Making Orders Receiving Orders - Workstations Receiving Orders - Admin Viewing Results & Stats Restrict Countries Enabling Loyalty Points Adding Variations and Modifiers Using Ingredients Enabling Tips Enabling Customer Ratings Setting up Upsell & Cross-sell Setting up Packages Enabling Value Added Taxes Enabling Shipment Costs More Customer Data
Event-System / Drop-In Creating Event Categories Creating Events Adding to Content Making Event Bookings Event Bookings on Workstations Event Overview in Admin
Real-time Chat Setting Up Live Chat
Reservation & Booking System Setting Defaults Creating a Predefined Booking Creating a Flexible Booking Restaurant Booking Apps Hourly Bookings Daily Bookings Making Bookings Receiving Bookings - Workstations Receiving Bookings - Admin Viewing Results & Stats

New

Custom Developer Accounts Introduction / FAQ
Creating an Apple Developer Account Create an Apple-ID Enrollment / Account creation Individual / Sole Proprietor Company / Organization Inviting Zappter to your Apple Developer Account Creating your first app and app identifier Create an Apple Distribution Certificate Creating your provisioning profile Creating an Apple Push Certificate Creating App Store Connect Key
Creating a Google Developer Account Create a Google Account Creating a Google Developer Account Google ID Verification Inviting Zappter to your Google Developer Account Granting API-Access to your Google Developer Account
App Submission Renewing Push-Certificate
Forum Setup your EULA Forum settings Create forum categories Adding a forum widget
CSS Editor Creating CSS Testing the CSS
Loading Indicators Enabling a loading indicator
In-App Purchases Guidelines
Requirements Connect your developer accounts Obtain Google Billing Key Generate & Upload APK / AAB File Accept Apple Paid Apps Agreement
Types of In-App Purchases
Using In-App Purchases Creating In-App Purchases
Using Subscriptions Setup Webhooks Create subscriptions in the Apple App Store Create subscriptions in the Google Play Store
Using In-App Entitlements Locking / Unlocking Content Troubleshoot
QR-Code Rating System Creating a campaign Configure settings
Verified Profile Enable profile verification Custom fields Accepting verification requests
Epson Print Plugin Printer setup Creating a printer Printing / Testing SSL Quirks & Help Troubleshoot / Help
Buy & Consume Create a system to buy and consume Allow users to purchase credit Allowing users to consume Viewing transactions Manually adjust the account balance Enabling "My Balance" page Automatically grant consumables

More Tutorials

Accordion Adding Accordion to Content
Add a sidebar menu Creating a sidebar Customizing the sidebar Restoring default sidebar
Age Clearance Setting Up Age Clearance
App-Banner Setting Up Using App Banner
Apple SignIn Integrating Apple
Article Groups Article Groups Managing Article Groups Using Article Groups Ordering - Mobile
Audio Player Adding to Content Sample on the Mobile Device
Audio Stream Adding Audio Steam to Content
Bexio Integration Obtaining an API-Key
Bottom & Upper Bar Customize bottom bar Customize upper bar
Buy & Consume Create a system to buy and consume Allow users to purchase credit Allowing users to consume Viewing transactions Manually adjust the account balance Enabling "My Balance" page Automatically grant consumables
CRM - Custom Fields Extension Creating Custom Fields Custom Field Example Configuring Custom Fields Using Custom Fields Custom Fields on Sign-up Page
CRM - Email Extension Sending Emails from Profiles
CRM - File Extension Profile Attachments Adding Quick-access in Bottom Bar
CRM - Notes Extension Adding Notes to a Profile
CRM - Tags Extension Tagging Profiles User targeted content
CRM User Groups Creating user groups Creating registration pages
CSS Editor Creating CSS Testing the CSS
Checkable Content Adding checks
Color-Picker Using Color Picker
Colors Setting Color Schemes
Contact Form Customizing Contact Forms Adding Contact Form on Content
Content Groups Creating Content Groups QR Code, Link & Iframe
Cookie Policy Generator Generating Cookie Policy Adding to Sidebar
Countdown Timer Add a countdown
Covid Tracing Plugin Setting Up COVID Tracing
Create intro slides Setting up intro slides Duplicating a slide
Custom Developer Accounts Introduction / FAQ
Creating an Apple Developer Account Create an Apple-ID Enrollment / Account creation Individual / Sole Proprietor Company / Organization Inviting Zappter to your Apple Developer Account Creating your first app and app identifier Create an Apple Distribution Certificate Creating your provisioning profile Creating an Apple Push Certificate Creating App Store Connect Key
Creating a Google Developer Account Create a Google Account Creating a Google Developer Account Google ID Verification Inviting Zappter to your Google Developer Account Granting API-Access to your Google Developer Account
App Submission Renewing Push-Certificate
Custom Form Rule Creating Form Rules Using Form Rules
Custom Payment Rules Creating Payment Rules Using Payment Rules
Custom web-app domain Setting Up Custom Domain Domain Redirects
Datatrans Integrating Datatrans Adding Datatrans Rule
Date Slider Creating Date Slider Adding Date Slider
DeepL Setting Up DeepL
Delivery System Basic configuration Costs on order types
Disable upper distance Setting Up
Document Uploader & Embedder Setting Up Doc. Uploader
E-Commerce / Shop Setting Defaults Creating Articles How to Design Product Pages? Making Orders Receiving Orders - Workstations Receiving Orders - Admin Viewing Results & Stats Restrict Countries Enabling Loyalty Points Adding Variations and Modifiers Using Ingredients Enabling Tips Enabling Customer Ratings Setting up Upsell & Cross-sell Setting up Packages Enabling Value Added Taxes Enabling Shipment Costs More Customer Data
EULA Generator Creating an EULA Display EULA in the app
Embed Video Adding Video to Content
Epic Games OAuth Integrating Epic
Epson Print Plugin Printer setup Creating a printer Printing / Testing SSL Quirks & Help Troubleshoot / Help
Event-System / Drop-In Creating Event Categories Creating Events Adding to Content Making Event Bookings Event Bookings on Workstations Event Overview in Admin
Facebook OAuth Integrating Facebook
Favorites Setting Up Favorites Turning off Favorites
Form Generator: Points Calculator Configuration of the points calculator Adding a form element
Formgenerator Setting Forms Defaults Creating Forms Assigning Forms Inline Forms - App Content Form Buttons - App Content Forms in Mobile
Forum Setup your EULA Forum settings Create forum categories Adding a forum widget
Gallery Album Extension Creating an album Creating a gallery element
Gallery Using Gallery
Gastronomy Toolkit Showing the list
Github OAuth Integrating GitHub
Google Analytics Setting Up Google Analytics
Google Maps Adding Google Maps Using Markers with Categories Maps on Mobiles
Google OAuth Integrating Google
Google Tag Manager Integrating Google Tag Manager
Google Translate - By Zappter Enabling Non-API Translation
Horizontal Scrolling Adding Horizontal Scrolling
Hotjar Integrating Hotjar
Howler Audio Player Adding Howler Audio Player
Hubspot Chat Integrating HubSpot Chat Customizing Chat Widget
IP-Address Limitation Setting Default Messages Adding IP-Limit Rule
Iframe Element Creating Iframe
Image Zoom Enabling Image Zooming
In-App Purchases Guidelines
Requirements Connect your developer accounts Obtain Google Billing Key Generate & Upload APK / AAB File Accept Apple Paid Apps Agreement
Types of In-App Purchases
Using In-App Purchases Creating In-App Purchases
Using Subscriptions Setup Webhooks Create subscriptions in the Apple App Store Create subscriptions in the Google Play Store
Using In-App Entitlements Locking / Unlocking Content Troubleshoot
Ingenious QR-Codes Creating QR-Codes Managing QR-Codes Using Your QR-Code / Link
Ingredient System Creating Ingredients Creating Ingredient Groups Assigning Ingredients Ordering with Ingredients Viewing Results in Stats
Instagram Integrating Instagram Adding Instagram Feed
Legal Disclosure Generator Generating Legal Disclosure Adding to Sidebar
Levitating Shopping Cart Setting Up Levitating Shopping Cart
Link Adding URL Links
Loading Indicators Enabling a loading indicator
Lottie JS Adding Lottie Animation
Loyalty Points Loyalty Points Defaults Overriding Loyalty Earnings Adding Loyalty Rule Tracking Points in Admin Buying with Points Viewing Available Points
Mailchimp Integrating MailChimp Managing Subscriptions Exporting to Mailchimp
Mailerlite Integrating MailerLite
Microsoft Azure OAuth Integrating MS Azure
Mini Golf Game Setting Up Mini Golf Game Adding to Content
Minimum Order Value Enabling Min. Order Value
Modifiers Creating Modifiers Creating Modifier Groups Assigning Modifiers Ordering with Modifiers Viewing Results in Stats
Multilingual App Adding Languages Managing Languages
Multiple Admin Users Creating Admin Users
Non-Tax Attachments Creating Non-tax Attachment Assigning Non-Tax Attachments
Opening Hours Setting Up Opening Hours
Order Export / Fulfillment Tool Creating Order Exports Managing exports
PDF Widget Displaying PDFs on Content
Pages & Categories Creating pages Creating categories Creating sub-categories Linking categories Creating user-targeted content Limiting to Registered Users Only Upperbar & Bottombar Categories Horizontal Scrolling Pages Google Maps Marker
PayPal Integrating PayPal Adding PayPal Rule
Paymob Integrating Paymob Adding Paymob Rule
Payrexx Integrating Payrexx Adding Payrexx Rule
Permission Groups Permission Groups Creating Admin-Users Linking Permission Groups to Users
Picture Marker Using Picture Marker
Picture collection game Setting Up Adding to Content
Picture Adding Images Working with Image Gallery Enhance, Resize, Crop Images
Places Setting Defaults Creating Places Managing QR Codes Creating Events Adding Places Rule Troubleshooting Maximize Your Benefits
Privacy Policy Generator Generating Policy Text Adding to Sidebar
Promotions & Discounts Creating Promotions Promotion on Devices
Publishing your app App Store Submission App Icon App Store Description Keywords Screenshots Startscreen Google Feature Graphic Apple Guidelines All Set, Submit
Push-Notifications Setting Defaults Creating Push Notifications Enabling Push in Content Enabling Push in Slides Enable Push at App Start Checking Push Status
QR-Code Rating System Creating a campaign Configure settings
QR-Code Scanner Setting Up QR Code Scanner
RSS Feed Setting Up RSS Feeds RSS from WordPress Sites
Rating System Setting Up Rating
Real-time Chat Setting Up Live Chat
Receipts Customizing Receipts
Recommendations Setting Up Recommendations Recommendation on Mobile
Request System Creating Requests Making Requests Receiving Requests - Workstations Receiving Requests - Admin Viewing Results & Statistics
Reservation & Booking System Setting Defaults Creating a Predefined Booking Creating a Flexible Booking Restaurant Booking Apps Hourly Bookings Daily Bookings Making Bookings Receiving Bookings - Workstations Receiving Bookings - Admin Viewing Results & Stats
Rounded Buttons Using Rounded Buttons
SMS-Authentication Setting Up SMS Authentication
SMTP Mailer Setting Up SMTP Mailer
Scavenger Hunt Setting Up Adding to Content
Search Bar Adding Search Bar
Sendgrid Integrating SendGrid
Service Stations Setting Up Service Stations Creating Service Stations
Shipment costs Basic configuration Shipping rules Setting item weights Shipment tracking
Shopify Connector Using Shopify Connector
Shortcuts Creating, Editing Shortcuts
Sidebar Elements Adding Sidebar Elements
Simple Inventory Setting Up Simple Inventory Tracking Inventory
Slider Setting Up Sliders
Spotify Widget Adding Spotify Widget
Stamp-System Setting Up Stamp Defaults Adding Stamp Rule Allow 'Full Price' with Stamps Adding Stamps - Workstations
Stores Creating New Stores Creating Store Content Multistore Advanced Tasks
Stripe Integrating Stripe Adding Stripe Rule
Surcharges Setting up Surcharges
Tags & Filters Creating tags Assign tags to elements Add filters & dropdowns
Tawk Chat Integrating Twak Chat
Terms & Conditions Creating Terms & Conditions Adding to Sidebar
Text in Picture Adding Text in Picture
Text Adding Text to Content
Tip & Gratuity Setting Up Tips
Title Adding Title to Content
Transfer Orders Day-end Transfers to POS
Twilio SMS Gateway Integrating Twilio SMS
Twint by Payrexx Integrating TWINT Adding TWINT Rule
Twitch OAuth Integrating Twitch
Twitch Widget Adding Twitch Widget
VIP Payment Rule Setting Up VIP Pay Rule Adding VIP Pay Rule
VK OAuth Integrating VK
Value added taxes Defining Taxes Adding Taxes VAT Reporting
Variations Variations Default Creating Variations Assigning Variations
Vbout Integrating Vbout Using Vbout
Verified Profile Enable profile verification Custom fields Accepting verification requests
Video Bulk Uploader Uploading videos
Video Adding a Video
Voucher System Voucher Defaults Creating Vouchers Distributing & Managing Vouchers Using Vouchers
Wallee Integrating Wallee Adding Wallee Rule
Whitelabel E-Mail Setting Up Whitelabel Email
WooCommerce Connector Using WooCommerce Connector
Workstations Understanding Workstations Mail Groups & Accounts
YesStreaming Player Adding YesStreaming to Content
Youtube Channel Adding YT Channel to Content
Youtube Playlist Add YT Playlist to Content
ZIP-Code Limitation Setting Up Zip Code Limitations Adding Zip Code Rule
Zappter CRM - My Customers Managing CRM Profiles Other CRM Plugins
ePUB: E-Book Reader Setting Up ePub: E-Book Reader
Documentation

Customizing upper bar

Create a unique upper bar

Documentation Getting started Customizing upper bar

Customizing upper bar

Customizing your 'upper bar' or 'bottom bar' enhances the user experience and helps your app adapt to your brand. You can customize the upper bar and its style, behavior, user interface, and every UI element on the upper bar such as menu, logo, and shopping cart.
Upper bar elements: menu, logo, and cart
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 > Upper Bar. By default, it opens with 'Design' option selected. 
image.png 457.07 KB
2. Click on the 'Settings' to start from there for this tutorial. The 'Menu' tab is selected.
image.png 458.99 KB
3. You can customize the below settings under this tab for your app menu.
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.

  • Color: Change the color of the hamburger menu
  • Display in: You can choose to display the menu on the upper bar or bottom bar
  • Upper Bar Alignment: The menu can be left-aligned, right-aligned, or centered using this option
  • Icon: You can change the default icon of the menu using this option
  • Use image: Instead of an icon, you can choose to use an image for the menu
4. Save as explained above, and move on to the 'Cart' tab. 
image.png 463.31 KB
5. Under the 'Cart' tab, you can change these settings for the shopping cart icon on your app.
  • Color: Change the color of the shopping cart icon
  • Display in: You can choose to display the  cart on the upper bar or bottom bar
  • Upper Bar Alignment: The  cart can be left-aligned, right-aligned, or centered using this option
  • Icon: You can change the default icon of the  cart using this option
  • Use image: Instead of an icon, you can choose to use an image for the  cart 
6. Save changes, if you haven't.
Design options
7. Click on the 'Design' button.
image.png 455.28 KB
8. The 'Upper Bar' tab is selected by default. Here you can customize the below settings for the upper bar itself.
  • Upper Bar Background Color: The color of the upper bar
  • Upper Bar Style: You can choose one of three different styles for your upper bar: 1. Default, 2. Thin, and 3. Hidden
  • Menu Container Size: What is the width of the menu icon area in percentage. (default is 33.3% to equally divide the width among menu icon area, logo area, and cart icon area)
  • Logo Container Size:  What is the width of the logo area in percentage. (default is 33.3% to equally divide the width among menu icon area, logo area, and cart icon area) 
  • Right Container Size:  What is the width of the cart icon area in percentage. (default is 33.3% to equally divide the width among menu icon area, logo area, and cart icon area) 
  • Container Sorting: With this option, you can rearrange which icon area comes first, second and the third. For example, to move the logo to the first, then cart icon, and then menu
9. Save changes, if you haven't done so. Move on to the 'Logo' tab.
image.png 380.02 KB
10. Here in this tab, you can upload the logo and save changes.
You can also upload logo from: Admin > Settings > Logo.
Sort options
11. Click on the 'Sort' button. Use this option to set the order for three primary items on the upper bar. It is the same functionality discussed under 'Container sorting' in step 8 above.
image.png 366.62 KB
12. Use drag and drop to rearrange the icons, Cart and Menu and save changes.
Previous Step
Installing plugins Installing plugins Next Step
Customizing bottom bar Customizing bottom bar
Related Guides



Changing the design Add a sidebar menu Create intro slides Workstations Publishing your app Custom web-app domain
Last updated at 11.07.2022 13:27