Logo
Go to Rentech Digital

Advice and answers from the Rentech Digital Team

HomeSwipecartTheme Settings / DesignBottom Bar Settings

  • Bottom Bar Settings

    A bottom bar provides navigation and enables instant clicking on the app’s features. Learn bottom bar UI customization using Swipecart here.

    Video Tutorial of Bottom Bar Settings



    On your Swipecart dashboard, open the layout on which you want to edit the bottom bar. Click “Bottom Bar Settings” on the side menu in “Theme Settings”.


    The app screen layout is displayed with a default bottom bar on it. In the center screen top, click on the drop-down box. Click on any variant you want to use in your app. The bottom bar instantly changes to the selected variant.


    The customization to the bottom bar is on the right side of your screen.

    Disabling the “Bottom Bar” toggle switch removes the bottom bar from your app.


    Next, click on “Choose Tab Menu”. A checklist appears with the list of tabs present in the bottom bar. Unchecking any will clear it from the bottom bar.


    How to add a new menu item to the bottom bar?

    • You can add a new menu to the existing list by clicking on “+Add New Menu”.

    • In the opened popup, enter the title in the “Page Name” box. Next, you can search and select icons from the icon library.

    • Another option is to upload custom icons. For this, enable the “Upload Custom Icons” toggle switch. Now, upload the icon from your file.

    Next, link it to

    • User-defined page- The pages you have additionally created on the app
    • System-defined page- The pages created by default on Swipecart
    • Web URL- Any external website link.

    • Click on “Submit” when you are done. The tab is now added to the bottom bar.

    How to edit a menu item on the bottom bar?

    • Again in the right section of your screen, click on the “Edit” button in front of the menu item you want to edit.

    • The “Upload from Library” toggle switch is enabled by default. You can search and select any icon from the icon library.

    • To upload a custom icon, locate the “Upload Custom” toggle switch at the bottom and enable it. Click on the upload icon and upload the custom icon from your system file.

    • Click on “Done” when you have completed uploading the icon.

    How to do advanced settings of the bottom bar?

    • In the right section, scroll until last to find the “Advance Settings” option. Click on it to open its window. Here you have these options-

    • BG Color- By enabling the toggle switch, you can add a background color to the bottom menu through the color picker.

    • Sticky bottom bar- When this toggle switch is enabled, the bottom bar is shown across all the app screens. Disabling it will show the bottom bar only on the home screen.

    • Icon color- In this, you can change the color for both the selected and default icons through the color picker.

    • Elevation- This brings depth to the bottom bar container. When you increase elevation, a shadow appears on the bottom bar container.

    That’s it. You are done customizing the bottom bar on Swipecart.

    • You can see the preview using the preview app.