App bar is the header of the application. It provides important navigations that users are most likely to use, as well as branding. Let’s look at two app bar examples.
As we can see Instagram’s app bar has the instagram logo, navigation to messages as well the ability to post new content.
As we can see Amazon’s app bar has the search bar as well as an icon to scan products.
Let’s look at how App Bar works in swipecart.
Go to Layouts in swipecart web app.
Now hover over the layout you want to edit and click on the Edit button.
After clicking on edit layout, you will be redirected to Theme Settings. Under Theme Settings you can find App Bar Settings.
Swipecart provides users with the ability to customize the app bar.
Let’s look at each feature in detail.
First thing we can notice is the preview. Preview shows the live preview of how the app bar will look like.
You can change the font color from the font color picker.
We can see four icons that we can enable or disable. Toggling status of each of the toggle buttons will update the preview as well.
You can change the Bottom Radius and the Elevation to your liking. A live preview is always available to guide you through the process.
You have the option to either show the logo or the title in the app bar. You can also adjust the alignment of the logo/title.
Once you are done with your edits please hit the Save button to save your changes.