How to create an app like TATACliq

On the dashboard, click on "Layouts" in the left menu.

Click on "Create Layout" to create a new layout.

Clicking on “Create Layout” will open a popup. Name the layout "TATACliq". Click on "Create".

Swipecart allows you to choose between pre-made layout templates and a blank layout. Since we need to design an app like TATA Cliq, let's go with "Blank Layout". Now, click "Create Layout."

A blank layout with the name TATA Cliq is formed. For more details about creating layouts on Swipecart, click here.

You'll be taken to the TATACliq layout dashboard with the default tab as "Theme Settings" and the sub-tab as "App Bar Settings". Basically, the theme settings allow you to set the theme and customize it for your brand.

App Bar Settings: Set your branding element on the app bar or the action bar because it stays on the top throughout all pages of your app. Here, we upload the TATA Cliq logo to customize the app bar. For more details on app bar settings, click here.

We then go to Side Menu Settings, Bottom Bar Settings, Profile Page Settings, and Input Style Settings. Here, we select our choice from the style variants and save it to the app.

Theme Style Settings: In this section, we set the theme for the app. The changes made here are reflected throughout the app.

We can change some of the styling parameters for the app's theme such as app background color and font style & color. Click here to know more about theme style settings on Swipecart.

Here's the draft app with theme customizations completed to match the TATA Cliq app.

Next, we move on to design the TATA Cliq app home screen. Click on the "Home" tab. A blank home screen is displayed with only the app bar and bottom bar.

We add content to the home screen by dragging and dropping style variants of widgets. These are accessible in the screen's drop-down box panel at the right section.

Click here for more information about widgets on Swipecart.

Search Bar: We start with the search bar. Select "Search" from the drop-down widget list. Drag and drop the search bar display below the box on home screen.

Hover over the search bar and click on the "Edit Style" option. In the popup that opens, open popup, customize the search bar's styling parameters

Click here for information on the search bar widget.

Have a look at the TATA Cliq app's home screen with the search bar on it.

Collection Slider: We display the collection categories in a slider format at the top of the app.

Select "Collection Slider" from the widget list. Different styled widgets are displayed just below the drag-and-drop box. From here, we select a round collection slider and drag and drop it to the home screen below the search bar.

Click here for details about collection sliders on Swipecart.

To add content to the collection slider, hover over the widget and click on "Add/Edit Content". In the opened popup, add all relevant collection categories from the collection list to the slider.

Click here for details about adding and editing content on widgets.

To set the styling for the collection slider, hover again over it and click on "Edit Style". In the opened popup, set the styling parameters to suit the brand.

Click here for details on styling widgets.

Here is how the added collection slider looks on the TATA Cliq app home screen.

Carousel Banner: These are banners in rotating or slideshow format. You can add diverse information in them ranging from offers, product-specific discounts, new launches, and many more.

Select "Carousel Banner" from the widget list. Place one among the style variants inside the home screen layout.

For more details on carousel banners, click here.

Add images to the banner through the "Add/Edit Content" option. In the popup that opens, add images and link them to the relevant products, collection categories, any other app pages, or external website links.

Set the styling elements for the banner through the "Edit Style" option. During the editing, you can preview the changes you make on the "Edit Style" popup itself.

Have a look at the TATA Cliq app preview with a carousel banner on it.

Repeat adding another carousel banner to the app's home screen. This allows you to keep your customers engaged in the app.

Product Slider: To display specific products on the home screen, select "Product Slider" from the widget list. Place one among the style variants inside the home screen.

Click here for information about product sliders on Swipecart.

Add products to the slider from the product list through the "Add/Edit Content" option. Set the styling elements for the slider through the "Edit Style" option.

Design your app on Swipecart because it is the easiest and fastest way to convert your online store to an amazing app.

Have a look at the product slider added to the TATA Cliq app.

Product Grid: This widget allows you to highlight relevant products in a grid format.

Select "Product Grid" from the widget list. Place one among the style variants inside the home screen.

Click here for information about the product grid widget on Swipecart.

Add products to the grid from the product list through the "Add/Edit Content" option. Set the styling elements for the grid through the "Edit Style" option.

Here's the added product grid on the TATA Cliq draft app.

Single Banner: This widget is effective when you want any product, collection category, or deal to be the highlight on the home screen of your app.

Select "Single Banner" from the widget list and place your choice of style variant inside the home screen of the app layout.

Click here for details on the single banner widget.

Add an image to the banner and link it to the specific product through the "Add/Edit Content" option. Set the styling elements for it through the "Edit Style" option.

Here's the app preview with the single banner on it.

Banner Grid: Placing banners in grid format allows you to engage customers on the app.

Access a banner grid variant from the widget list and place it on the home screen.

For information on banner grids on Swipecart, click here.

Add products to the banner grid and link them to the relevant products from the Product tab. This is done through the "Add/Edit Content" option. Style the widget through "Edit Style" and customize it for branding.

Have a look at the TATA Cliq app's home screen and notice the banner grid with the product links on it.