Branded App: Customizing Your App's Features and Content

16 min read
Once you've designed your Branded App's theme, customize the content and features inside your app. Your branded app is made up of screens, similar to site pages. Choose how many screens you need as well as what each one displays.
Add elements to your screens based on your business such as a Wix Stores product page, an events list, or a Wix Bookings class schedule. Then customize the screen further with buttons, images, videos and more.
Choose whether to customize your app's content with the web editor in your site's dashboard or by downloading the Wix Owner app and customizing from mobile. 
Note:
Currently not all customization options are available from the web editor. It is recommended you download the Wix Owner App to have full customization abilities.
In this article, learn more about:

Customizing the header

Your branded app header lives on the 'Home' screen and is the first element members see after they log in to your app. Style it for your business by adding your logo, a cover photo, and a theme color to make your buttons and accents pop.
Wix Owner app
  1. Go to Mobile App in your site's dashboard.
  2. Select the tab for your branded app. If you've named your app already, the tab title will be your app's name. If you haven't named your app, the tab title says 'Your own mobile app.'
  3. Click Edit App to open the web editor.
    Note: If you haven't designed your app yet you need to choose the app name, theme and layout before you see the Edit App option.
  4. In the web editor, click your app's header to open the Edit Header panel.
A screenshot of the Edit Header panel in the dashboard web editor.
  1. Customize the design of your header using the available options:
    • Name: Update the name of your business or app.
    • Tagline: Add a custom tagline (your app's slogan or a short announcement).
    • Show logo: Click the toggle to show or hide your logo. Hover over the logo image to change or remove it.
    • Show general info: Click the toggle to display a link in your header that opens a screen with more info about your business including social links, contact information, and the site URL.
    • Cover photo: Click the Add icon  to upload a cover photo. You can also add multiple photos to create a slideshow that your members can scroll through. For slideshows, select a transition delay (in seconds) between photos.
  2. Click the Members info drop-down to choose what member information you want to show in the header: 
    • Show member count: Show or hide the number of members in your app's header.
    • Show member profiles: Show or hide member profile avatars in your app's header.
  3. Click the Action buttons drop-down to add buttons your header.
    • Show Invite Button: Click the toggle to show or hide a button that allows members to invite more people to your branded app.
    • Show Custom Button: Click the toggle to add a custom button to your header. For example, a Book Now button can send members to your booking or appointments tab.
  4. Click the Top bar icons drop-down to add additional icons to your header. Depending on the Wix apps you've installed (e.g. Wix Stores, Wix Chat) you may see additional customization options including:
    • Show Shopping Cart Icon: Click the toggle to add a shopping cart icon to the header so members can easily navigate to their cart.
    • Show Chat Icon: Click the toggle to add a chat icon to the header that directs members to chat with you.
  5. Click Save at the top right.

Customizing the navigation menu

Your branded app is made up of screens to help your members navigate between different areas of your app. You can choose whether the navigation menu appears at the top of bottom of your app. Then customize the design by adding custom menu icons.
Wix Owner app
  1. Go to Mobile App in your site's dashboard.
  2. Select the tab for your branded app. If you've named your app already, the tab title will be your app's name. If you haven't named your app, the tab title says 'Your own mobile app.'
  3. Click Edit App to open the web editor.
    Note: If you haven't designed your app yet you need to choose the app name, theme and layout before you see the Edit App option.
  4. Click the navigation bar of your app. It appears either under your app's header or at the bottom of the app.
A screenshot of the bottom bar navigation panel in the web editor.
  1. Choose a navigation layout:
    • Top Tab Bar: Members navigate between screens at the top of your app directly under the header.
    • Bottom Tab Bar: Members navigate between screens at the bottom of your app. You can add custom icons for each screen if you select this option.
      • Labels: Click the toggle to show or hide the name of the screen in the navigation menu. The name appears under the screen's icon. It is recommended to include the screen name for accessibility reasons.
      • Icons: Customize the icons in your navigation menu. Each icon corresponds to a screen. Hover over an icon and click Change icon to replace it.
  2. Click Save at the top right.

Adding elements to your screens

Elements make up the content of your app. Add elements to showcase who you are, what you do, and what you offer app members. For example, if you own an event planning business, add an Events element so people can RSVP straight from the app.
Once you've added elements to your app, move them up or down the same screen or switch them to a different screen entirely. You can also duplicate elements, remove unwanted ones, and edit the content within each element.
Tip:
Learn more about adding elements for specific businesses such as online stores, restaurants and bookings.
Wix Owner app
  1. Go to Mobile App in your site's dashboard.
  2. Select the tab for your branded app. If you've named your app already, the tab title will be your app's name. If you haven't named your app, the tab title says 'Your own mobile app.'
  3. Click Edit App to open the web editor.
    Note: If you haven't designed your app yet you need to choose the app name, theme and layout before you see the Edit App option.
  4. Click Elements at the left of the web editor.
  5. Browse through the catalog and click an element to add it to your app.
    Tip: In Basic Items you can add elements to design and organize your app like buttons, images, divider lines and videos.
A screenshot of the element catalog in the web editor with an event carousel selected.
  1. Click the element in the app preview to customize its display and content settings.
Note:
Not all elements can be customized from the web editor and may need to be updated from the Wix Owner app.
  1. (Optional) Manage the element further using the available options. Note: Different options may appear depending on the element you added.
    • Element Visibility: Choose whether to display the element on Android devices, iOS devices, or both. Learn more about showing or hiding elements on different operating systems.
      1. Click the element.
      2. Under Element visibility in the Edit panel choose an option: All, Android or iOS.
    • Reorder an element:
      1. Click the element.
      2. Click the Up or Down arrows next to the element to reorder it on the screen.
    • Duplicate an element:
      1. Click the element.
      2. Click the Duplicate icon  . The new element appears above the original element.
    • Remove an element:
      1. Click the element.
      2. Click the Delete icon next to the element.
      3. Click Delete to confirm.
  2. Click Save at the top right.
A screenshot of en element with the reorder duplicate and delete options selected.

Managing your screens

Update your app's screens including how many screens you want to show in your navigation bar, the order of the screens, and the screen names. You can also create screens that are hidden from your app's main menu.
Wix Owner app
  1. Go to Mobile App in your site's dashboard.
  2. Select the tab for your branded app. If you've named your app already, the tab title will be your app's name. If you haven't named your app, the tab title says 'Your own mobile app.'
  3. Click Edit App to open the web editor.
    Note: If you haven't designed your app yet you need to choose the app name, theme and layout before you see the Edit App option.
  4. Click Screens at the left of the web editor.
  5. Choose what you want to do:
    • Add a new screen: Choose whether to add a screen that appears in your app's main navigation bar, or a screen that's hidden from navigation.
      • To add a screen in the navigation bar:
        1. Click + Add next to Screens in navigation.
        2. Enter a name for the new screen.
        3. Drag the screen up or down to where it should appear in the navigation bar. 
      • To add a screen not in navigation:
        1. Click + Add next to Screens not in navigation.
        2. Enter a name for the new screen.
        3. Click the checkmark icon   to save the screen name.
    • Set screen permissions: Set permissions for each screen so that only those members with specific badges or pricing plans can access them. 
      1. Click the More Actions icon  next to the relevant screen.
      2. Click Set permissions.
      3. Choose who can access this tab: All members, members with badges or members with pricing plans
    • Remove a screen from navigation: Hide a screen from the navigation bar. When you select this option the screen moves to the Screens not in navigation section.
      1. Click the More Actions icon  next to the relevant screen.
      2. Click Remove from navigation.
        Tip: To unhide, click the More Actions icon  next to the the screen and click Add to navigation.
    • Reorder a screen:
      • Click the screen you want to reorder and drag it up or down in the navigation.
    • Rename a screen:
      1. Click the More Actions icon   next to the relevant screen.
      2. Click Rename. 
      3. Enter a new screen name.
    • Delete screen:
      1. Click the More Actions icon  next to a screen.
      2. Cick Delete
      3. Click Delete to confirm.
A screenshot of the More Actions menu next to a screen in the navigation.
  1. (Optional) Manage your branded app's launch and login screens. Learn more about designing each screen.
    1. Launch screen: 
      1. Click Launch under System screens.
      2. Update the background color and image of your launch screen.
        Note: Changes to your app's launch screen go live once you resubmit your app to the App Store and Google Play.
    2. Login screen: 
      1. Click Login under System screens.
      2. Edit the login screen text, background color and image.
  2. Click Save at the top right.

FAQs

Click a question below to learn more about customizing your branded app's features. 

Video tutorial

Did this help?

|