September 13, 2022

How to create an app like BigBasket

BigBasket, an Indian online supermarket player, sells over 30,000 products which range from fruits and vegetables, pulses, meats, juices, kitchen essentials, electronics, and spices. It operates in Tier-1, 2, and 3 cities and serves over 7 million customer orders per month. The demand for such online apps has gone up in the last couple of years, post the Covid-19 scenario. So, today, we’ll guide you on how to create your own grocery app like BigBasket.

How to create an app like BigBasket:

You don’t have to learn to code or hire costly mobile app development services to build a grocery app like BigBasket. Anyone, even a non-coder, can create apps with the no-code app builder Swipecart. The only pre-requisite is that you must have your e-commerce store on Shopify or WordPress. Swipecart is available as a Shopify app and WordPress plugin. Install and activate it. Let’s now start the process to create an app like BigBasket.

  • In your Swipecart dashboard, click on "Layouts" in the left menu.

    create an app like big-basket
  • Click on the "Create Layout" icon to create a new layout for the BigBasket mobile app.

    create an app like big-basket
  • Clicking on “Create Layout” will open a popup.

    create an app like big-basket
  • Type the layout name as "BigBasket" and click on "Create".

    create an app like big-basket
  • Choose the "Blank Layout" icon. You also have different readymade themes to select from. But, for this BigBasket app, let's go with an empty layout. See that you have selected the "Blank Layout" icon and click on "Create Layout".

    create an app like big-basket
  • You’ll be taken to your BigBasket 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 big-basket
  • Let's start by customizing the app bar. You can modify the app bar color, font color, bottom radius, and elevation. Enable/disable the visibility of the cart, favorite, notification, and search icons on the app bar. For our BigBasket app, we have disabled all the icons. Upload the logo image or title text. Align its position on the app bar.

    create an app like big-basket
  • Next, customize the look of the side menu, bottom bar, user profile page, and input (welcome/sign-in page). It is simple. For all these, go to the respective tabs on the left menu, select an option from the available ready templates and update it to the app.

  • Now, let's move on to customizing the theme of the app. Click on "Theme Style Settings" in your BigBasket layout's left menu. Here, we can edit some of the theme settings such as font style, scale, and color. You can even set the app's primary color and background color from the color picker. Upload the BigBasket brand loader GIF and when you are done with customizing the theme, save and update.

    create an app like big-basket
  • Here's the BigBasket app's mobile preview with the customized app bar and bottom bar.

    create an app like big-basket
  • The next task is to customize the home screen of the app. Click on the “Home” tab to edit the home page layout.

  • In this tab, a blank home screen layout with only the app bar and bottom bar is displayed. now, you have to start filling content inside it.

    create an app like big-basket
  • Swipecart has a widget library consisting of UI components in visual form. Let's see how to access this widget list, add them to the app's home screen, and fill them with content.

  • Locate a drop-down box to the top right next to the home screen layout. Click on the drop-down icon. The widget list is displayed here. You can click on any widget to start working on it.

  • For our BigBasket's home screen, we start by adding a search bar. On the drop-down list, select "Search". A search bar is displayed just below the drop-down box. Drag and drop the search bar widget on the home screen layout.

  • You can edit the style of the search bar such as radius and padding. To achieve this, hover your mouse pointer over the search bar. Find the “Edit Style” option. Click on it to open a popup. Make adjustments to the radius and padding. Enable/disable the visibility of the search and Mic icon on the search bar. Here, we have enabled both in the BigBasket app's search bar. Click on “Save” to save your changes before you exit the popup. Click on "Update" to add the changes to your BigBasket app.

    Note: Click on "Save" to save changes after every task. Similarly, click on "Update" to update the saved changes to the app.

    create an app like big-basket
  • Here's how the BigBasket app's home screen looks with the search bar.

    create an app like big-basket
  • In the next step, let's add a carousel banner to the home screen. Select "Carousel Banner" from the drop-down list. Different style formats of carousel banners are displayed below the drop-down box. Select any one that you need from the variants. Drag and drop it inside the home screen layout below the search bar.

    create an app like big-basket
  • To add content to the carousel banner, hover the mouse pointer over the dropped widget. Locate the "Add/Edit Content" option right next to the widget. Click on it to open an "Add Carousel Banner" popup screen. Select the collection or product tab and click on the relevant collection category or product to link the banner image. See to it that the "Internal Linking" option is checked. Now, click on the upload icon to open an image for the widget specific to the selected collection/product. Click on "Add". The image is added to the carousel banner and is also linked to the selected collection/product. Repeat the same process until you've added sufficient images for your carousel banner widget Save and update.

  • To customize the look of the carousel banner widget, hover over the widget. This time, spot the "Edit Style" option below the "Add/Edit Content". Clicking on it will open a popup screen. Make changes to the widget style such as radius, padding, container padding, image position inside the container, title alignment, background color or image, indicator variant, etc. A preview of the changes you do is available to the right of the popup. Save the changes before you exit the screen.

    create an app like big-basket
  • Now that we have added a carousel banner to the BigBasket app's home screen, here's its preview.

    create an app like big-basket
  • We'll add a collection grid to the app's home screen. Select "Collection Grid" from the widget list. Click on any variant you like. For the BigBasket app, we have selected a 3x3 square collection grid. Drag and drop it inside the home screen below the carousel banner.

    create an app like big-basket
  • To add content, hover the mouse pointer over the dropped widget. Spot the "Add/Edit Content" option and click on it. In the "Collection Grid" popup, click on the "Select Collection" drop-down icon. Select the image of the collection category that want to add to the grid. Click on "Add". This collection category gets added to the grid. Repeat this to add the remaining eight collection categories to your 3x3 collection grid. You can add more images in multiples of three to the grid. We have added a title to the collection grid as "Shop by Category". Save the changes before you exit the screen.

  • Let's now customize some of the styling parameters to the collection grid. Hover the mouse pointer over the widget to spot the "Edit Style" option below the "Add/Edit Content". Clicking on it will open an "Edit Style" option. In the "Edit Style" popup screen, you have options to set the styling for radius, padding, container padding, title and image alignment, background image or color, and others. Customize these to suit the look of your app and save the changes.

    create an app like big-basket
  • Here's the look of the BigBasket app with the added collection grid.

    create an app like big-basket
  • Let's add a product slider to the app. Select "Product Slider" from the drop-down menu. Different styles of product sliders are displayed below the drop-down box. Select one and drop it below the collection grid.

    create an app like big-basket
  • To add products to the slider, click on "Add/Edit Content" to open the "Product Slider" popup screen. Click on the drop-down list from the Product tab. Click on the products you want to add to the slider. Save the changes when done.

  • Customize the product slider by hovering over it and clicking on "Edit Style". In the "Edit Style" popup, make changes to the radius and padding. Adjust the image orientation inside the container. Enable/disable the visibility of the favorite and add-to-cart icons. You can also choose to display or hide the product title and price. If you want, add a number indicator or button text for the carousel banners. Modify and save the changes.

    create an app like big-basket
  • Here's the mobile preview. We have added the product slider below a collection grid and carousel banner.

    create an app like big-basket
  • In the next step, we'll add a single banner to the Big Basket app's home screen. Select "Single Banner" from the drop-down list. We have opted for a 1:1 aspect ratio single banner. Drag and drop it to position on the home screen.

    create an app like big-basket
  • Click on "Add/Edit Content". In the "Custom Image Banner" popup, click on the drop-down list in the collection tab. Select any collection category for internal image linking. Now, click on the upload icon. Here, open the relevant image for the selected collection category. Click on "Save Banner".

  • Let's customize the single banner style. Adjust the radius, padding, and image orientation inside the container. Add a background image or color to the banner. Click here, to know more about how to edit the style of the added widget. Save when done.

    create an app like big-basket
  • The BigBasket app with the single banner now looks as in the preview below.

    create an app like big-basket
  • Next, we add a banner grid. Select "Banner Grid" from the widget drop-down list. We have selected a 1:1 square banner grid. Place it on your app's home screen layout.

    create an app like big-basket
  • As mentioned above, to add content inside the banner grid, hover over it to spot the "Add/Edit Content" option. Clicking on it will open a "Banner Grid" popup. In it, check the "Internal Linking" option. Now, from the product tab, click on the drop-down list. Select any product from the list to internally link the image you are going to add now to this product. The product list is fetched from your e-commerce store. Click on the upload icon and open the banner image specific to the product you have just selected from the product list. Click on "Add". Now, the image is added to the banner grid as well as linked to the selected product. So, when a user clicks on the image on the banner grid, they are taken to the specific product page directly. Repeat this process to keep adding images to the banner grid. Save and exit.

  • Hover over the widget and spot the "Edit Style" option. Make changes to the container radius and padding. Align the title and font color. Add a background image or color to the banner grid. Save and update the changes to the BigBasket app.

    create an app like big-basket
  • The mobile preview of the BigBasket app is here after adding the product banner grid.

    create an app like big-basket
  • Continue to add single banners, product sliders, banner grids, and carousel banners to the BigBasket app. Click here to explore how to design an app's layout and the whole range of widgets available on Swipecart.

  • So here is the final look of the BigBasket app we have created using Swipecart, a drag-and-drop app builder.

We are done building an app like BigBasket without having to code. Similarly, you can create attractive apps for your e-commerce stores. This is made possible with Swipecart, a powerful no-code app builder.

If you are curious to learn how to use Swipecart, here's a detailed beginner's tutorial on how to create apps for your e-commerce store.

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

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?

For more queries on Swipecart, please contact us. We'll be glad to assist you.