Wix Mobile Apps: Customizing Your Mobile App's Design

Customize the design of your native mobile app to reflect your brand. Adjust the color theme, text theme, button theme, and header style. These updates enhance your app's uniqueness and provide a consistent experience for your visitors.

Notes:

• You need to upgrade to a Mobile App Premium plan to fully customize your own mobile app's designs.

• Changes to your app's color and text theme affect all of your app's screens.

Changing your app's color theme

Choose a color theme to set the tone for your visitors. Fine-tune individual colors to ensure consistency and enhance readability across different screens and elements.

Dashboard

1. Go to Mobile App in your site's dashboard.

2. Click the tab with the name of your own mobile app.

3. Click Edit Mobile App.

4. Click Design on the left panel.

5. Click the Edit icon

   

   next to Color theme.

6. Choose what you want to do:

   • Change the color theme: Click Change Color Theme to select a new preset color theme.

   • Individually customize element colors: Select which colors to edit:

     • Primary: Choose a new main color for your app.

     • Text and icons: Choose a new color for the main text and social icons.

     • Background: Choose a new color for the app background.

7. Click Save at the top right.

Wix app

1. Go to your site in the Wix app.

2. Tap Manage

   

   at the bottom.

3. Tap Mobile App.

4. (If needed) Switch to editing your own mobile app:

   1. Tap the member app name at the top (e.g. Spaces by Wix App).

   2. Select Mobile App Builder.

5. Tap Edit.

6. Tap Design from the bottom menu.

7. Tap Color theme.

8. Choose what you want to do:

   • Change the color theme: Tap Change Color Theme to select a new preset color theme.

   • Individually customize element colors: Select which colors to edit:

     • Primary: Choose a new main color for your app.

     • Text and icons: Choose a new color for the main text and social icons.

     • Background: Choose a new color for the app background.

9. Tap Save at the top right.

Wix Studio app

1. Go to your site in the Wix Studio app.

2. Tap Mobile App.

3. (If needed) Switch to editing your own mobile app:

   1. Tap the member app name at the top (e.g. Spaces by Wix App).

   2. Select Mobile App Builder.

4. Tap Edit.

5. Tap Design from the bottom menu.

6. Tap Color theme.

7. Choose what you want to do:

   • Change the color theme: Tap Change Color Theme to select a new preset color theme.

   • Individually customize element colors: Select which colors to edit:

     • Primary: Choose a new main color for your app.

     • Text and icons: Choose a new color for the main text and social icons.

     • Background: Choose a new color for the app background.

8. Tap Save at the top right.

Changing your app's text theme

Choose a text theme to set the style and readability of your app, and ensure clarity and coherence across all of your app's content.

Dashboard

1. Go to Mobile App in your dashboard.

2. Click the tab with the name of your own mobile app.

3. Click Edit Mobile App.

4. Click Design on the left panel.

5. Click the Edit icon

   

   next to Text theme.

6. Choose what you want to do:

   • Change the text theme: Click Change Text Theme to select a new font theme.

   • Individually customize text: Select a font for your app's headings and body.

7. Click Save at the top right.

Wix app

1. Go to your site in the Wix app.

2. Tap Manage

   

   at the bottom.

3. Tap Mobile App.

4. (If needed) Switch to editing your own mobile app:

   1. Tap the member app name at the top (e.g. Spaces by Wix App).

   2. Select Mobile App Builder.

5. Tap Edit.

6. Tap Design from the bottom menu.

7. Tap Text theme.

8. Choose what you want to do:

   • Change your app's text theme: Tap Change Text Theme to select a new preset font theme.

   • Individually customize text: Select a font from the Headings or Body drop-down menus.

9. Tap Save at the top right.

Wix Studio app

1. Go to your site in the Wix Studio app.

2. Tap Mobile App.

3. (If needed) Switch to editing your own mobile app:

   1. Tap the member app name at the top (e.g. Spaces by Wix App).

   2. Select Mobile App Builder.

4. Tap Edit.

5. Tap Design from the bottom menu.

6. Tap Text theme.

7. Choose what you want to do:

   • Change your app's text theme: Tap Change Text Theme to select a new preset font theme.

   • Individually customize text: Select a font from the Headings or Body drop-down menus.

8. Tap Save at the top right.

Changing your app's button theme

