All Collections
Designing Your App
The Design Editor - How to build your mobile app with Vajro
The Design Editor - How to build your mobile app with Vajro

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

Shiva avatar
Written by Shiva
Updated over a week ago

The first thing you’d do after installing your app is to customize the homepage to suit your brand image and preferences. With Vajro, your customization is easy and you can see the changes happening in real time.


Change Content

To get started, go to the Change Content section on your Vajro admin dashboard.

You’ll see the list of widgets that are enabled on your home screen. Right next to it, you’ll see the preview of all the widgets and changes you make.

New Widget

To add a widget, all you need to do is click on the Add Widget button at the top of the panel

Btw, we have a bunch of widgets to pick from - Instagram feed, countdown timers, and more! Check this link to learn about widgets in detail.

Edit Widget

You can edit the widget by clicking on it. You can add a title for the widget, add images to them and link them to a product/collection

More Options

Click on the Settings button at the top right for more options! You can Duplicate the widget, hide/show the widget, Schedule it to display at a later time, or just Delete the widget.

Add a link to your Widget

To add a link, click on the Edit button, add a Product/Collection URL, and click on the Save button.

Navigation Menu

The Navigation Menu section allows you to customize your menu by adding categories & subcategories and naming them as per your preferences.

The Navigation Menu is extremely easy to work with on Vajro’s brand-new dashboard!

Go to the Vajro admin dashboard. You’ll find Navigation under the Design Editor dropdown menu

Tip: You can click on Sync from Store to directly sync any changes you make on your Shopify web store to show up on your mobile app!

Side Menu

You can add new items to your Side Menu by clicking on the Add New button

Editing Each Item

You can add more subcategories using the + button, change the title of the category with the edit button, and delete the item itself with the trash can icon.

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

Bottom Bar

Self-explanatory, right? This is where you pick what kinda navigation options you’d like to give your customers at the bottom of your app screen. You'll need to add a minimum of 3 items, and a maximum of 5 items to the Bottom Bar

Other Navigation Icons

Go ahead and scroll down to find and add more options like the Search Bar, Search icon, Wishlist icon, and Cart icon to the top-right corner of your app screen. You can add up to 2 menu items to the title banner

Other Items

This is the section where you add an About us section, Quick Links section, and a Contact Page

Quick Links

The Quick Links section is where you can add quick links to your home screen for your audience to navigate to.

You can add new links by clicking on the Add New button. Make sure you give it a title and click on Save Changes when you’re done.

Set a target redirect page, and pick where you want the link to redirect to by selecting a Value. You can delete a link if you choose to by clicking the trash icon right next to it.

The About Page section is pretty self-explanatory! You can add 3 widgets to your About Page, and here’s what they do.

App Header

Add a cool app header and a logo. Make sure you use a high-quality image for the logo!

About Lists

Add some of the most essential links for your customers to contact you on, share your app, and so on. You can add a new section with the Add New button, and click on Save Changes when you’re done.

Contact Us Page

Again, quite self-explanatory. Fill in all the fields and hit the “Save & Update” button. Click on Clear Changes should you choose to restart and refill all the details.

Once you’re done, click on Save & Update. And you’re done!

Personalize Branding

Vajro lets you personalize your app to suit your brand’s color and image. This personalization is necessary for your loyal audience to connect with your app and feel comfortable using it.

Head over to the Vajro dashboard and take a look around the Personalize Branding section!

App Name

Enter a title for your app. We know that it’s usually just the name of your store. But if you’d like to give the app a different name, by all means, go for it!

Brand Colors and Identity

Here’s where you personalize the app’s look completely to suit your brand’s colors.

If you’re not aware of the hex codes of the colors on your website, you can obtain them using Chrome extensions like ColorPick Eyedropper. All you need to do is hover over the color and you can just pick out the hex codes of the respective colors.

The overall theme color refers to the overall color scheme of your app.

The button color is the color of the CTA box.

Cart Icon’s Badge Color is the color of the notification on the cart indicating the number of items in the cart.

Cart icon badge text color is the color of the text in the badge.

Did we mention that you can see all these changes real-time in the preview on the right side?

There we go! A mobile app that perfectly reflects your brand's image!


Vajro’s mobile app builder comes with 4 preset themes that are completely customizable. The themes are built to cater to certain specific kinds of stores.

Go to Vajro’s dashboard. You’ll find the Themes under the Design Editor dropdown menu!

Shopovla and Tastry are built with online grocery stores in mind, whereas Launa and Clothable are more suited for boutique stores.

You can pick a theme by simply clicking on Apply Theme right next to a theme

Once you select it, you can customize it by clicking on the Customize button under the theme

You can also restore a previously used theme by clicking on the Click to Apply button next to the “Do you want to restore a previously used theme?” section

That's everything you need to know to build your app!

Did this answer your question?