Skip to main content
All CollectionsDesigning Your App
The Design Editor - Navigation
The Design Editor - Navigation

A small guide on editing and customizing your app home page the way you want it to!

Niwin Santhosh avatar
Written by Niwin Santhosh
Updated over 8 months ago

The Navigation section is a crucial part of your mobile app. You can direct your users to various parts of your store using this section. The Navigation section itself is in three parts - Side Menu, Bottom Bar, and Quick Links.

Pricing

The Navigation section of the design editor is available to users of all pricing plans.

To get to this section, go to Vajro dashboard > Design Editor > Navigation.

Side Menu

Let’s first head to the Side Menu tab. Pick what product or collection pages you want your shoppers to have easy and quick access to.

The Sync from Store option allows you to replicate the navigation menu from your web store on your mobile app. But, lots of brands want the flexibility to give a different look and feel on mobile devices.

To add a new item to your Side Menu, click on the Add New button.

Rearranging these items is as simple as dragging and dropping them wherever you want.

The first icon on the right side adds a subsection to the item. The second icon lets you rename the item. And the third one deletes the item from the menu.

Once you’re done, hit the Save Changes button.

Bottom Bar

The Bottom bar consists of shortcuts that you want your users to have easy access to. You can have shortcuts to the app’s home page, cart page, user account page, etc.

Enable the Bottom Bar by clicking on the toggle button on the right.

Note: You can have at least 3 items and up to 5 items in the bottom bar

You can reorder these items as well by using the drag and drop functionality.

You must click on the edit button on the right side to upload a custom icon for the item. The check box on the right must be used to enable the item.

Note:

  • The home page will be a default when you enable the bottom bar.

  • Specifications for custom icons: Format - PNG, Resolution - 30x30 pixels, Size - 100 KB

Scroll down to add navigation icons to the top right corner of your app. You can add up to 2 icons to this section. Note: The search icon is a default here.

Other Items

The Other Items tab is where you can set up quick links to your social media accounts, privacy policy page, contact us page, and more. Let’s get into working with each of these sections.

Quick Links

Click on Quick Links to provide links to different locations like pages of your app, URL redirects, etc.

Click on Add New to add a new link to the section. Click on Save Changes when you’re done.

Click on the drop-down under Target to select a redirection target and select Page.

Select the page to redirect your users to from the drop-down menu under Value.

The edit button on the right allows you to edit the name of the link. The delete button will remove the link from the list.

About Page

App Header

You can change the title of the section and the Header logo here.

Once you’re done, click on the Save Changes button.

Social Media Links

Brands usually add social media links for their customers to reach out to or follow them. Social media is a great way for you to keep your customers informed about your sales, product launches, etc, and keep them engaged.

To get started, add a Title for the section. You can click on the Add New button to add a new social media link, and click on the Save Changes button when you’re done.

Name: The name of the platform.

Target: The redirection type.

Value: The input that the target field will use (in this case the redirection URL).

About Lists

Brands use About Lists to offer links to their contact and privacy policy pages, and their app store for users to rate their app and drop their feedback. It’s a good way to add authenticity to your app.

Add a Title for the section. You can click on the Add New button to add a new item, and click on the Save Changes button when you’re done.

Name: The name of the platform.

Target: The redirection type.

Value: The input that the target field will use.

Contact Page

Enter the Page Title and your App name and add an App Icon.

Note: The icon should be 400x400 pixels.

Enter your brand’s Support Mail ID and Phone number. Add a sample subject line for your users.

Enter your social media details for your users to follow and reach out to you. Once you’re done, click on the Save & Update button.

That wraps up the Navigation section. If you’d like to learn more about a different part of the Design Editor, click here.

Got questions about this article? Hit us up using the chat button on your Vajro dashboard, or write to us at [email protected].

Did this answer your question?