Customize your button styles to match your business design. These styles apply to all buttons across your app, ensuring a consistent look. Choose from preset themes or adjust individual elements like colors, borders, text, and corner radius. You can preview your changes live as you make them.

Dashboard

1. Go to Mobile App in your dashboard.

2. Click the tab with the name of your own mobile app.

3. Click Edit Mobile App.

4. Click Design on the left panel.

5. Click the Edit icon

   

   next to Button theme.

6. Choose what you want to do:

   • Choose a preset theme for your buttons: Click Change Button Theme and select a featured theme. The available themes are based on your app's theme colors.

   • Customize buttons individually: Click the Primary or Secondary tab and then customize the buttons by adjusting the button shape, background color, text, and border.

     Note: To change your theme colors, click Edit in the Pick a color pop-up. Customize your primary, text, icons, and background colors in the Color Themes section.

     

7. Click Save at the top right.

Wix app

1. Go to your site in the Wix app.

2. Tap Manage

   

   at the bottom.

3. Tap Mobile App.

4. (If needed) Switch to editing your own mobile app:

   1. Tap the member app name at the top (e.g. Spaces by Wix App).

   2. Select Mobile App Builder.

5. Tap Edit.

6. Tap Design on the bottom of your screen.

7. Tap Button theme.

8. Choose what you want to do:

   • Choose a preset theme for your buttons: Click Change Button Theme and select a featured theme. The available themes are based on your app's theme colors.

   • Customize buttons individually: Tap the Primary or Secondary tab and then customize the buttons by adjusting the button shape, background color, text, and border.

     Note: To change your color options, go to the Color Themes section in the Design panel.

9. Tap Save.

Wix Studio app

1. Go to your site in the Wix Studio app.

2. Tap Mobile App.

3. (If needed) Switch to editing your own mobile app:

   1. Tap the member app name at the top (e.g. Spaces by Wix App).

   2. Select Mobile App Builder.

4. Tap Edit.

5. Tap Design on the bottom of your screen.

6. Tap Button theme.

7. Choose what you want to do:

   • Choose a preset theme for your buttons: Click Change Button Theme and select a featured theme. The available themes are based on your app's theme colors.

   • Customize buttons individually: Tap the Primary or Secondary tab and then customize the buttons by adjusting the button shape, background color, text, and border.

     Note: To change your color options, go to the Color Themes section in the Design panel.

8. Tap Save.

Changing your app's header style

When creating your own native app, you can choose if you want your header to have a background color (taken from your app's primary color) or to have it transparent.

Note:

The header style that you choose here affects the minimal header type. Learn more about the difference between the header types and how to customize them.

Dashboard

1. Go to Mobile App in your dashboard.

2. Click the tab with the name of your own mobile app.

3. Click Edit Mobile App.

4. Click Design on the left panel.

5. Click the Edit icon

   

   next to Header style.

6. Choose your header color, using either the primary or background color that you set for your app.

7. Click Save at the top right.

Wix app

1. Go to your site in the Wix app.

2. Tap Manage

   

   at the bottom.

3. Tap Mobile App.

4. (If needed) Switch to editing your own mobile app:

   1. Tap the member app name at the top (e.g. Spaces by Wix App).

   2. Select Mobile App Builder.

5. Tap Edit.

6. Tap Design from the bottom menu.

7. Tap Header style.

8. Choose what you want to edit:

   • Style: Choose the color for your header. You can choose your primary or background color that you set for your app.

   • Icons: Tap the toggles to enable quick actions to your header.

     Note: The icons displayed in the panel depend on the Wix apps you added to your site (e.g. Wix Stores).

9. Tap Save at the top right.

Wix Studio app

1. Go to your site in the Wix Studio app.

2. Tap Mobile App.

3. (If needed) Switch to editing your branded app:

   1. Tap the member app name at the top (e.g. Spaces by Wix App).

   2. Select your branded mobile app.

4. Tap Edit.

5. Tap Design from the bottom menu.

6. Tap Header style.

7. Choose what you want to edit:

   • Style: Choose the color for your header. You can choose your primary or background color that you set for your app.

   • Icons: Tap the toggles to enable quick actions to your header.

     Note: The icons displayed in the panel depend on the Wix apps you added to your site (e.g. Wix Stores).

8. Tap Save at the top right.

Tip:

Speed up your work by using keyboard shortcuts while editing your app on the dashboard. In the Mobile App Builder, click the More Actions icon

and select Keyboard Shortcuts to see the available shortcuts.