How to create an app like ajio

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

Let's create the Ajio app on a new layout. Click on the “Create Layout” icon.

Clicking on “Create Layout” will open a popup. It's time to name the layout.

Type the app's layout name. Let's name it "Ajio". Now, click on "Create".

Choose a "Blank Layout". Swipecart has some default layout options too. These are ready-made templates for apps. But to create an app like Ajio, we select a Blank layout.

You’ll be taken to your blank Ajio layout dashboard with the default tab as “Theme Settings” and "App Bar Settings" as the sub-tab. 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 with customization and branding for the Ajio app bar. Change the app bar color and the font color. Enable/disable the cart, favorite, search, and voice search mic icon on the app bar. Upload the logo image. Save the changes.

Note: Ensure the uploaded logo image size matches the mentioned specifications.

Similarly, go through various customization options in the Side Menu Settings, Bottom Bar Settings, Profile Page Settings, and Input Style Settings. Now, let's make some changes to the theme style. For this, select "Theme Style Settings" in the left menu of your Ajio layout.

Here, change the font style, scale, color, and the app's primary and background color. Also, upload a loader GIF from here.

The Ajio app with the app bar, bottom bar, and the customized theme style looks as in the image below.

As you can see above, there is no content on the home screen. It's time to add banners, collection sliders, and product grids to it. Also, let's customize the look of the home screen to sync with the brand image. Click on the “Home” tab to edit the home page layout. The app's home screen layout opens up with only the app bar above and the bottom navigation bar.

Let's add a search bar to the home screen. There's a drop-down box at the top right next to the blank home screen. Click on the drop-down icon and select "Search" from the list. A search bar widget is displayed 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. Hover the mouse pointer over the search bar widget to open the “Edit Style” option. Modify the search bar styling and click on “Update” to save the changes.

The Ajio-app with the app bar, bottom menu, and search bar appear as seen in the image below.

We'll start populating the app's home screen with content now. First, we'll add a collection slider. Select "Collection Slider" from the drop-down list. Different styles of collection sliders are displayed below the drop-down box. For this app, we'll select a Square Collection Slider With Radius And Title. Drag and drop this into the home screen layout.

Let's add collection images to this empty widget. Hover the mouse pointer over the widget until you spot the "Add/Edit Content" option. Click on it to open a popup screen. Start adding images from your collection list. Save the changes.

To customize the collection slider, hover over the widget again and click on the "Edit Style" option. Adjust the container padding and radius. You can add background color/image and even change the font color/style and image positioning. Save the changes and update the app layout after you are done with customizing the style.

To add a carousel banner, select "Carousel Banner" from the drop-down box. Select from a wide range of size formats. Place the one you want inside the home screen.

Open the "Add/Edit Content" popup and add banner images from your collection list to the blank widget. Open the "Edit Style" popup to make modifications to the banner radius and padding. You can select the font style/size of the banner title. You also have the option to select variants for the indicator. Save and update.

The Ajio app with the added carousel banner looks like in the image below. Notice the dashed line below the banners which is one of the indicator variants. A user can click on any of these to look at that banner.

Let's repeat the process and add one more carousel banner to the home screen. Repeat the process as mentioned above. Drag and drop a carousel banner UI component into the screen layout.

Add images to the banner by opening the "Add/Edit Content" popup. Similarly, edit its style by clicking on the "Edit Style" popup. Save the changes and update the app home screen.

The Ajio app with two carousel banners one below the other looks like in the image below.

Now, let's add a single still banner. Select "Single Banner" from the drop-down menu. Place any one of the single banner widgets inside the home screen.

Open the "Add/Edit Content" popup to add the banner image. Please take care to see that the image size matches the aspect ratio specification of the selected single banner widget. Style your banner container or customize it by opening the "Edit Style" popup. Save the banner and update it.

If you have heard of flash sales or deals, you might be aware that they have a validity period. These are very common in e-commerce apps. Let's try adding one to our Ajio app. For this, select "Timer" from the drop-down menu. The timer is displayed below the drop-down box. Drag and drop it in position on the home screen layout.

Hover the mouse pointer over the timer widget to open the "Add/Edit Content" popup. Add attractive images to the widget. There is an option to select the start and end date/time for the flash deal. This automatically starts the countdown for the timer.

Next, hover over the timer widget to open the "Edit Style" popup. Make changes to the banner container such as radius, padding, etc. Save and update.

The Ajio app with the countdown timer on the home screen is complete.

Continue to add carousel banners and single banners. Explore even the other widget types to see which best fits the Ajio app home screen.

The process of adding widgets, adding images to it, and editing the style is the same.

For a detailed tutorial on the widget library and how to edit the widget, click here.

And here is the final look of the Ajio app we have created using the best no-code app builder Swipecart.