September 14, 2022

How to create an app like Dhani

Dhani is an online marketplace selling everything from fashion & lifestyle products, electronics, groceries, home décor, medicines, and much more. Almost similar to Amazon, Flipkart, and Snapdeal in India, the Dhani app has more than ten million downloads. This blog is a step-by-step guide on how to create an app like Dhani. For this, we use a no-code app builder Swipecart. With it, you can create an app without writing any codes.

How to create an app like Dhani:

First, we install Swipecart which is available on the Shopify app store and WordPress plugin link. We activate and sign up for Swipecart. Once you are in your Swipecart dashboard, let’s begin to create an app like Dhani. Let’s begin by creating a layout.

  • Click on "Layouts" in the left menu.

    Create An App Like Dhani
  • Click on the “Create Layout” icon to create a new layout.

    Create An App Like Dhani
  • Clicking on “Create Layout” will open a popup. Let's give a name to the layout.

    Create An App Like Dhani
  • We give the name "Dhani" for the layout. Now, click on "Create".

    Create An App Like Dhani
  • 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.

    Create An App Like Dhani
  • 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.

    Create An App Like Dhani
  • 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.

    Create An App Like Dhani
  • 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.

    Create An App Like Dhani
  • Here's the Dhani app with the branded app bar and the bottom bar.

    Create An App Like Dhani
  • 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.

    Create An App Like Dhani
  • 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.

    Create An App Like Dhani
  • The Dhani app's home screen now has a search bar ready.

    Create An App Like Dhani
  • 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".

    Create An App Like Dhani
  • 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.

    Create An App Like Dhani
  • Okay, have a look at the Dhani app with the collection slider added to the home screen.

    Create An App Like Dhani
  • 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.

    Create An App Like Dhani
  • 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.

    Create An App Like Dhani
  • The carousel banner is now added to your app's home screen. Add attractive banners for your users to stay engaged on the app.

    Create An App Like Dhani
  • 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.

    Create An App Like Dhani
  • 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.

    Create An App Like Dhani
  • Here's the Dhani app with the product displayed in a grid format.

    Create An App Like Dhani
  • 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.

With Swipecart, it's super-easy to create apps for your e-commerce store. To get you acquainted with Swipecart, we have created a beginner's tutorial. Watch this to see how simple it is to build apps without coding.

To know more about how to create apps with Swipecart, watch this video.

Invest in Swipecart, the best no-code app builder is your go-to solution to create apps easily and fast. So, when are you planning to build an app for your e-commerce store with Swipecart?