How to create an app like lazada

The first step is to create a layout for our Lazada app. To achieve this, click on "Layouts" in the left menu on your Swipecart dashboard.

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

In the popup, you have to enter a name for your layout.

We'll enter the name "Lazada" and click on "Create".

The "Choose Layout" screen opens. Here, you can choose from different readymade templates. These are default layouts that can be customized for branding. Another option is to select an empty or blank layout. To create an app like Lazada, let's choose "Blank Layout". Then, click on "Create Layout".

You’ll be taken to your blank Lazada 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. In the left menu of your layout, "App Bar Settings" is usually the default selected setting.

Your app layout's app bar is displayed on the center screen. For customization, you can modify the app bar color, font color, bottom radius, and elevation. Enable/disable the visibility of the cart, favorite, notification, and search icons on the app bar. We have enabled the visibility of the favorite icon for the Lazada app bar. Upload the logo image or title text. Align its position on the app bar. Click on "Save" before you exit.

Note: Click on "Save" wherever it is given before you exit the screen or tab.

Next, customize the look of the side menu, bottom bar, user profile page, and input (welcome/sign-in page). It is simple. For all these, go to the respective tabs on the left menu. A set of readymade templates are available for each. Select an option from the variants and update it to the app.

Now, let's move on to customizing the theme of the app. Click on "Theme Style Settings" in your Lazada layout's left menu.

Here, we can edit some of the theme settings such as font style, scale, and color. You can even set the app's primary color and background color from the color picker. Upload the Lazada brand loader GIF or any other and when you are done with customizing the theme, save and update.

This is the mobile preview of the Lazada app with the customized theme and app bar.

The next task is to customize the home screen of the app. Click on the “Home” tab next to "Theme Settings" to edit the home page layout.

In this tab, a blank home screen layout with only the customized Lazada app bar and the bottom bar is displayed. It's time to start filling the contents inside it.

Filling contents inside the layout is easy with Swipecart, a no-code app builder. It has pre-coded visual UI components called widgets that are to be dragged and dropped inside the layout. Let's see how we can accomplish this with a drag-and-drop editing tool.

Locate a drop-down box to the top right of your layout dashboard just next to the blank layout. Click on the drop-down icon and you'll see a widget list containing names such as Collection Slider, Product List, Search, Carousel Banner, etc. This is Swipecart's widget library or list. Let's start with the Search widget. Click on it in the list.

A search bar is displayed below the drop-down box. Drag this and drop it inside the blank home screen layout just below the app bar.

Let's now customize the look of the search bar. Hover your mouse over the search bar to open the “Edit Style” option. Edit the style of the search bar such as radius and padding. You can enable/disable the visibility of the search and voice search (mic) icon on the search bar. For our Lazada app, we have enabled both the search and mic icons. Click on “Save” and exit.

The Lazada app now looks like as in the image below with the search bar on the home screen.

Let's start laying other elements below the search bar on the home screen. First, we'll add a collection slider. Click on the drop-down icon and select "Collection Slider" from the widget list. Different variants of the collection slider are displayed below the drop-down box. Let us select the "Round collection slider with title and radius". Drag and drop it into the home screen layout below the search bar.

We'll add collection categories to the collection slider. Hover the mouse pointer over the dropped collection slider widget and spot the "Add/Edit Content" option. Click on it to open a "Collection Slider" popup screen. You have the option to give a title to the slider. In the "Select Collection" tab, click on the drop-down list. Select the collection category that you want to put on the slider. Click "Add". The image of this collection category is added to the slider. Repeat the same process to add more collection category images to the slider. Save when done.

Let's now customize the collection slider. Again, hover over the widget and this time, spot the "Edit Style" option sandwiched between "Add/Edit Content" and "Remove Block". Click on it to open the "Edit Style" popup screen. Here, adjust the padding of the images inside the container, and even the container padding. You can add a background image or color to the collection slider container. Also, align the title or change the font color. Edit these parameters and save when done.

Click here to know more about how to edit the widget style on Swipecart.

Here is the mobile preview of the Lazada app with the collection sliders added to the home screen.

Next, we add a carousel banner to the Lazada app. Select "Carousel Banner" from the drop-down widget list. Drag and drop the carousel banner widget you have selected into the home screen.

Let's add images to the carousel banner. Hover over the dropped widget on the home screen and click on "Add/Edit Content". An "Add Carousel Banner" popup opens. See that the "Internal Linking" option is checked. Click on the upload icon. In the window, open an image that you want to upload. Once the image is uploaded, go to the Products tab. Click on the drop-down list and select a product specific to the uploaded image. By doing this, you internally link the image to the specific product in the app. So, when a user clicks on the image in the carousel banner, they are redirected to the selected product page on the app. Repeat the process to add more images to the carousel banner and link them to relevant products or collection categories. Click on "Save Banner" when done and exit the popup.

For more details on how to add or edit content for widgets on Swipecart, click here.

It's time to set up some customized styles for the carousel banner. Hover over the widget and click on "Edit Style". An "Edit Style" popup opens. Here, you have options to edit the radius and padding of the image and even the padding of the container. The benefit of Swipecart is you can preview the style changes to your right on the popup screen. This helps you to set the styling parameters for the widget. Next, you can adjust the image position inside the banner container. Adjust the title and font color of the carousel banner title. Add a background image or color to the banner container. Enable/disable the box shadow through the toggle button. Similarly, if you enable the visibility of the indicator for your carousel banner, you can select any of the given variants for it. Click on "Save" and exit.

Here's the mobile preview of the Lazada app with the added carousel banner widget.

We again add a collection slider to the app. Select "Collection Slider" from the widget list. We opt for a "Square collection slider with the title". Place it inside the Lazada app home screen.

Hover over the dropped widget and click on "Add/Edit Content". In the "Collection Slider" popup, click on the drop-down list in the "Select Collection" tab. Here, the collection categories list is displayed that is fetched from your e-commerce store. Select the collection category to be displayed on the slider. Click on "Add". Repeat the process until you add the categories you want on the slider. Give a title to the collection slider. Save and exit.

To customize some styles in the collection slider, hover over the widget and click on "Edit Style". In the "Edit Style" popup that opens, you have options to customize the styling elements for your collection slider.

Here's a glimpse of the collection slider we added to the Lazada app.

You can add as many collection sliders as you want on the app. Give attractive titles to it to keep the customers engaged in the app.

Next, we start adding some products to the home screen. Select "Product Grid" from the drop-down list. From among the variants, select the one that you like and place it on the home screen.

Let's add product images to the grid. Click on "Add/Edit Content". In the "Product Grid" popup that opens, click on the Product tab. Access the product list by clicking on the drop-down icon. Select the product image that you want to be displayed on the grid. Click on "Add". Repeat this process to keep adding products to the grid. Finally, when done, click on "Save" and exit.

You can customize the look of the Product Grid widget. For that, hover over it and click on "Edit Style". A popup opens where you can change some parameters such as the radius and padding of the image inside the grid, and the radius of the container. You can change the image position inside the container. Enable/disable the visibility of product title and price or that of favorite and cart icons. You can set the font and alignment of the product grid title as well as that of the additional products button. Make the desired changes and save them. Update the changes to the layout.

Here's the mobile preview of the Lazada app with the product grid.

You can add as many widgets as you want inside the Lazada app. The combination of these banners, grids, and sliders of your products and collection categories make up the home screen of the Lazada app. Here's the final look that we have achieved by creating an app like Lazada on Swipecart.