October 14, 2022

How to create an app like Daraz

Daraz is an e-commerce brand owned by the Chinese internet company Alibaba. It is a regional e-commerce app operating in Pakistan, Sri Lanka, Nepal, Bangladesh, and Myanmar. Initially started in Pakistan, the company changed hands and is now the leading e-commerce retailer in its respective countries.

Daraz has faced many challenges, low internet penetration is one of them. This is also an opportunity, as better internet penetration and infrastructure can boost e-commerce sales. You too could create an app like Daraz with the no-code app builder Swipecart. Here, you only need to design the front end while the back end is handled by Swipecart. Let’s see how we can create an app like Daraz in merely a day.

Watch this video tutorial to know about creating an app for your e-commerce store:

So, this was how you could design and create an e-commerce app with the help of the drag-and-drop app builder Swipecart.

Steps to create an app like Daraz

First and foremost, you need to install Swipecart from the Shopify app store and WordPress plugin center. Once you sign up and activate it, you’ll be taken to your dashboard. Let’s start creating a layout for the Daraz app.

Creating a Layout on Swipecart

  • On the dashboard, click on the layout tab from the left menu.

    daraz
  • Click on the ‘Create Layout’ icon as we’re making an app from scratch.

    daraz
  • A popup would appear to name the app, let’s call the app ‘Daraz’.

    daraz
  • Now, you’ll be asked to choose a layout. Swipecart allows you to select pre-made layouts or make one from scratch. As we’re making a new app, click on ‘Blank Layout’.

    hollister
  • You’ll be taken to your layout dashboard with the default tab “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.

Theme Settings

  • Let’s start with the App Bar Settings

    daraz
  • App Bar Settings-Here, you can customize the app bar that remains constant wherever you go on the app. To know what you can do with this, click here.

    daraz
  • Next, customize the look of the  side menubottom baruser profile page, and  input style (welcome/sign-in page). For all these, go to the respective tabs on the left menu. A set of readymade templates are available for each. Select an option from the variants and save it to the app.

  • Theme style settings- Here, you can manage and edit the fonts, colors, and app loaders for a universal app usage experience. To know more about this, click here.

    daraz
  • Here’s what the draft app would look like after these settings.

    daraz

Designing the home screen

  • Let's begin adding content to the home page now. Click on the "Home" tab next to "Theme Settings". A blank home screen layout with the app bar and bottom bar is displayed.

  • Swipecart has pre-coded UI components turned into visual widgets. We drag and drop these inside the home screen. Let's see how it is to be done to create the Daraz app. Know more on widgets here.

    daraz
  • Carousel Banner- Now it’s time to showcase the products or categories you’d like. From the widget library, choose the Carousel banner from the drop-down list. Drop a carousel banner design you’d like to the draft home page layout. For more details, click here.

    daraz
  • Upon hovering on the widget on the draft home page layout, you’ll see the ‘Add/Edit Content’ option. Here, you can add the images and links you’d want to showcase. For more information regarding this, click here.

    daraz
  • After you’re done, you’ll find an ‘Edit Style’ option upon hovering on the completed Carousel banner. Here, you can customize the carousel and preview the changes you made. Click here to know how to edit the widget style.

    daraz
  • Here’s what the completed carousel would look like on a mobile layout.

    daraz
  • Single Banner: You can use single banners to highlight important messages such as offers, sales, new launches, and discounts to your customers. To add it to the home screen, select "Single Banner" from the drop-down widget list.

  • Place one style variant on the app's home screen. Click here for more information on single banners.

    daraz
  • Use the 'Add/Edit Content' option to add images and links. When done, use the 'Edit Style' option to customize the single banner.

    daraz
  • This is how the single banner would look like.

    daraz
  • Collection Slider: Let's add a collection slider to the home screen layout. Locate a drop-down box next to the home screen.

  • Select "Collection Slider" from the widget list. Different variants are displayed just below the drop-down box.

  •  Drag and drop the one you like into the home screen layout. To know more about collection sliders, click here.

    daraz
  • Use the 'Add/Edit Content' option to add images and links. When done, use the 'Edit Style' option to customize the collection sliders.

    daraz
  • Here is a preview of the app with the Collection Slider.

    daraz
  • Collection Grid- Next, you can set up a collection grid where you can add links to a set of images for easier navigation. Choose ‘collection grid’ from the widget library drop-down. Select the Collection grid style you’d want. For more details, please click here.

    daraz
  • Add the images and links you’d want in the ‘Add/Edit content’ option upon hovering on the collection grid widget.

    daraz
  • When done, customize the collection grid’s features in the ‘Edit Style’ option that you’ll find upon hovering on the completed collection grid.

    daraz
  • This is how your collection grid widget would look post-completion.

    daraz
  • Add another single banner to the app layout.

    daraz
  • One more single banner is needed for the app

    daraz
  • Product Grid- If you want to showcase some products, this widget is ideal for you. Select a product grid from the widget library drop-down and choose a product grid style that matches your requirements.

  • Drag and drop it on your draft home page layout. For more information, please click here.

    daraz
  • As always, use the Add/Edit Content option to add products to the grid.

    daraz
  • When done, customize the widget format with the ‘Edit Style’ option.

    daraz
  • Add another product grid to complete the app.

    daraz

Here’s a video of the completed Daraz app.

Wasn’t that super easy? Creating an e-commerce app is not rocket science anymore. With Swipecart, you can create an app yourself without worrying about how you would afford the high costs and time needed to make an app. If you have anything to ask, do contact us.