October 07, 2022

How to create an app like ASOS

When it comes to apparel and accessories, there is intense competition to get the customer’s attention. In such competitive niches, the customer is king- he has so many options to choose from. To stand out from the crowd, you’ve got to experiment or do something that attracts users to you. British lifestyle retailer ASOS has done so and has successfully expanded across geographies.

This does not mean you can’t compete with the likes of ASOS. If you’ve got the products that customers love and you market them the right way, nothing can stop you from becoming the market leader. Even today, you can create a mobile app with our no-code app builder Swipecart and compete with the likes of ASOS or Amazon. In this tutorial, we’ll recreate the ASOS app to demonstrate how easy it is to create a mobile app yourself.

Watch this video tutorial to know about creating an app for your e-commerce store:

With the help of drag-and-drop app builder Swipecart, you can create an e-commerce app that can rival the likes of ASOS or Amazon.

Steps to create an app like ASOS

For this, Swipecart requires you to have an existing Shopify website or WordPress website. To start, install Swipecart from the Shopify app store and WordPress plugincenter.

  • After installing, activate Swipecart and sign up.

  • When you come to the Swipecart dashboard, click on the ‘Layout’ tab on the left menu.  

    Create An App Like ASOS
  • As we’re creating a new app from scratch, click on the ‘Create Layout’ option.

    Create An App Like ASOS
  • A popup would appear to name the app, let’s name the app ‘ASOS’.

    Create An App Like ASOS
  • Now, you’ll be asked to choose a layout. Swipecart allows you to select from pre-made layouts or to make one from scratch. As we’re making a new app, click on ‘Blank Layout’.

    Create An App Like ASOS
  • You’ll be taken to the ASOS layout dashboard. Here, we start creating the app by adjusting the app’s theme in Theme Settings.

Theme Settings

  • Here, you can customize the look and feel of your app.

    Create An App Like ASOS
  • App bar settings - Here, you can manage which feature is added to the app bar along with another branding that remains constant wherever you are on the app. click here to know more about App Bar Settings. 

    Create An App Like ASOS
  • Besides this, you can choose from pre-made templates for the side menu, bottom bar, profile page, and input style.

  • Theme style settings- Here, you can manage and edit the app loader icon, fonts, and colors for the entire app. To understand how you could make these changes, click here.

    Create An App Like ASOS

    Check out this preview with the completed theme settings.

    Create An App Like ASOS

Designing the home page

  • Once you are satisfied and done with the theme settings, you can start designing your app with the help of drag-and-drop widgets on your home page.

  • Here, we’ll show you how to create pages and add elements to the app to make an app similar to ASOS.

    Create An App Like ASOS
  • Adding pages to the app- On the ASOS dashboard, go to the ‘Home’ tab. Here, click on the ‘Add page’ option on the left.  Name the page in the popup that appears. Click ‘Submit’ when done. If you need more information about adding pages, Click here.
  • For this app, we’ll create 3 pages besides the home page - Category, New In, and For You.

    Create An App Like ASOS
  • Single Banner- With this, you can attract your user’s attention towards a single item- this could be a collection, a product, or anything else.

  • Just select ‘Single banner’ from the widget library drop-down and choose a banner style that matches your requirements. Drop it to the draft app home page. For more information, click here.

    Create An App Like ASOS
  • You can then choose to add the product, collection or page images, or link via the ‘Add/Edit Content’ option. click here to know more about it.

  • Once done, customize your banner design and formatting with the ‘Edit Style‘ option later. click here to know more about how to style widgets.

    Create An App Like ASOS

    This is how the completed banner would look like

    Create An App Like ASOS
  • Let’s add another banner to the app layout

    Create An App Like ASOS
  • Product Grid- If you want to showcase some products, this widget is ideal for you. Select a product grid from the widget library drop-down and choose a product grid style that matches your requirements.

  • Drag and drop it on your draft home page layout. For more information, please click here.

    Create An App Like ASOS
  • As always, use the Add/Edit Content option to add products to the grid. When done, customize the widget format with the ‘Edit Style’ option.

    Create An App Like ASOS

    This is how your app would look like.

    Create An App Like ASOS
  • Besides this, you could add other widgets like Banner Grid, Banner Slider, Carousel Banners, Collection Grid, Collection Slider, Product List, Product Slider, Search and Timer.

    Here is how the completed ASOS app would look like.

Don’t you think this was easy? With Swipecart, you can create your mobile app yourself without the need to write any code or hire anyone to do so. You can create an app yourself and maintain it with a nominal subscription fee. Do Contact us if you need any kind of help.