How to 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.

Clicking on “Create Layout” will open a popup with a text box to name your app layout.

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

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

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.

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.

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.

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.

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.

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.

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.

The OLX app with the app bar, bottom menu, and search bar now looks like this.

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.

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.

Here's what your app looks like after adding the category slider.

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.

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.

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.

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.

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.

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.

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.