How to create an app like BigBasket

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

Click on the "Create Layout" icon to create a new layout for the BigBasket mobile app.

Clicking on “Create Layout” will open a popup.

Type the layout name as "BigBasket" and click on "Create".

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".

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.

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.

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.

Here's the BigBasket app's mobile preview with the customized app bar and bottom bar.

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.

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.

Here's how the BigBasket app's home screen looks with the search bar.

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.

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.

Now that we have added a carousel banner to the BigBasket app's home screen, here's its preview.

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.

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.

Here's the look of the BigBasket app with the added collection grid.

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.

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.

Here's the mobile preview. We have added the product slider below a collection grid and carousel banner.

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.

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.

The BigBasket app with the single banner now looks as in the preview below.

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.

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.

The mobile preview of the BigBasket app is here after adding the product banner grid.

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.