How to create an app like AliExpress

You sign up for Swipecart and activate it. You'll be taken to the dashboard. Let's begin by creating a layout for the app.

Click on "Layouts" on the left menu.

Click on the "Create Layout" icon to create a new layout.

It'll open a popup where you have to enter the layout name.

Let's name the layout AliExpress and click on "Create" to proceed further.

You can either choose one from the ready themes or create from a blank layout. Let's choose "Blank Layout" to create an app like AliExpress.

You’ll be taken to your layout dashboard with the default tab as “Theme Settings”. The primary function of “Theme Settings” is to customize the app's look and feel. It has multiple options to set branding elements for your app's theme.

Stay in the "Theme Settings" tab and click on "App Bar Settings" in the layout's left menu. In this section, you change the app bar's font color, app bar color, bottom radius, and elevation. You have the option to make the favorite, notification, search, and cart icons visible on the app bar. Here, we have disabled all of these. Next, we upload the logo image or text. We have uploaded the AliExpress logo here.

Align the logo and save the changes when done.

Note: Ensure the uploaded logo size matches the given specifications.

Swipecart offers you variants to select from in the side menu, bottom bar, input style, and profile page. Select the style you want and keep saving the changes. Now, we go to "Theme Style Settings" in the "Theme Settings" tab.

Here, edit the font style, font scale, and font color. Also, change the app's primary and background color to match that of the AliExpress app. Upload the loader GIF from this section.

The app with the app bar, bottom bar, and the changed theme style now looks as in the screenshot below.

Now that we are done with the theme styling, let's start filling content inside the app's home screen. Click on the "Home" tab in the top menu. You'll get an empty home screen layout with just the app bar and bottom bar. Now, let's fill the home screen with products and collection links in the form of banners, sliders, and grids.

Let's first insert a search bar on the home screen. To do this, go to the drop-down box located to your top right just next to the home screen layout. Click on the drop-down icon to access a widget library list. From this, click on the "Search" option. A search bar widget is displayed below the drop-down box. Drag and drop this on the home screen layout.

Let's edit the style of the search bar such as radius and padding. Hover your mouse pointer over the dropped search bar. Spot the "Edit Style" option that appears on the right side. Click on it to open the Edit Style popup screen. Now, here, you have the option to enable/disable the visibility of search and voice search (mic) icons. We have enabled the mic icon to be visible on the search bar. Once done, save the changes. Click on “Update” to save your changes.

The completed AliExpress app home screen with the search bar now looks like this.

Now, let's display a collection slider just below the search bar. For this, go to the drop-down list again. This time, select the "Collection Slider" option. A variety of different styles of collection grids is displayed just below the drop-down box. We have selected a round collection slider. Drag and drop this collection slider widget into the home screen below the search bar.

To add collection images, hover the mouse pointer over the added collection widget. Spot the option "Add/Edit Content" to the top right, next to the widget. Click on it to open a Collection Slider popup screen. Give a name to your collection slider. This will be displayed on the home screen just above the slider.

Next, click on the upload icon. Select the collection you want and keep adding images from it. Since it is a slider, the collection keeps rotating to show images to the customers. Save the changes when done.

The app with the collection slider now looks as in the screenshot below.

Swipecart allows you to add banners in a grid format. Select "Banner Grid" from the drop-down list. Select a banner style from among the various options. Drag and drop it below the collection slider.

To add images to the banner, hover the mouse pointer over the dropped widget until you spot the "Add/Edit Content" option. Click on it to open a popup. We have given the title "Flash Deals". Now, click on the Upload icon and start uploading images for it from your product list, collection list, or e-commerce store page. Click on "Add" after selecting an image. Repeat this process till you are done. Save the changes by clicking on "Save Banner".

To edit the banner style, hover again over the widget and click on the "Edit Style" option. You can add background color or image and make some alterations to the banner container. Again, save the changes and update the layout.

The AliExpress app with the banner grid now looks as in the image below.

Let's add one more banner grid to the home screen of the app. This time, we name it "Top Ranking". Repeat the process as mentioned above for selecting the widget and placing it on the home screen. Add images to the banner and edit its style. Save the changes.

click here to know about the various widgets available on Swipecart.

Next, it's time to add a collection grid to the home screen. Select "Collection Grid" from the drop-down menu. The different style formats are displayed just below the drop-down box. We have selected "Square Collection Grid (4*4)" and placed it right below the banner grid.

To add content to the collection grid, hover over the widget and click on the "Add/Edit Content" option. We have given the title "Featured Categories". Click on the upload icon and start adding images one-by-one to the collection grid. Save when done.

As is the case with all widgets, clicking on "Edit Style" gives you the option to customize the appearance of the collection grid. The app with the collection grid looks as in the screenshot below.

Now that we are done with the collection grid, let's add a product grid to our app's home screen. Select "Product Grid" from the drop-down list. Various options for the product grid are displayed below the drop-down box. Select one, drag it, and drop it inside the home screen layout.

Let's start adding products to the grid. Hover the mouse over the product grid widget. Click on "Add/Edit Content". Give a heading to the product grid. Click on the upload icon to start adding products. Add and save when done.

Again, hover over the widget to edit its style. Click on "Edit Style". We have disabled the visibility of add to cart and favorite icon. You can change any other parameter necessary to your app's design. Save the changes.

Here's a look at the app with the product grid. The product title and price are visible on it.

Have a look at the home screen of the AliExpress app to see how they have placed various widgets in the layout. Keep adding widgets from the widget library until your app resembles that of AliExpress.

Here's the final look of the AliExpress-like app we have created using the drag-and-drop app builder Swipecart.