Wix Mobile Apps: Customizing Your App's Header

7 min read
Your app's header appears at the top of each of your app screens. Tailor your app header to highlight important information, such as your business logo, invite and other action buttons (e.g. Book Now).
In this article, learn about:

The difference between the Spaces app and your own mobile app

Depending on which app you've opted to use (Spaces or your own mobile app), you'll have different customization options.

Spaces App

With the Spaces app, your header always appears detailed strip at the top of your app screens. You can customize the info displayed in this strip. 
An example of how the header look in the Spaces by Wix app

Your own native mobile app

With a native mobile app, you can choose between a detailed strip or a more minimalist design. You can also choose to show or hide the chat icon which allows app members to start a chat with you, or turn the minimalist header transparent.
An example comparing the two header options in the Branded by Wix app

Customizing your app's header

Customize your app's header to ensure it fits your brand and gives your members a seamless experience.
Dashboard
Wix app
Wix Studio app
  1. Go to Mobile App in your site's dashboard.
  2. Click the relevant tab (e.g. Spaces by Wix appYour own mobile app). 
  3. Click Edit Mobile App
  4. Select the Header section in the app editor to open the Edit Header panel.
An example showing how to select the header
  1. Enable or disable the Show chat icon toggle to show or hide the chat icon at the top of your header.
  2. Choose a header type:
    • Detailed: The header appears as a large strip and shows detailed information. Continue to step 6 to customize what you want to show.
    • Minimal: The header appears as a thin strip with just a profile icon, alert icon and chat icon (if enabled in step 4). There are currently no further customization options available for the minimal type, however you can change the header style to transparent from the Design panel.
Note:
The Minimal header type is only available if you're using the Branded app.
  1. Customize what info you want to show in your header:
    • Title: Enter or edit the title of your app. The title appears under the cover photo. When using the Detailed header type, the title is mandatory.
    • Subtitle: Enter a subtitle which appears under the title. The subtitle is not mandatory. 
    • Show logo: Enable or disable the toggle to show or hide your business logo. If enabled Click Add image and choose a file from your media manager. Tip: You can crop the image to make sure it fits perfectly.
    • Show general info: Enable or disable the toggle to show or hide the General Info link which redirects to a screen with general info about your business. 
Note:
You can edit the info itself from the Wix app.
  1. Customize the info you show about your app members:
    • Show member count: Enable or disable the toggle to show or hide the number of members you have. If enabled, enable or disable the Show member profiles toggle to show or hide your members' profile avatars.
  2. Customize the action buttons on you want to show in your header:
    • Show invite button: Enable or disable the toggle to show or hide the Invite button which allows people to invite others to your app.
    • Show custom button: Enable the toggle to show a button with a specific action and customize its text (e.g. Book Now). If enabled, select the button action and edit the button text.
  3. Click Save at the top right.

Did this help?

|