September 13, 2022

How to create an app like Shopee

Shopee is a top e-commerce site in Southeast Asia. Starting as a consumer-to-consumer (C2C) platform, it has now diversified into the B2C and B2B hybrid models. Its online website and app get nearly 343 million monthly visitors and it also serves some countries in Latin America and Europe. Shopee’s app has recorded more than 200 million downloads.

What makes Shopee’s mobile app the best in class? In addition to attracting customers with flash sales and hot deals, it has advanced features such as a seller wallet, inventory and income management, logistic database, and spam listing in its app. Today, let’s try to recreate a mobile app like Shopee using Swipecart, a powerful no-code app builder.

We have selected Swipecart because its drag-and-drop editing tool makes app designing easy and fast. It has advanced features to help us create a ready-to-market app. Let’s go ahead and start by creating an app like Shopee now.

How to create an app like Shopee:

Swipecart is available as a plugin on WordPress and as an app on Shopify. If you have an e-commerce store on these two website-building platforms, it is easy for you to use your store as a reference to create a mobile app.

  • Sign up for Swipecart and enter its dashboard. On the left menu, click on "Layouts".

    create an app like Myntra
  • The first step is to create a new app layout. For this, click on the “Create Layout” button.

    create an app like Myntra
  • Clicking on “Create Layout” will open a popup. It's time to give a name for your layout.

    create an app like Myntra
  • Enter the layout name as "Shopee" and click on the "Create" button.

    create an app like Myntra
  • You have to select from two options. You can go with any of the default layouts displayed. You also have the option to create an app from a blank or empty layout. Let's select "Blank Layout".

    create an app like Myntra
  • You are now taken to your Shopee layout dashboard with "Theme Settings" as your default tab and "App Bar Settings" as the sub-tab. Swipecart allows you to customize theme settings. Let's start by customizing the app bar first.

    create an app like Myntra
  • Change the app bar color, font color, bottom radius, and elevation. You can choose to display or hide the notification, search, favorite, and cart icon on the app bar. Upload the logo from here. Once you modify it, make sure you save the changes by clicking on the "Save" button.

    create an app like Myntra
  • Next, click on the "Theme Style Settings" on the left menu. This is where you change the font style, scale, and color for the theme and also the app's primary and background color. Swipecart also provides you with an option to upload your brand loader GIF.

  • Note: Ensure that the loader GIF specifications match those mentioned on the layout screen.

    create an app like Myntra
  • Since we are trying to replicate the Shopee app, we change the font style, its color, and the app color to match the original. Save the changes and update the app layout.

    create an app like Myntra
  • Similarly, go through the options to customize your app's bottom bar, input style, side menu, and profile page. The Shopee-like app with the completed app bar and bottom bar looks like the image below.

    create an app like Myntra
  • Now that we are done with the theme settings, let's start populating the home screen with banners and product grids. Click on the "Home" tab next to "Theme Settings". Your app's home screen layout is displayed in the middle with the customized app bar and bottom menu.

    create an app like Myntra
  • Notice a drop-down box at the top-right of your empty home screen layout. Click on the drop-down list and select "Search" from it. A search bar is displayed just below the drop-down box. Drag and drop this search widget onto your home screen layout.

  • Swipecart gives you the option to stylize the search bar. Hover the mouse pointer over the dropped search widget until you see the "Edit Style" option. Click on it to open a popup. Here, you get options to change the style of the search bar. Save the changes after editing.

    create an app like Myntra
  • After completing the changes, your Shopee app's home screen with the search bar looks like this.

    create an app like Myntra
  • Next, let's add a carousel banner to the app’s home screen. Search and click on the "Carousel Banner" option from the drop-down list. Immediately, different styles of carousel banner UI components are displayed below the drop-down box. Select one from among the various styles and position it below the search bar on the home screen layout.

    create an app like Myntra
  • Hover the mouse pointer over the dropped empty carousel banner widget. Spot the "Add/Edit Content" option and click on it. A popup opens allowing you to upload images to the carousel banner. Start uploading images from the product or collection list. You can opt to internally link the image with that specific product or collection page. Save the changes.

  • To customize the style of the carousel banner, hover the mouse pointer again over the dropped widget. This time, click on the "Edit Style" option. In the popup screen, you've options to format the look of the banner such as background color/image, padding, and other details. Save the changes and update the app's layout.

    Want to know more about how to edit a widget? Click here.

    create an app like Myntra
  • Here's the look of your Shopee app with the app bar, bottom bar, search bar, and carousel banner. Notice the indicator below the banner. These dots indicate the banner count. Users can click on these dots to view different banner images. You can enable/disable the indicator in the "Edit Style" option.

    create an app like Myntra
  • Next, we add a collection slider below the carousel banner. Select "Collection Slider" from the drop-down list. For this Shopee app, we select the square collection slider style widget and drop it on the home screen below the carousel banner.

    create an app like Myntra
  • Hover over the dropped empty widget and click on the "Add/Edit Content" option. Start adding products to the square collection slider from the collection list. Again to make changes in the slider style, hover over the widget and click on the "Edit Style" option. Save the changes and update the app layout.

    create an app like Myntra
  • The collection slider is used here to display various offers to app users and take them to the relevant offer page.

    create an app like Myntra
  • Below the collection slider, let's add a single banner. Select "Single Banner" from the drop-down list. Choose a single banner widget from among the various styles displayed below the drop-down box. Drag and drop this widget onto the home screen.

    create an app like Myntra
  • Hover the mouse pointer over the widget and click on the "Add/Edit Content" option. Upload an image. Make sure the image size matches the aspect ratio mentioned on the empty widget.

  • Let's add a background image to the single banner. To do this, hover over the widget and click on the "Edit Style" option. Add a background image and adjust the container radius and padding. Save the changes made and update the home screen layout.

    create an app like Myntra
  • The single banner with the background image now looks as in the image below.

    create an app like Myntra
  • Let's add a square collection slider to display gifts or coupon codes. Select "Collection Slider" from the drop-down menu. Drag and drop the square collection slider widget onto the home screen.

    create an app like Myntra
  • Name the collection slider as "CLAIM YOUR FREE GIFT". Add coupon code images to the collection slider. Customize the theme to match the square collection slider. Here, we have added a background image to it and adjusted the padding. Save the changes.

    create an app like Myntra
  • The app now looks like this. The background image of the previously added single banner and the recently added collection slider look merged to sync with the branding.

    create an app like Myntra
  • Repeat adding the square collection slider by following the same steps mentioned above.

    create an app like Myntra
  • Add products and customize the theme to the square collection slider. This time we have named the widget "RECOMMENDED FOR YOU". Swipecart offers an AI-based product recommendation feature. You can integrate this feature into this collection slider. The slider gets populated with images based on user interests, previously browsed products, and other parameters in real-time.

    create an app like Myntra
  • This is how your Shopee-app with the collection slider looks now.

    create an app like Myntra
  • Let's start adding interesting offers on products to the home screen. To achieve it, select "Product Grid" from the drop-down list. Various product grid widget styles are displayed next to the home screen. Drag and drop a widget of your choice to the home screen.

    create an app like Myntra
  • Hover the mouse pointer over the widget and click on the "Add/Edit Content" option. Start adding products from your product list to the widget.

    create an app like Myntra
  • Let's make some changes to its format. Hover over the widget and click on "Edit Style". Adjust the container padding, radius, and other details. Enable/disable product title, price, favorite, and cart icon. Here, we have disabled the cart and favorite icon. Save the changes and update the app's home screen layout thereafter.

    create an app like Myntra
  • Your Shopee app looks as in the image below. You can add an attractive title to the product list.

    create an app like Myntra
  • Similarly, keep adding banners, collection sliders, and product grids to the home screen. Make the app appealing to your customer. The final look of your Shopee app is complete.

You can create an app like Shopee without writing a single line of code using Swipecart. This no-code mobile app builder has a user-friendly interface. All the codes are converted into visual components for easy drag and drop activity. You can create any complex e-commerce app using Swipecart in minutes and submit it for review to the App Store/Play Store.

If you want to know more about Swipecart, watch this beginner's guide:

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?

For resources on how to use Swipecart and other details, click here.

Now that we have completed creating an app like Shopee, which app do you want us to design next?