How To Use Different Screens To Design Your First App

‍

What Are Appokart Screens?

Appokart Screens are what you will use to build and customize your app. It comes with simple drag and drop functionality, and requires no code. You will find all the different screens under the customization tab will be used to serve a different user experience. Each of them are discussed below. Before we move to that, first let’s get the basics.

Select your app from the left bottom and then click on “customise”. Doing so will grant you access to your app and you will be able to see all the 7 different screens elements that are available to use to build your app. On the right you get your app customization screen, basically the screen of the app that you are designing. In the fig below you can see the Home section along with the customization features in the middle and your app screen on the right.

‍

Now that you know from where you can access all the screens, it’s time to move ahead. So without further ado let’s discuss each screen element separately.

1. Home Screen

As the name suggests, the “Home Screen button” is there to help you customize the home screen of the app you are building with Appokart. Once you click the Home button in the customization, all the features will be made available on the right to it. Simply drag and drop the feature to the App customization screen and arrange them in the way you like.

‍

Can you see that big edit button? Use it to rename the section on your home screen. Or if you need to move a particular section up or down, simple drag and drop it according to your need.

2. Collection Screen

To make it easy for your customers to find what they wanted, you can add the collection section. From there customers can browse all the product options that come under one certain category. Just like all the other screen sections of our app, this section also comes with multiple options as shown in the figure. Simply choose the category and build your product collection to showcase your best products at once.

‍

3. Product Screen

Add your products, change their image, their title and much more. Basically you’ll be using this element to customize how your product screen will look. Select how big you want your product image to be, what description should it be showing, do you want to list the similar products or not. All that can be customized under this section. Also as you can see in the image below, there are a lot of options to explore from so do it now. In case you face any trouble feel free to ask our experts using the chat button given in the right bottom.

‍

4. Cart Screen

Design the look of the cart section, select what information you want users to see when they have added one or more products in their cart. Customize the checkout button with different colour, size or name, add or change the background colour. Customize the summary (description) text size or colour and much more.

‍

5. Search Screen

This will be used by your users to search for some certain keywords that will lead them to the product that they wanted to buy. Using the customization features available you can change the background colour, text size and colour, add the action icon and change their colour.

‍

‍

6. Other Screen

Welcome your customers to your app with an engaging login screen. But don’t over do it, keep things simple and to the point. And not just the login screen you will be using this section to design and edit your customers order history list, their favorite items that they have saved for later, contact us button and settings.

You edit the background colour, text size, button alignment and much more. Try it now.

‍

‍

7. Menu Drawer

In order to offer an easy shopping experience to your customers, you need to make sure your app features clean and fluent navigation. This will help customers to reach wherever they want without getting lost in your app.

‍

By clicking on Menu Drawer from the array of our screen elements, you will be greeted to a screen similar to that can be seen above. This time in your app customization section (located in the right side of the screen) consists of a number of options that can be used to create the Menu drawer of your app. Add your logo simply by uploading, change the drawer background, edit text colour, add text background colour and much more.

Feel free to explore yourself and that’s not it, you can individually edit each of the options available in the Menu Drawer located on the right. Simply click on the edit button and you will be greeted with an image similar to what has shown below.

‍

Try it yourself now, get the feel of our advanced dashboard and customize your app according to your likings.