How to create an app like Jumia

The first step to building an app is to create a layout. Click on "Layouts" in the left menu of your Swipecart dashboard.

To create Click on the “Create Layout” icon to create a new layout

Clicking on “Create Layout” will open a popup. It's time to name the layout.

We have named the layout "Jumia". Click on "Create".

On the next screen, you'll have two options. One is to select a blank layout. The other is to select from the default readymade templates. Let's choose a "Blank Layout" to create an app like Jumia. Click on "Create Layout".

A Jumia layout is created. You’ll be taken to your layout dashboard with the default tab as “Theme Settings”. The basic function of “Theme Settings” is to customize the look of the app. It has multiple options to set branding elements for your app.

Let's first customize the app bar. For this, click on "App Bar Settings" on your Jumia layout's left menu.

Here, customize the app bar such as editing the app bar color, font color, bottom radius, and elevation. Make the notifications, search, cart, and favorite icons visible or invisible on the search bar. Upload the brand logo image or text on the app bar and adjust its alignment. When you are done editing with the app bar styling, click on "Save" to save the changes made.

For the Jumia app, we have made the cart icon visible on the app bar. We have uploaded the logo and saved the changes.

In the layout's left menu, you have options to select the side menu, bottom bar, user profile page, and input style (sign-in/welcome) page for your app. Various style options are given for each. Select one among them and update them to your app.

Now, let's make some changes to the app's theme. Select "Theme Style Settings" on the left menu.

We can edit some theme styles such as font style, font scale, font color, app's primary color, and background color. Next, you upload a loader for your app. Ensure the loader GIF meets the mentioned requirements. Save the changes.

The Jumia app with the app bar, bottom bar, and changes in the app's theme now looks as in the image below.

The next task is to customize the home screen of the app. Click on the "Home" tab in the main menu next to "Theme Settings". An empty home screen layout with only the app bar and the bottom bar is displayed. It is here that we start to populate the home screen with content.

In Swipecart, you have visual UI components or widgets to create content easily inside the app screen. These are located in the drop-down menu that is situated just next to the home screen layout of your app. When you click on the drop-down icon, this widget list appears.

Let's start by placing the search bar on the app's home screen. To do this, click on the drop-down icon. Click on the "Search" widget. A search bar widget appears below the drop-down box. To add it to the home screen, drag & drop it.

You can edit the Search bar style such as radius and padding. Hover your mouse over the search bar to open the “Edit Style” option. Edit the radius and padding of the search bar box. Here, you can opt to make the text search and voice search icon visible or not on the search bar. Save the changes. Click on “Update” to update the changes to the layout.

Here's your mobile app preview of the search bar.

Now let's place a carousel banner on the home screen. Click on the drop-down icon and select "Carousel Banner" from the widget list. You'll see different styles of carousel banners below the drop-down box. Select one and simply drag and drop it below the search bar in the home screen layout.

To add images to the carousel banner, hover the mouse pointer over the dropped widget. Spot the "Add/Edit Content" option just next to the widget on your right. Click on it to open an "Add Carousel Banner" popup. Select the collection category from the drop-down collection list. Click on the upload icon to display the images in that category. Select any image from that category and click on "Add" to add it to the banner. Keep repeating the process and save when finally done.

To edit the style of the banner, hover over the dropped banner widget on the home screen. Now, you'll notice the "Edit Style" option below "Add/Edit Content". Click on it to open the "Edit Style" popup. Adjust the banner box radius and padding. Select any variant for your banner indicator. You can also select any background color or image for the banner box. When done, save the changes and update them to the app's layout.

Here's a preview of the Jumia app with the carousel banner on the home screen. Notice the round indicator below the banner. We added it when we were editing the banner style in the "Edit Style" option.

Let's now add a square collection slider. Select "Collection Slider" from the drop-down menu. Select the square collection slider with title and radius from the various slider styles. Drag and drop it inside the home screen below the carousel banner.

Hover the mouse pointer over the dropped collection slider widget. Spot the "Add/Edit Content" option. Click on it to open the "Collection Slider" popup. Click on the collection drop-down list here and select items to add to the slider. Save when done.

To edit the slider style, hover again over the widget, and this time, spot the "Edit Style" option. An "Edit Style" popup screen opens. Adjust the slider container radius and padding. Adjust the image position inside the slider container. There are other options to customize the look of the slider. Save the changes and update them to the layout.

The Jumia app with the carousel banner and the collection slider now looks like this.

Now, let's add products to the home screen. Select "Product Slider" from the drop-down widget list. Select any style from the displayed variants below the drop-down box. Place it inside the home screen.

To add products, click on "Add/Edit Content". Add images from the product drop-down list in the "Product Slider" popup screen. Here, we have named the slider "Top Selling Items". Give an attractive name to the product slider to keep your customers engaged inside the app. Save the changes made to the product slider after adding the product images.

To edit the slider style, click on "Edit Style". On the popup, make changes to the container radius and padding. Here, we have disabled the visibility of add-to-cart and favorite buttons. Save the changes and update it.

Here's the Jumia app preview with the product slider below the collection slider.

Continue to add product sliders with attractive titles.

Next, we'll add a collection grid to the app. Select "Collection Grid" from the drop-down menu. Drag and drop the grid pattern you like into the home screen layout. Here, we have selected a square 4x4 collection grid.

Click on "Add/Edit Content". Add images from your collection list. Save and update.

Click on "Edit Style" to customize the collection grid style. Save and update.

Observe the collection grid added to the home screen layout. And look, we have added an attractive title to the collection grid.

Continue to add product slider or grid, carousel banner, and collection grid to the app. Here's a final look at our Jumia app.