These features allow you to customize the design of the status bar and bottom navigation bar.
To check whether your settings have been applied correctly, close your app and launch it again.
Status bar design
Status bar design
Customize the status bar that is displayed when the app is open.
For Android devices, the status bar settings will be applied for Android Marshmallow (6.0, released in 2015) and above.
For Apple devices, the status bar settings will be reflected on any iOS version.
Background color
Select a background color for the status bar when the app is open.
You can check the changes you are making as you go along in the “Preview” section on the right.
If you do not select a color, the default background color (Black: #000000) will be applied.
Pre-scroll transparency
You can make the status bar transparent before scrolling down the page.
Once users start scrolling down the page, the status bar will change to the color you selected as a background color.
To use this feature, you will need to add a 20px top margin to the theme for your store’s mobile version.
What apps look like with a top margin
What apps look like without a top margin
You can check the changes you are making as you go along in the “Preview” section on the right.
Font color
Choose the font color for the status bar.
You can check the changes you are making as you go along in the “Preview” section on the right.
Bottom navigation bar design
Navigation bar
Enable: Your app will have a navigation bar with menu tabs at the bottom of its screen.
Disable: Your app will not have a navigation bar at the bottom of its screen.
Auto-hide
If you check the box, your navigation bar will automatically be hidden when users scroll down the page.
Design settings
Use theme: Select one of the six available themes. You can preview each theme on the right to help you decide.
Customize: Freely set up the menus for the navigation bar. You can customize the menu icons and menu layout.
Background color
Select a background color for the bottom navigation bar using the color picket.
If you do not select a color, the default background color (Grey: #575757) will be applied.
Menus
Default menus cannot be edited or deleted.
The bottom navigation bar must include between five and eight menu icons. You can add up to three menus in addition to the five default menus.
You can initialize the changes you have made. (Remember to click [Save] at the bottom of the page after clicking on [Reset] to reflect the changes in your app.)
Make sure you add both a “Refresh” and “Cancel refresh” icon for the refresh menu.
Changes are reflected as soon as you click [Save] at the bottom of the page. Make sure you preview the changes before saving your settings.
To view any navigation bar changes, close the app and launch it again.
Changing the order of menus:
Select a menu and change its order within the navigation bar.
⚠️ You cannot change the order of menus that have their checkbox deactivated.
Reset
You can initialize the changes you have made. (Remember to click [Save] at the bottom of the page after clicking on [Reset] to reflect the changes in your app.)
Add menu
When you add a menu to the navigation bar, you can choose between redirecting users to a page or executing JavaScript.
Redirect to a page: Users are redirected to the linked page when they tap the menu.
Execute JavaScript: The connected script is called when users tap the menu. Use this feature when you want to show hamburger menus or event pop-ups from your online store or when you wish to use JavaScript codes specifically made for your mobile app.
Preview
Once you have finished editing your design, make sure you use the preview feature to check what your app looks like before saving.
