Wix Mobile Apps: Customizing Your Own App's Features and Content
30 min read
Once you've designed your own native app's theme, customize the content and features of your app. Your own 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 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 app and customizing from mobile.
In this article, learn more about:
Customizing the header
Your app's 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
Wix app
Wix Studio app
- 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.
- 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 app is made up of screens to help your visitors navigate between the different areas of your app. You can choose whether the navigation menu appears at the top or bottom of your app. Then customize the design by adding custom menu icons.
Dashboard
Wix app
Wix Studio app
- 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.
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
Wix app
Wix Studio app
- 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 from the web editor and may need to be updated from the Wix 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
. Move the element to a different screen
.Delete an element
next to the element.7. 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
Wix app
Wix Studio app
- 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 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
Rename a screen
next to the relevant screen.Change a screen icon
Set screen permissions
Remove a screen from navigation
Delete a screen
Manage your System screens
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
Wix app
Wix Studio app
- 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.
FAQs
Click a question below to learn more about customizing your app's features.
How do I change my app language?
Why do I need to download the Wix 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?
|