September 07, 2022

How to create an app like Olx

OLX is a classified ad platform used as a combination of B2C, B2B, and a C2C model. Here, anyone can buy or sell anything by reaching a wide market of potential shoppers. OLX has above 350 million monthly active users and is active in around 92 countries. An average of 60 million new items are posted on its app every month. The most significant feature of these buy-sell classified mobile apps is that they have to make things so much easy and fast.

If you are planning to create an app like OLX, we are here to guide you. Let’s use the best mobile app builder Swipecart to build a marketplace app like OLX where you can buy/sell anything including products and services, and even place ads online.

How to create an app like OLX:

Sign up for Swipecart on WordPress or Shopify. On your Swipecart dashboard, click on the "Layouts" option in the left menu.

create an app like Olx
  • Once you are in the Layouts section, click on the “Create Layout” button to start creating an app like OLX.

    Create An App Like Olx
  • Clicking on “Create Layout” will open a popup with a text box to name your app layout.

    Create An App Like Olx
  • Type your layout name. Let's name it "Olx". Click on the "Create" button.

    Create An App Like Olx
  • Next, you will have to choose a layout for your OLX app. You can either select one from the available default layouts or choose a "Blank Layout".

    Create An App Like Olx
  • Let’s go ahead and select the "Blank Layout" for now.

  • You’ll be taken to your 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 Olx
  • Under the "Theme Settings" opt for "App Bar Settings" in the left menu. Here, you modify the app bar style and customize it to go with your brand. Swipecart allows you to customize the app bar color, font color, bottom radius, and elevation. You can enable/disable the search, favorite, notification, and cart icon on your app bar.

  • Another feature in this setting is to upload your branding element in the form of a brand title or logo.

    Note: While uploading the image file, ensure it matches the mentioned specifications.

    Create An App Like Olx
  • Let us start customizing the theme settings. For this, click on "Theme Style Settings" located at the end of the left menu list. Here, Swipecart allows you to change the font style, font scale, font color, and even the app color.

    Create An App Like Olx
  • Modify the font size, style, and app bar color. Upload a GIF loader for your app here. Again, make sure that the file size meets the requirements mentioned in the section.

    Create An App Like Olx
  • Save the changes by clicking on the "Save" button. You must save any changes you make for it to reflect on the app layout. Your OLX app will now look like as seen in the image below.

    Create An App Like Olx
  • The next task is to customize the home screen of the app. Click on the “Home” tab to edit the home page layout.

  • When you click on "Home", an empty home screen is displayed with only the app bar and the bottom bar. We now have to populate the home screen with banners and product/service ads. Let's start it now.

    Create An App Like Olx
  • Let's Start by placing a search bar below the app bar. For this, click on the drop-down box in the top right corner of your screen. Click on the drop-down menu icon and select "Search" from the list. A search widget 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. Hover your mouse over the dropped search bar on the home screen to open the “Edit Style” option. Modify the search widget style. Click on “Update” to save your changes.

    Create An App Like Olx
  • The OLX app with the app bar, bottom menu, and search bar now looks like this.

    Create An App Like Olx
  • We will add a category collection slider below the search bar on the app. Spot the drop-down box next to the home screen layout. Click on the drop-down icon and select "Collection Slider" from the list. Different UI styles for the collection slider are displayed just below the drop-down box. Select a widget of your choice, drag it to the home screen, and release it there. We have opted for a Square Collection Slider With Title And Radius.

    Create An App Like Olx
  • Hover the mouse pointer over the dropped widget until you sight the “Add/Edit Content” option. Click on it to open a popup.

  • Add a title to the widget. We have named it "Browse Categories". Now, upload images to it from the collection list. Save the changes and update the app layout by clicking on the "Update" button.

    Create An App Like Olx
  • Here's what your app looks like after adding the category slider.

    Create An App Like Olx
  • Let's add a single banner below the category collection slider. Select "Single Banner" from the drop-down menu. Now, select a single banner widget that you like and drag it to the home screen just below the category slider.

    Create An App Like Olx
  • Hover over the empty widget to get the “Add/Edit Content” option. Clicking on it will open a popup. Upload a banner. Ensure the banner size matches the aspect ratio mentioned on the widget. Save changes.

  • Once the banner is uploaded, we now customize the style of the banner. Again hover over the widget and click on the "Edit Style" option. Here, you can adjust the radius, padding, container padding, and other details. There is a color picker to help you add background color to the banner box. Save and update the changes.

    For more information on editing and styling widgets, click on this link.

    Create An App Like Olx
  • We are done with adding a category collection slider and a single banner on the home screen. Similarly, you can add as many banners and category sliders or grids on the home screen.

    Create An App Like Olx
  • Let's begin to add products to the home screen. Select "Product Grid" from the drop-down menu. Multiple product grid UI components in different formats are displayed below the drop-down box. Select one and place it on the home screen.

    Create An App Like Olx
  • Hover the mouse pointer over the dropped product grid. You'll spot the "Add/Edit Content” option right next to the widget. Clicking on it will open a popup. Add a title to the product grid widget. Here, we have named it "Fresh Recommendations". Start uploading relevant product images to it.

  • To customize the product grid widget, click on the “Edit Style” option. Adjust the radius and padding. Decide the details you want to show to the users below the product image. You can enable/disable product title, price, cart, and favorite button. You can also select if you want to show all uploaded products or simply display a "See More" option to take users to the collection page. All the changes you make can be previewed on the right side of the popup screen.

  • Save the changes and update the layout view each time.

    Create An App Like Olx
  • We have enabled the product title, price, and favorite to be displayed below the image. The app home screen will now look as in the screenshot below.

    Create An App Like Olx
  • Repeat adding more banners and products to the home screen by selecting the UI style from the drop-down menu.

  • Go through the drop-down list to study the different options available to make your app's home screen more attractive and engaging. The final app which we have built will look like this.

To create an app like OLX, study the OLX app home screen design from a business and customer perspective. Understand what makes it successful and then implement it in your app design. Creating an app like OLX is now super easy with Swipecart. It totally removes your dependency on coding to build an app. This drag-and-drop app builder provides you with advanced features and integrations. You can build your e-commerce app in a matter of minutes and submit it to the App Store/Play Store.

We have resources to make your task of creating apps with Swipecart easier: https://rentechdigital.com/swipecart/tutorial

Watch this video for a detailed tutorial on app building with Swipecart:

Invest in Swipecart today to create an app like OLX. It is a cost-effective app-building solution to help you get new customers, retain the existing ones, and increase your business profits manifold.