How to create an app like ASOS

After installing, activate Swipecart and sign up.

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

As we’re creating a new app from scratch, click on the ‘Create Layout’ option.

A popup would appear to name the app, let’s name the app ‘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’.

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

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

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.

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.

Check out this preview with the completed theme settings.

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.

For this app, we’ll create 3 pages besides the home page - Category, New In, and For You.

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.

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.

This is how the completed banner would look like

Let’s add another banner to the app layout

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.

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.

This is how your app would look like.

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.