July 04, 2022

App bar customization

tutorial 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.

tutorial Let’s look at how App Bar works in swipecart.

tutorial Go to Layouts in swipecart web app.

tutorial Now hover over the layout you want to edit and click on the Edit button.

tutorial

After clicking on edit layout, you will be redirected to Theme Settings. Under Theme Settings you can find App Bar Settings.

tutorial Swipecart provides users with the ability to customize the app bar.

tutorial Let’s look at each feature in detail.

tutorial First thing we can notice is the preview. Preview shows the live preview of how the app bar will look like.

  • App bar color picker allows you to change the color of the app bar. You can pick a color or can input its RGB or Hex code. You can see the live preview of the change in the preview section.

tutorial You can change the font color from the font color picker.

tutorial

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.

tutorial You can change the Bottom Radius and the Elevation to your liking. A live preview is always available to guide you through the process.

tutorial 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.

tutorial Once you are done with your edits please hit the Save button to save your changes.