September 13, 2022

How to create an app like ajio

Ajio, a shopping and lifestyle brand from Reliance Retail, was launched in the year 2016. It features over 800,000+ styles from 3500+ brands. In India, it is ranked second in the fashion and apparel category. Its store receives about 17.5 million monthly visitors.

To cater to 65% of its traffic coming from mobile devices, it offers an advanced app to its customers. The mobile app has over 100 million downloads. The app is simple, minimal, and maintains a consistent design throughout. So, why not create an app like Ajio? You don’t need to be a skilled coder to build apps. All you need is Swipecart. It is a no-code app builder that uses a drag-and-drop editor and visual components to help anyone create a feature-rich app in minutes.

How to create an app like Ajio:

Let's start creating Ajio app on Swipecart. For this, the first step is to sign up on Swipecart and launch it.

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

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

    create an app like ajio
  • Clicking on “Create Layout” will open a popup. It's time to name the layout.

    create an app like ajio
  • Type the app's layout name. Let's name it "Ajio". Now, click on "Create".

    create an app like ajio
  • 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.

    create an app like ajio
  • 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.

    create an app like ajio
  • 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.

    create an app like ajio
  • 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.

    create an app like ajio
  • The Ajio app with the app bar, bottom bar, and the customized theme style looks as in the image below.

    create an app like ajio
  • 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.

    create an app like ajio
  • 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.

    create an app like ajio
  • The Ajio-app with the app bar, bottom menu, and search bar appear as seen in the image below.

    create an app like ajio
  • 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.

    create an app like ajio
  • 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.

    create an app like ajio
  • 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.

    create an app like ajio
  • 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.

    create an app like ajio
  • 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.

    create an app like ajio
  • 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.

    create an app like ajio
  • 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.

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

    create an app like ajio
  • 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.

    create an app like ajio
  • 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.

    create an app like ajio
  • 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.

    create an app like ajio
  • 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.

    create an app like ajio
  • The Ajio app with the countdown timer on the home screen is complete.

    create an app like ajio
  • 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.

We hope you enjoyed creating an app like Ajio. All along this process, we haven't written a single line of code. The drag-and-drop editor of Swipecart is powerful and easy to use. Anyone can design an e-commerce app in minutes with it.

If you are curious to know more about Swipecart, click here for tutorial resources.

For those of you who want a video tutorial, here's a beginner guide on how to create an app with Swipecart.

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

We have come to the end of our guide- How to create an app like Ajio. If you have any queries regarding Swipecart, please contact us and we'll be glad to assist you.