Navember 07, 2022

How to create an app like Blinkit

With many people not having time to run errands, online grocery e-commerce platforms like Blinkit helps people to get whatever they need to be delivered at home.  This includes fresh fruit and vegetables, meats, pulses, cosmetics, and other household needs. Blinkit, earlier known as Grofers, has been quite popular with professionals across major Indian cities, especially when they’re sometimes offering deliveries in less than 15 minutes.

Despite the many challenges in the sector, there is enough room for you to create an app like Blinkit and compete with them. With the help of the no-code app builder Swipecart, it is possible to create an app like Blinkit and compete with established brands in the grocery and FMCG niche. Let’s see how it’s possible-

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

With the help of drag-and-drop app builder Swipecart, you can create an e-commerce store rivaling Blinkit and its various peers in the market.

Steps to create an app like Wayfair on Swipecart:

To start with, you will require an operational Shopify or WordPress e-commerce website to install Swipecart. You could do so through the Shopify App Store or WordPress Plugin Center.

  • First install, sign up, and activate Swipecart.

  • At the Swipecart dashboard, click on the Layout tab in the left menu

    blinkit
  • As we’re creating a new app from scratch, click on the ‘Create Layout’ option.

    blinkit
  • A popup would appear to name the app, let’s call the app ‘Blinkit’. Click 'Create'.

    blinkit
  • After doing so, 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’.

    blinkit
  • This will lead you to the ‘Blinkit’ layout dashboard. Here, we start creating the app by managing the app’s theme in the Theme Settings tab.

Theme Settings

  • Here, we customize the overall look and feel of the app. Let's start with the App theme settings.

    blinkit
  • App bar Settings- Here, you can manage and add features to the app bar along with another branding that remains constant wherever you are on the app. Click here to know more about App Bar Settings.

    blinkit
  • Besides this, you’ve got to choose from pre-made templates for the  side menubottom barprofile page, and  input style.

  • Theme style settings- Here, you can manage and edit the app loader icon, fonts, and colors for the entire app. To understand how you could make these changes, click here.

    blinkit
  • Here’s a preview of the completed theme settings.

    blinkit

Designing the Home Page

  • Once you are done with the theme settings, you can start designing your app with the help of drag-and-drop widgets on your home page. First, we need to add a single banner to our draft Blinkit app

    blinkit
  • Single banner- With this, you can attract your user’s attention towards a single item - this could be a collection, a product, or anything else.

  • Select ‘Single banner’ from the widget library drop-down and choose a style that matches your requirements. Drop it to the draft app home page. For more information, click here.

    blinkit
  • You can then choose to add the product, collection or page images, or link via the ‘Add/Edit Content’ option. Click here to know more about it.

  • Once done, customize your banner design and formatting with the ‘Edit Style‘ option later. Click here to know more about how to style widgets.

    blinkit
  • Here is a preview of the single banner on the draft Blinkit app.

    blinkit
  • Carousel banner- Let's add a carousel banner to the home screen. These are swipeable banners that will enable you to drive conversions.

  • Select "Carousel Banner" from the drop-down widget list. Select one for your home screen from among the style variants below the box. Click here for more information on using carousel banners for Swipecart.

    blinkit
  • Use the Add/Edit Content option to add products to the grid.

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

    blinkit
  • Check out this preview with the Carousel banner on the draft Blinkit app.

    wayfair
  • 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.

    blinkit
  • Use the Add/Edit Content option to add products to the grid.

    blinkit
  • Customize the widget format with the ‘Edit Style’ option.

    blinkit
  • This is how the app would look after adding the collection grid.

    blinkit
  • Now, we add another single banner as required.

    blinkit
  • 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.

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

    blinkit
  • Later, we customize the widget format with the ‘Edit Style’ option.

    blinkit
  • Finally, the draft home page of our app would look something like this.

    blinkit
  • After this, add more single banners and product grids as required.

  • Besides this, you could add other widgets like  Banner GridBanner Slider,  Collection GridCollection SliderProduct ListProduct SliderSearch, and  Timer.

Here's a video of the final app.

We bet you’ve got the hang of this!  With Swipecart, you don’t need to hire professional coders by the hour, you can create an app yourself. If you have any queries, feel free to contact us.