How to create an app like Shopee

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

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

Clicking on “Create Layout” will open a popup. It's time to give a name for your layout.

Enter the layout name as "Shopee" and click on the "Create" button.

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

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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

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.

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.

The single banner with the background image now looks as in the image below.

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.

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.

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.

Repeat adding the square collection slider by following the same steps mentioned above.

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.

This is how your Shopee-app with the collection slider looks now.

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.

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.

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.

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

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.