September 14, 2022

How to create an app like Wallapop

Wallapop is a platform for buying and selling second-hand goods. Founded in Barcelona, Spain, this e-commerce platform helps you find second-hand products in your neighborhood. It operates in Spain, Italy, France, and the UK. It is a hyper-local marketplace primarily accessible through a mobile app. It connects 15 million users and has around 180 million items listed in its app.

How to create an app like Wallapop:

The Wallapop app’s concept is similar to eBay. Let’s create an app like Wallapop using an advanced no-code app builder Swipecart. It has a simple visual interface and uses a drag-and-drop editing tool to keep adding UI components from a picklist. to your dashboard after the onboarding process.

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

    create an app like wallapop
  • In the "Layouts" tab, click on "Create Layout" to begin the app design.

    create an app like wallapop
  • Clicking on “Create Layout” will open a popup. Give a name for the layout.

    create an app like wallapop
  • Let's name it Wallapop. Now, click on the "Create" button.

    create an app like wallapop
  • 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.

    create an app like wallapop
  • 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.

    create an app like wallapop
  • 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.

    create an app like wallapop
  • 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.

    create an app like wallapop
  • 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.

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

    create an app like wallapop
  • 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.

    create an app like wallapop
  • 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.

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

    create an app like wallapop
  • 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.

    create an app like wallapop
  • 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.

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

    create an app like wallapop
  • 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.

    create an app like wallapop
  • 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.

    create an app like wallapop
  • 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.

    create an app like wallapop
  • Here's the app with the added products in the product grid.

    create an app like wallapop
  • 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.

That completes our tutorial on how to create an app like Wallapop. If you know how Swipecart works, it'll take you barely five minutes to complete building the app. Keep all the product details and images ready and you're done designing your app.

In the meanwhile, have a look at this beginner tutorial for more clarity on building apps with Swipecart.

To know more about how to create apps with Swipecart, watch this video.

Swipecart, the best no-code app builder is your go-to solution to create apps easily and fast. So, when are you planning to build an app for your e-commerce store with Swipecart?

Swipecart is available on the Shopify app store. It's also available as a WordPress plugin for your WooCommerce store. Are you considering building an app for your e-commerce store? Try Swipecart now.