September 14, 2022

How to create an app like AliExpress

AliExpress is Alibaba’s e-commerce platform created for the cross-border export of products. Said to be Amazon’s rival, it has over 150 million active buyers and 200 million visits. It caters to users from over 230 countries. Today, let’s try to create an app like AliExpress without coding.

To help us in this task, we’ll use the best no-code app builder Swipecart. It uses a drag-and-drop editing tool with a simple visual interface. Let’s try and see if we can build the same copy of the popular e-commerce app AliExpress.

How to create an app like AliExpress:

Install Swipecart from the Shopify app store or the WordPress plugin store.

Note: As of now, Swipecart works only if you have your e-commerce store on WordPress or Shopify. We are working to make it available on other e-commerce store building platforms too.

  • 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.

    Create An App Like AliExpress
  • Click on the "Create Layout" icon to create a new layout.

    Create An App Like AliExpress
  • It'll open a popup where you have to enter the layout name.

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

    Create An App Like AliExpress
  • 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.

    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.

    Create An App Like AliExpress
  • 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.

    Create An App Like AliExpress
  • 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.

    Create An App Like AliExpress
  • The app with the app bar, bottom bar, and the changed theme style now looks as in the screenshot below.

    Create An App Like AliExpress
  • 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.

    Create An App Like AliExpress
  • The completed AliExpress app home screen with the search bar now looks like this.

    Create An App Like AliExpress
  • 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.

    Create An App Like AliExpress
  • 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.

    Create An App Like AliExpress
  • The app with the collection slider now looks as in the screenshot below.

    Create An App Like AliExpress
  • 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.

    Create An App Like AliExpress
  • 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.

    Create An App Like AliExpress
  • The AliExpress app with the banner grid now looks as in the image below.

    Create An App Like AliExpress
  • 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.

    Create An App Like AliExpress
  • 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.

    Create An App Like AliExpress
  • 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.

    Create An App Like AliExpress
  • 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.

    Create An App Like AliExpress
  • 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.

    Create An App Like AliExpress
  • 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.

    Create An App Like AliExpress
  • Here's a look at the app with the product grid. The product title and price are visible on it.

    Create An App Like AliExpress
  • 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.

With Swipecart, it's super-easy to create apps for your e-commerce store. To get you acquainted with Swipecart, we have created a beginner's tutorial. Watch this to see how simple it is to build apps without coding.

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

Invest in 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?