Branded App: Customizing Your App's Features and Content
27 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. You can also further customize the design of your app by choosing different colors and fonts.
Choose whether to customize your app's content from your site's dashboard or by downloading the Wix Owner app and customizing from mobile.
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.
Dashboard
Owner app
Studio app
- Go to Branded Mobile App in your site's dashboard.
- Click Edit Mobile App.
- Click Design on the left.
- In the web editor, click your app's header to open the Edit Header panel.
- Customize the design of your header using the available options:
- Icons: Enable the relevant toggles to add additional icons to your header.
Note: Depending on the Wix apps you've installed (e.g. Wix Stores, Wix Chat) you may see different customization options. - Type: Select a header design for your home screen:
- Icons: Enable the relevant toggles to add additional icons to your header.
Detailed
to upload a cover photo. You can add multiple photos to create a slideshow. For slideshows, select a transition delay (in seconds) between photos.
Minimal
7. 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.
Dashboard
Owner app
Studio app
- Go to Branded Mobile App in your site's dashboard.
- Click Edit Mobile App.
- Click the navigation bar of your app. It appears either under your app's header or at the bottom of the app.
- 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.
- 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.
Dashboard
Owner app
Studio app
- Go to Branded Mobile App in your site's dashboard.
- Click Edit Mobile App.
- Click Elements at the left of the web editor.
- 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.
- 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.
- (Optional) Manage the element further using the available options:
Note: Different options may appear depending on the element you added.
Element Visibility
Reorder an element
Duplicate an element
. Remove an element
next to the element.8. Click Save at the top right.
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.
Dashboard
Owner app
Studio app
- Go to Branded Mobile App in your site's dashboard.
- Click Edit Mobile App.
- Click Screens at the left of the web editor.
- Choose what you want to do:
Add a new screen
to save the screen name.Reorder a screen
Set screen permissions
next to the relevant screen.Remove a screen from navigation
Rename a screen
Delete screen
- (Optional) Manage your branded app's launch and login screens. Learn more about designing each screen.
- Launch screen:
- Click Launch under System screens.
- 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.
- Login screen:
- Click Login under System screens.
- Edit the login screen text, background color and image.
- Launch screen:
- Click Save at the top right.
Customizing your app design
Personalize your app's colors and fonts that align with your brand. Select an app theme or handpick colors and fonts to show your unique brand design.
Dashboard
Owner app
Studio app
- Go to Branded Mobile App in your site's dashboard.
- Click Edit Mobile App.
- Click Design on the left.
- Choose what you want to customize:
- Color theme: Customize the colors of your app by selecting a color theme or individually choose the primary color, app background and text icons.
- Text theme: Customize your font by selecting a text theme or adjust the fonts for the headings and body individually.
Tip: Click Change App Theme to choose a pre-designed combination of colors and fonts.
- Header style: Customize the color of your header to match your primary color or your background color.
- Click Save.
FAQs
Click a question below to learn more about customizing your branded app's features.
How do I change my app language?
Why do I need to download the Wix Owner App?
If I make changes to the features and content of my app, do I have to resubmit it for review?
Video tutorial
Did this help?
|