How to Create An App Like Blibli

Sign up and activate Swipecart on your website’s backend. On the Swipecart dashboard, click on ‘Layouts’ on the left menu.

As we’re making a new app from scratch, click on ‘Create Layout’ to make an app interface like Blibli.

A popup asking you to name the layout would appear. Let’s name this app ‘Blibli’.

Click ‘Create’. We can now start creating our app.

A popup would appear asking you to choose from a blank layout or several pre-made layout templates.

As we’re creating an app from scratch, let’s select ‘Blank Layout’. Click on ‘Create Layout’. This will take you to the layout dashboard. Here is where all the magic happens.

On the dashboard, you’ll see the ‘Theme Settings’ tab by default. Here, you can customize the app’s look and set branding elements to it.

Let’s start with the ‘App Bar Settings’ on the left of our Blibli layout dashboard.

App Bar Settings- Here, you can customize the app bar that remains constant wherever you go on the app. To know what you can do with this, click here.

Next, customize the look of the side menu, bottom bar, user profile page, and input style (welcome/sign-in page). 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 save it to the app.

Theme style settings- Here, you can manage and edit the fonts, colors, and app loaders for a universal app usage experience. To know more about this, click here.

Here’s what the draft app would look like after these settings.

Swipecart allows you to design the home page with easy-to-use drag-and-drop widgets. When you go to the ‘Home’ tab on your Blibli layout, you’ll find a home page layout in the center with a widget library to the left and the draft pages on the right.

Let’s see how we can make a mobile app quickly that looks and feels the same as the Blibli app home page with Swipecart.

Search Bar- No matter how many pages your app has, your app needs a search bar for easy and efficient navigation. In the widget library drop-down, select the search bar.

Drag and drop the search bar just below the App bar. Once done, adjust the way it looks with the ‘Edit Style’ option that appears upon hovering on the search bar in the draft home page layout.

For more information regarding the search bar, click here.

Here’s a preview of the search bar on a mobile layout.

Carousel Banner- Now it’s time to showcase the products or categories you’d like. From the widget library, choose the Carousel banner from the drop-down list.

Drop a carousel banner design you’d like to the draft home page layout. For more details, click here.

Upon hovering on the widget on to the draft home page layout widget Add/Edit Content option. Here, you can add the image can add the images with links you’d want to showcase regarding this, click here.

After you’re done, you’ll find an Edit Style option upon hovering on the completed Carousel banner. Here, you can customize the carousel and preview the changes you made. For more details about this, click here.

Here’s what the completed carousel would look like on a mobile layout.

Collection Slider- Here, you can add collection-specific images with links that are scrollable like a carousel.

Choose the collection slider design from the widget library and drop it at the desired position on the draft home page layout. For more details about this, click here.

To add or edit images and links, use the Add/Edit Content option.

Once done, use the Edit Style option to customize the look of your collection slider.

Here’s a preview of the app with the collection slider.

Single Banner- You can use a Single banner whenever you’d want to showcase a promotional campaign or discount offer. Choose a single banner from the widget library and drop it to the desired position.

To know more about the single banner, click here. Use the Add/Edit Content option to upload your image and link.

After doing so, use the Edit Style option to customize the single banner’s look.

Use the Add/Edit Content option to upload your image and link. After doing so, use the Edit Style option to customize the single banner’s look

Here’s what your finished banner would look like.

Product Slider- Similar to the collection slider, you could use the product slider to showcase your star products.

Select the right product slider design from the widget library and drop it into the draft home page layout. For more information about this, click here.

Use the Add/Edit content option to add your products and links. When done, use the edit style option to customize it as required.

This is what your product slider design would look like.

For this Blibli lookalike app, here we’ve added another product slider layout.

Product Grid- You can showcase some of your star products using a product grid. Choose a product grid style from the widget library and drop it into your draft home page layout. For more details about this, click here.

Use the Add/Edit Content option to choose the products/ collections you’d like to showcase.

Once done, you can customize the product grid with the Edit Style option.

This is what the app would look like after adding the product grid.

Besides this, you could add widgets like a Banner Grid, Banner Slider, Collection Grid, Product List, and Timer.