How to create an app like Wallapop

In your dashboard, click on "Layouts" on the left menu.

In the "Layouts" tab, click on "Create Layout" to begin the app design.

Clicking on “Create Layout” will open a popup. Give a name for the layout.

Let's name it Wallapop. Now, click on the "Create" button.

You can choose either a ready template for your app layout or an empty layout. To create an app like Wallapop, we choose a blank layout. Click on the "Blank Layout" icon.

You’ll be taken to your Wallapop 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 layout's left menu.

Let's start customizing the app bar for our Wallapop app. Swipecart allows you to change the app bar color, font color, bottom radius, and elevation settings for your app bar. You can make the notification, search, cart, and favorite icons visible on the app bar by enabling the toggle button. Next, upload your branding element in the form of a logo image or title. Align its position on the app bar. Finally, save the changes.

Note: The specification for the logo image is already mentioned. Please ensure you follow it.

Let's start by customizing the app bar. For this, click on "App Bar Settings" in your layout's left menu. Here, change 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. For the Wildberries app, we have enabled the search icon to be visible on the app bar. Upload the logo image or title text. Align its position on the app bar. Save the changes once you are done customizing your app bar.

Note: The app bar logo size should meet the given requirements.

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.

Lastly, let's done some styling for the app's theme. To do this, click on "Theme Style Settings" on the layout's left menu while staying in the "Theme Settings" tab.

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. Again, ensure the loader GIF meets the mentioned requirements. Save the changes.

The app's layout with the edited app bar and bottom bar looks like the image below.

Now, let's start to add content to the app's home screen. 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's here we start to populate the home screen with content.

With Swipecart, all the contents are converted into visual UI components called widgets. These are accessible through a drop-down list placed right next to your app's screen layout. Click on the drop-down icon and you'll see a list of widgets. Click on the "Search" widget. A search bar is displayed below the drop-down box. Drag and drop it into the home screen.

Swipecart provides you with options to customize the search bar. Hover the mouse pointer over the search bar widget on the home screen. Now, spot the "Edit Style" option right next to the widget. Click on it.

An "Edit Style" popup opens. 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.

The Wallapop app's home screen with the search bar now looks like the image below.

Let's add collection categories on the home screen. Select "Collection Slider" from the drop-down list. Various styled collection sliders are displayed below the drop-down box. We have selected a round collection slider and placed it below the search bar on the home screen.

To start adding categories inside the collection slider, 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 a Collection Slider popup. Give a name to the slider. Select images from the drop-down collection list. Click on "Add" to add the image. Keep adding and save when finally done.

So, here's the Wallapop app with the search bar and a category collection slider added to the home screen.

Next, let's start adding products to the home screen. Select "Product Grid" from the drop-down list. Select one style among the options. Drag and drop it onto the layout below the category collection slider.

Let's add product images to the grid. Hover the mouse pointer over the grid and click on "Add/Edit Content". A "Product Grid" popup will open. Give a title to the grid. Here, we have named it "Items Near You". Next, start uploading products to the grid. Click on "Save" when you have added all the products to the grid.

Next, let's customize the look of the product grid. Hover over the widget and click on "Edit Style". On the popup, you have options to edit the grid box radius and padding. You can also select the image position inside the box. Enable/disable the product title, cost, add to cart, and favorite icon inside the product grid. Also, you can enable/disable the additional products button. A "See More" clickable link will appear at the top of the product grid if you enable the "Additional Products Button". Save changes and update the app's layout.

Here's the app with the added products in the product grid.

The Wallapop app is simple and has products listed on it based on location and category. So, continue adding more products to your product grid.

Here, have a look at the final app we have created with Swipecart.