How to create an app like Dhani

Click on "Layouts" in the left menu.

Click on the “Create Layout” icon to create a new layout.

Clicking on “Create Layout” will open a popup. Let's give a name to the layout.

We give the name "Dhani" for the layout. Now, click on "Create".

Next, you choose the "Blank Layout" and click on "Create Layout". You can also choose from different available ready themes. But since we have to create an app like Dhani, we select a blank layout.

You’ll be taken to your Dhani layout dashboard with the default tab as “Theme Settings”. The primary function of “Theme Settings” is to customize the app's look. It has multiple options to set branding elements for your app.

Let's start setting the theme for our mobile app with the app bar. Click on "App Bar Settings" on the layout's left menu. Here, customize the app bar such as editing the app bar color, font color, bottom radius, and elevation. Make the notifications, search, cart, and favorite icons visible or invisible on the search bar. Upload the brand logo image or text on the app bar and adjust its alignment. When you are done editing with the app bar styling, click on "Save" to save the changes made.

For the Dhani app, we have enabled the visibility of add to cart icon on the app bar. We have uploaded the logo. Also, we have changed the app bar and font color to make it similar to that in the Dhani app.

In the layout's left menu, you have options to select the side menu, bottom bar, user profile page, and input style (sign-in/welcome) page for your app. Various style options are given for each. Select one among them and update them to your app.

Now, let's make some changes to the app's theme. Select "Theme Style Settings" on the left menu.

We can edit some theme styles such as font style, font scale, font color, app's primary color, and background color. Next, you upload a loader for your app. Ensure the loader GIF meets the mentioned requirements. Save the changes.

Here's the Dhani app with the branded app bar and the bottom bar.

Now, let's start to add content to the app's home screen. Click on the "Home" tab in the main menu next to "Theme Settings". An empty home screen layout with only the app bar and the bottom bar is displayed. It's here we start to populate the home screen with content.

In Swipecart, all the items are transformed into widgets, which are visual UI elements. These are reachable through a drop-down menu that is situated just next to the screen layout of your app. When you click on the drop-down icon, a list of widgets will appear. Click on the "Search" widget. A search bar widget appears below the drop-down box. To add it to the home screen, drag & drop it.

You can edit the search bar style such as radius and padding. Hover your mouse over the search bar to open the “Edit Style” option. Edit the radius and padding of the search bar box. Here, you can opt to make the text search and voice search icon visible or not on the search bar. Save the changes. Click on “Update” to update the changes to the layout.

The Dhani app's home screen now has a search bar ready.

Let's start populating the home screen with collection categories and products. First, we'll add a collection slider. Select "Collection Slider" from the drop-down widget list. Various style options for the collection slider are displayed below the drop-down box. Drag and drop one to the home screen. Here, we have selected a "Square collection slider with title and radius".

To start adding categories inside the collection slider, hover the mouse pointer over the dropped widget. Spot the "Add/Edit Content" option just next to the widget on your right. Click on it to open a Collection Slider popup. Select images from the drop-down collection list. Click on "Add" to add the image. Keep adding and save when finally done.

Okay, have a look at the Dhani app with the collection slider added to the home screen.

Next, we add a carousel banner below the collection slider. Select "Carousel Banner" from the drop-down menu. Select one from among the various banner styles. Drag and drop it onto the home screen layout.

To add images to the carousel banner, hover the mouse pointer over the dropped widget. Spot the "Add/Edit Content" option. Click on it to open an "Add Carousel Banner" popup. Click on the upload icon to add banner images from your local system or add them from the product and collection list of your e-commerce store. Click on "Save Banner" when you are completed with adding images to the banner.

To edit the style of the banner, hover over the dropped banner widget on the home screen. Now, you'll notice the "Edit Style" option below "Add/Edit Content". Click on it to open the "Edit Style" popup. Adjust the banner box radius and padding. Select any variant for your banner indicator. You can also select any background color or image for the banner box. When done, save the changes and update them to the app's layout.

For more detailed information on what you can do with the "Edit Style" option, click here.

The carousel banner is now added to your app's home screen. Add attractive banners for your users to stay engaged on the app.

Next, we add a product grid. Select "Product Grid" from the drop-down widget list. From among the various styles displayed below the drop-down box, select one and place it below the carousel banner.

We'll add product images to the grid. Hover over the dropped widget and spot the "Add/Edit Content" option. Click on it to open a popup. On this screen, click on the "Product" tab. Click on the drop-down list and select the product you want to add to the grid. Now click on "Add". Similarly, repeat the process to add more products to the grid. Don't forget to save the changes.

Let's edit the style of the product grid widget now. Again hover the mouse pointer over the product grid widget. Click on "Edit Style". A popup opens and here, you can edit many parameters such as container padding. Make the product title, cost, favorite, and cart details visible/invisible on the product grid. Adjust the image position inside the grid box. For the Dhani app, we've disabled the favorite and cart icons and also the additional products button. Let's save and update before we proceed further.

Here's the Dhani app with the product displayed in a grid format.

The app design is simple. Continue adding more products using the "Product Grid" widget.

So, finally, we have completed creating an app like Dhani without writing codes.