WooCommerce bottom bar

How to add a bottom bar to my WooCommerce app?

The bottom bar is a key navigation component for your app, allowing users to access important screens easily. Follow this guide to set up and customize your bottom bar:

Step 1: Enable the Bottom Bar

• Log in to your AppMySite dashboard.

• Navigate to the Bottom Bar section.

• Toggle Enable Bottom Bar to activate the bottom bar functionality.

Step 2: Configure the Bottom Bar

1. Add Items to the Bottom Bar

   • Click on Add Item to include different options in your bottom bar. You can choose from the following:

     • Home: Opens the home screen of your app.

     • Product Categories: Opens the Product Categories screen of your app.

     • Post Categories: Opens the Post Categories screen of your app.

     • Cart: Opens the shopping cart of your app users.

     • Profile: Opens the Profile settings screen of your app users.

     • Settings: Opens the Settings screen of your app.

     • Web View: Opens a web view interface within your app.

       • Enter the website URL of the page you want to render.

       • Customize further by enabling or disabling the app header, website header, or website footer.

       • Hide specific webpage elements by entering their HTML class or HTML ID in the Web View settings.

     • Pages: Displays a grid of all the pages selected for your app's home screen.

       • Manage the display of these pages in the Home Screen section of the Appearance module.

2. Set Default Bottom Bar Button

• Select one item as the default button for the bottom bar. This button will appear highlighted as the active screen.

1. Customize Icons

• Assign icons to each bottom bar item. You can upload custom icons or choose from the available icon library for a personalized look.

1. Duplicate, Delete, and Re-arrange Items

• Duplicate: Quickly copy an existing item by clicking the duplicate icon.

• Delete: Remove an item from the bottom bar by clicking the delete icon.

• Re-arrange: Drag and drop items to change their order on the bottom bar.

Step 3: Preview in Simulator

• Use the Simulator on the Bottom Bar screen to preview how the bottom bar will look and function in your app.

• Make any adjustments as needed based on the preview.

Step 4: Save Your Changes

• Once satisfied with your bottom bar configuration, click Save to finalize your settings.