Wix Mobile Apps: Customizing Your Native App's Features and Content
Once you've designed your own native mobile app's theme, customize its content and features. Your native 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 needs, such as a Wix Stores Product page, a Wix Events list, or a Wix Bookings class schedule. Customize your screen further with buttons, images, videos, and more. You can also enhance your app's design by selecting different colors and fonts.
Choose whether to customize your app's content from your site's dashboard or by downloading the Wix app and customizing from mobile.
Customizing the header
Your mobile app's header appears 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
Go to Mobile App in your site's dashboard.
Click the Your own mobile app tab or click the tab with the name of your own mobile app.
Click Edit Mobile App.
In the Mobile App Builder, 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 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:
Detailed
Create your header with features like your logo, a cover photo, and more. You can choose how much content you want to include.
App info: Add your app details, for example a name and tagline. You can also enable the Show logo toggle to add a logo to your header. To add a header link with more about your business, including social links, contact info, and site URL, enable the Show general info toggle
Cover photo: Click the Add icon
to upload a cover photo. You can add multiple photos to create a slideshow. For slideshows, select a transition delay (in seconds) between photos.
Members info: Choose what member information you want to show in the header by enabling the available toggles.
Action buttons: Add an invite button for members to invite others to your native app. You can also create a custom button to navigate users to another screen within the app.
Note: The available actions vary based on the apps you have on your site.
Minimal
For a more classic, clean look you can choose a minimal header to show a small bar at the top of your app.
6. Click Save at the top right.
Wix app
Go to your site in the Wix app.
Tap Manage
at the bottom.
Tap Mobile App.
(If needed) Switch to editing your own mobile app:
Tap the member app name at the top (e.g. Spaces by Wix App).
Select Mobile App Builder or Create a native mobile app.
(1st time only) Tap Get Started.
Tap Edit.
Tap Change Header Design.
Choose a header design for your home screen:
Detailed
Create your header with features like your logo, a cover photo, and more. You can choose how much content you want to include.
Tap the detailed header, then tap Customize to edit it.
Choose what you want to edit:
App info: Add details about your app like a name and tagline. You can also enable the Show logo toggle to add a logo to your header. To add a header link with more about your business, including social links, contact info, and site URL, enable the Show general info toggle
Cover photo: Tap Add Image to upload a cover photo. You can add multiple photos to create a slideshow. For slideshows, select a transition delay (in seconds) between photos.
Members info: Choose what member information you want to show in the header by enabling the available toggles.
Action buttons: Add an invite button for members to invite others to your native app. You can also create a custom button to navigate users to another screen within the app.
Note: The available actions vary based on the apps you have on your site.
Tap Save on the top right.
Minimal
For a more classic, clean look you can choose a minimal header to show a small bar at the top of your app.
Tap the minimal header, then tap Customize to edit it.
Choose what you want to edit:
Style: Customize your header color to match your primary color or your background color. You can also choose which icons you want to display on the header.
Icons: Enable the 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.
Tap Save on the top right.
9. Tap Done.
Wix Studio app
Go to your site in the Wix Studio app.
Tap Mobile App.
(If needed) Switch to editing your own mobile app:
Tap the member app name at the top (e.g. Spaces by Wix App).
Select Mobile App Builder or Create a native mobile app.
(1st time only) Tap Get Started.
Tap Edit.
Tap Change Header Design.
Choose a header design for your home screen:
Detailed
Create your header with features like your logo, a cover photo, and more. You can choose how much content you want to include.
Tap Customize to edit your header.
App info: Add details about your app like a name and tagline. You can also enable the Show logo toggle to add a logo to your header. Enable the Show general info toggle to add a header link with more about your business, including social links, contact info, and site URL.
Cover photo: Tap Add Image to upload a cover photo. You can add multiple photos to create a slideshow. For slideshows, select a transition delay (in seconds) between photos.
Members info: Choose what member information you want to show in the header by enabling the toggles.
Action buttons: Add an invite button for members to invite others to your native app. You can also create a custom button to navigate users to another screen within the app.
Note: The available actions vary based on the apps you have on your site.
Tap Save on the top right.
Minimal
For a more classic, clean look you can choose a minimal header to show a small bar at the top of your app.
Tap Customize to edit your header.
Style: Customize your header color to match your primary color or your background color. You can also choose which icons you want to display on the header.
Icons: Enable the 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.
Tap Save on the top right.
8. Tap Done.
Customizing the navigation menu
Your own mobile app consists of screens, and the navigation menu helps visitors move between them. You can choose to place the navigation menu at the top or bottom of your app and customize its design by adding custom menu icons.
Dashboard
Go to Mobile App in your dashboard.
Click the Your own mobile app tab or click the tab with the name of your own mobile app.
Click Get started or 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.
Wix app
Go to your site in the Wix app.
Tap Manage
at the bottom.
Tap Mobile App.
(If needed) Switch to editing your own mobile app:
Tap the member app name at the top (e.g. Spaces by Wix App).
Select Mobile App Builder or Create a native mobile app.
(1st time only) Tap Get Started.
Tap Edit.
Tap Design at the bottom of your screen.
Tap Navigation.
Choose a layout for your navigation menu:
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: Tap the toggle to show or hide the name of the screen in the navigation menu. The name appears under the screen's icon.
Tip: 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. Tap the Edit icon
next to an icon to update it.
Tap Save at the top right.
Wix Studio app
Go to your site in the Wix Studio app.
Tap Mobile App.
(If needed) Switch to editing your own mobile app:
Tap the member app name at the top (e.g. Spaces by Wix App).
Select Mobile App Builder or Create a native mobile app.
(1st time only) Tap Get Started.
Tap Edit.
Tap Design at the bottom of your screen.
Tap Navigation.
Choose a layout for your navigation menu:
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: Tap the toggle to show or hide the name of the screen in the navigation menu. The name appears under the screen's icon.
Tip: 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. Tap the Edit icon
next to an icon to update it.
Tap Save at the top right.
Adding elements to your screens
Elements are the building blocks of your app's content. Use them to showcase who you are, what you do, and what you offer to app users. For instance, if you own an event planning business, you can add an events element to allow people to RSVP directly from the app.
After adding elements, you can easily move them up or down on the same screen or transfer them to a different screen. You also have the option to duplicate elements, remove any that you don't want, and edit the content within each element.
Tip:
Learn more about adding elements for specific businesses such as online stores, restaurants and bookings.
Dashboard
Go to Mobile App in your dashboard.
Click the Your own mobile app tab or click the tab with the name of your own mobile app.
Click Get started or click Edit Mobile App.
Click Elements on the left.
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 in the Mobile App Builder. You may need to update some elements from the Wix app or Wix Studio app.
(Optional) Manage the element further using the available options:
Note: The options vary depending on the elements you add.
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.
Click the element.
Under Element visibility, choose an option: All, Android or iOS.
Reorder an element
Click the element.
Click the up or down arrows next to the element to reorder it on the screen.
Duplicate an element
Click the element.
Click the Duplicate icon
.
Note: The new element appears above the original element.
Move the element to a different screen
Click the element.
Click the Move to a different screen icon
.
Select a screen from the drop-down.
Click Move.
Delete an element
Click the element.
Click the Delete icon
next to the element.
Click Delete to confirm.
8. Click Save at the top right.
Wix app
Go to your site in the Wix app.
Tap Manage
at the bottom.
Tap Mobile App.
(If needed) Switch to editing your own mobile app:
Tap the member app name at the top (e.g. Spaces by Wix App).
Select Mobile App Builder or Create a native mobile app.
(1st time only) Tap Get Started.
Tap Edit.
Go to the screen where you want to add a new element. You can switch between screens using the Screen drop-down at the top.
Tap + Add Element in the section where you want the new element to appear.
Choose an element from the catalog.
Tip:
In Basic Items you can add elements to design and organize your app like buttons, images, divider lines and videos.
Depending on the element you've added, adjust its content and display settings.
Tap Add at the top right.
Note: Some elements are added automatically and don't require this step.
(Optional) Manage and customize the element further. Tap the Edit icon
at the top right of an element and choose what you want to do:
Customize the element:
Tap Customize element.
Edit details about the element such as:
Element Location: Select the screen you want the element to appear in.
Element Title: Change the element title and choose whether to show or hide it.
Element Visibility: Choose whether to display the element to Android devices, Apple devices, or both. Learn more about showing or hiding elements on different operating systems.
Display Settings: Control how your element looks on the screen and how the information is displayed.
Reorder an element: Tap Move up or Move down to reorder the element on the screen.
Duplicate an element: Tap Duplicate. The new element appears above the original element.
Delete an element:
Tap Delete element.
Tap Delete element to confirm.
Wix Studio app
Go to your site in the Wix Studio app.
Tap Mobile App.
(If needed) Switch to editing your own mobile app:
Tap the member app name at the top (e.g. Spaces by Wix App).
Select Mobile App Builder or Create a native mobile app.
(1st time only) Tap Get Started.
Tap Edit.
Go to the screen where you want to add a new element. You can switch between screens using the Screen drop-down at the top.
Tap + Add Element in the section where you want the new element to appear.
Choose an element from the catalog.
Tip:
In Basic Items you can add elements to design and organize your app like buttons, images, divider lines and videos.
Depending on the element you've added, adjust its content and display settings.
Tap Add at the top right.
Note: Some elements are added automatically and don't require this step.
(Optional) Manage and customize the element further. Tap the Edit icon
at the top right of an element and choose what you want to do:
Customize the element:
Tap Customize element.
Edit details about the element such as:
Element Location: Select the screen you want the element to appear in.
Element Title: Change the element title and choose whether to show or hide it.
Element Visibility: Choose whether to display the element to Android devices, Apple devices, or both. Learn more about showing or hiding elements on different operating systems.
Display Settings: Control how your element looks on the screen and how the information is displayed.
Reorder an element: Tap Move up or Move down to reorder the element on the screen.
Duplicate an element: Tap Duplicate. The new element appears above the original element.
Delete an element:
Tap Delete element.
Tap Delete element to confirm.
Managing your screens
Update your native app's screens including the total number of 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
Go to Mobile App in your dashboard.
Click the Your own mobile app tab or click the tab with the name of your own mobile app.
Click Get started or click Edit Mobile App.
Click Screens on the left.
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:
Click + Add next to Screens in navigation.
Enter a name for the new screen and click the checkmark to save the screen name.
Drag the screen up or down to where it should appear in the navigation bar.
To add a screen not in navigation:
Click + Add next to Screens not in navigation.
Enter a name for the new screen and checkmark to save the screen name.
Drag the screen up or down to where it should appear in the navigation bar.
Reorder a screen
Click the screen you want to reorder and drag it up or down in the navigation.
Rename a screen
Click the More Actions icon
next to the relevant screen.
Click Rename.
Enter a new screen name.
Click the checkmark to save the screen name.
Click Save at the top right.
Change a screen icon
Click the More Actions icon
next to the relevant screen.
Click Change icon.
Select an icon from the available options.
Click Apply.
Click Save at the top right.
Set screen permissions
Set permissions for each screen so that only those members with specific badges or pricing plans can access them.
Click the More Actions icon
next to the relevant screen.
Click Set permissions.
Choose who can access this tab:
Everyone: Both visitors and members.
Members only: Only people who joined your app.
Click Done.
Click Save at the top right.
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.
Click the More Actions icon
next to the relevant screen.
Click Remove from navigation.
Tip: To unhide, click the More Actions icon
next to the screen and click Add to navigation.
Click Save at the top right.
Delete a screen
Click the More Actions icon
next to the relevant screen.
Click Delete.
Click Delete to confirm.
Note: The screen and all its elements can’t be restored. You can always hide it from your app's navigation instead.
Click Save at the top right.
Manage your system screens
(Optional) Manage your app's launch and login screens:
Tip: 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.
Click Save at the top right.
Wix app
Go to your site in the Wix app.
Tap Manage
at the bottom.
Tap Mobile App.
(If needed) Switch to editing your own mobile app:
Tap the member app name at the top (e.g. Spaces by Wix App).
Select Mobile App Builder or Create a native mobile app.
(1st time only) Tap Get Started.
Tap Edit.
Tap Screens at the bottom left.
Choose what you want to do:
Add a new screen:
Tap + Add New Screen at the bottom to create another screen.
Choose what you want to do:
Edit your screen name: Enter a name to show in the navigation menu.
Change your screen icon: Tap the Edit icon
next to the screen icon then select a new icon to change it.
(Optional) Enable the Hide Screen from Navigation toggle to hide this screen while working on its content.
Tap Save.
Reorder screens:
Tap Reorder at the top right.
Hold and drag the relevant screens to reorder the menu.
Tap Save.
Edit screen name and icon:
Tap the More Actions icon
next to the relevant screen.
Tap Edit screen name and icon and choose what you want to do:
Edit your screen name: Enter a name to show in the navigation menu.
Change your screen icon: Tap the Edit icon
next to the screen icon then select a new icon to change it.
Tap Save.
Set screen permissions:
Set permissions for each screen so that only those members with specific badges or pricing plans can access them.
Tap the More Actions icon
next to the relevant screen.
Tap Set screen permissions.
Choose who can access this tab:
Everyone: Both visitors and members.
Members only: Only people who joined your app. Choose which members can. view the screen: All members, Members with badges, or Members with Pricing Plans.
Tap Save.
Edit screen:
Tap the More Actions icon
next to the relevant screen.
Tap Edit screen.
Choose what you want to do:
Add a new element to your screen.
Edit an existing element.
Tap Done.
Remove screen from navigation:
Tap the More Actions icon
next to the relevant screen.
Tap Remove from navigation. The screen moves to the Screens not in navigation section. Tip: To unhide, tap the More Actions icon
next to the relevant screen and tap Add to navigation.
Delete a screen:
Tap the More Actions icon
next to the relevant screen.
Tap Delete.
Tap Delete to confirm.
Tip: The screen and elements can't be restored. You can hide it from your app's navigation instead.
Wix Studio app
Go to your site in the Wix Studio app.
Tap Mobile App.
(If needed) Switch to editing your own mobile app:
Tap the member app name at the top (e.g. Spaces by Wix App).
Select Mobile App Builder or Create a native mobile app.
(1st time only) Tap Get Started.
Tap Edit.
Tap Screens at the bottom left.
Choose what you want to do:
Add a new screen:
Tap + Add New Screen at the bottom to create another screen.
Enter a name to show in the navigation menu.
Tip: Hide this screen while working on its content by enabling the Hide Screen from Navigation toggle.
Tap Save.
Reorder screens:
Tap Reorder at the top right.
Hold and drag the relevant screens to reorder the menu.
Tap Save.
Edit a screen name and icon:
Tap the More Actions icon
next to the relevant screen.
Tap Edit screen name and enter the desired name.
Tap the icon and select a new one.
Tap Save.
Set screen permissions:
Set permissions for each screen so that only those members with specific badges or pricing plans can access them.
Tap the More Actions icon
next to the relevant screen.
Tap Set screen permissions.
Choose who can access this tab:
Everyone: Both visitors and members.
Members only: Only people who joined your app.
Tap Save.
Edit a screen:
Tap the More Actions icon
next to the relevant screen.
Tap Edit screen.
Choose what you want to do:
Add a new element to your screen.
Edit an existing element.
Tap Done.
Remove a screen from navigation:
Tap the More Actions icon
next to the relevant screen.
Tap Remove from navigation. The screen moves to the Screens not in navigation section. Tip: To unhide, tap the More Actions icon
next to the relevant screen and tap Add to navigation.
Delete a screen:
Tap the More Actions icon
next to the relevant screen.
Tap Delete.
Tap Delete to confirm.
Tip: The screen and elements can't be restored. You can hide it from your app's navigation instead.
Customizing your app's design
Personalize your own native mobile app's colors and fonts to align with your brand. Select an app theme or handpick colors and fonts to show your unique brand design.
Dashboard
Go to Mobile App in your dashboard.
Click the Your own mobile app tab or click the tab with the name of your own mobile app.
Click Get started or click Edit Mobile App.
Click Design on the left.
Choose what you want to customize:
Tip: Click Change App Theme to choose a pre-designed combination of colors and fonts.
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.
Header style: Customize the color of your header to match your primary color or your background color.
Click Save.
Wix app
Go to your site in the Wix app.
Tap Manage
at the bottom.
Tap Mobile App.
(If needed) Switch to editing your own mobile app:
Tap the member app name at the top (e.g. Spaces by Wix App).
Select Mobile App Builder or Create a native mobile app.
(1st time only) Tap Get Started.
Tap Edit.
Tap Design at the bottom of the screen.
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: Tap Change App Theme to choose a pre-designed combination of colors and fonts.
Button theme: Customize your button theme
Header style: Customize your header color to match your primary color or your background color. You can also choose which icons you want to display on the header.
Navigation: Learn about editing your navigation bar in the navigation section above.
Tap Save.
Wix Studio app
Go to your site in the Wix Studio app.
Tap Mobile App.
(If needed) Switch to editing your own mobile app:
Tap the member app name at the top (e.g. Spaces by Wix App).
Select Mobile App Builder or Create a native mobile app.
(1st time only) Tap Get Started.
Tap Edit.
Tap Design at the bottom of the screen.
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: Tap Change App Theme to choose a pre-designed combination of colors and fonts.
Header style: Customize your header color to match your primary color or your background color. You can also choose which icons you want to display on the header.
Navigation: Learn about editing your navigation bar in the navigation section above.
Tap Save.
FAQs
Click a question below to learn more about customizing your own native mobile app's features.
How do I change my app language?
You can choose the default language your visitors see when they download your app.
To change your app language:
Go to Mobile App in your dashboard.
Click Settings on the top right.
Click your app name.
Click Change next to Language.
Select a language from the drop-down.
Click Save.
Note: Choosing an app language updates the content of all Wix apps within your native app (such as Wix Stores, Wix Bookings, and Wix Blog). Any content you create, like a new text section, will appear in the selected language. Currently, your native app does not support multilingual functionality.
Why do I need to download the Wix app?
Not all customization options are available in the Mobile App Builder in your site's dashboard. Use the Wix app to enhance your app's content and preview how it will appear to users.
If I make changes to the features and content of my native app, do I have to resubmit it for review?
You must resubmit your app for review if you make changes to its branding or design. You do not need to resubmit your app if you are making content changes. Learn more about what updates need another review.
Video tutorial
Need A Professional Website?
Contact Us Today!
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected