How to create an app like Wildberries

In the dashboard, click on "Layouts" in the left menu.

Let's create a new layout to design our app. Click on the “Create Layout” icon to create a new layout.

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

We'll name the layout "Wildberries". Type the name and click on "Create".

Further, you are given two options. One is to select a layout from readymade default themes. The other is to design the app on a blank layout. Since we have decided to create an app like Wildberries, we choose "Blank Layout". Now, click on "Create Layout".

Your Wildberries blank layout is created and you are taken to its dashboard with the default tab as “Theme Settings”. The primary function of “Theme Settings” is to customize the app's look. It has multiple options to set branding elements for your app.

Let's start by customizing the app bar. For this, click on "App Bar Settings" in your layout's left menu. Here, change the app bar color, font color, bottom radius, and elevation. Enable/disable the visibility of the cart, favorite, notification, and search icons on the app bar. For the Wildberries app, we have enabled the search icon to be visible on the app bar. Upload the logo image or title text. Align its position on the app bar. Save the changes once you are done customizing your app bar.

Note: The app bar logo size should meet the given requirements.

Next, customize the look of the side menu, bottom bar, user profile page, and input (welcome/sign-in page). It is simple. You must select an option from different styles and update it to the app.

Finally, we come to "Theme Style Settings" in the left menu. Here, we can edit some of the theme settings such as font style, scale, and color. You can even set the app's primary color and background color from the color picker. Upload the loader GIF and when you are done with customizing the theme, save and update.

Here is the mobile preview of your Wildberries app layout with the app bar and bottom bar.

The next task is to customize the home screen of the app. Click on the “Home” tab next to "Theme Settings" and we are ready to customize the home screen of our Wildberries app.

When you click on the "Home" tab, an empty home screen of your app is displayed with the app bar and bottom bar. Let's start adding content inside the home screen.

To add content, Swipecart has pre-coded all UI elements and converted them into visual widgets. You access these widgets from a drop-down list right next to the app's home screen layout. We'll teach you how to start populating your app's home screen with content using these widgets and a drop-and-drag editing tool.

Locate a drop-down box at the top-right next to the home screen layout. Click on the drop-down icon and all the widgets are displayed in a list format. Let's start by adding a carousel banner to the home screen. Select "Carousel Banner" from the list. Different styles of carousel banners are displayed below the drop-down box.

Select one from among the variants. Drag and drop it into the home screen.

Now, let's add images to the banner. Hover the mouse pointer over the dropped carousel banner widget. Spot the "Add/Edit Content" option on your top right next to the app's home screen. Click on it to open an "Add Carousel Banner" popup screen. Add a title to the banner. Click on any product from the product list to internally link the banner image with the product. Now, click on the upload icon to upload the banner image from your system. Click on "Add". It's done. When a user clicks on the banner image, they are taken to the product page linked to the banner. Repeat the process to add different banners. Click on "Save" when done. Click on "Update" to update the changes to the app.

To customize the look of the banner, hover the mouse pointer over the carousel banner widget on the home screen. This time, spot the "Edit Style" option just below "Add/Edit Content". Click on it to open the "Edit Style" popup. Here, customize the banner padding, radius, and other features. You can adjust the position of images inside the banner container. You can add a background or image for the container. Save the changes and update. For sliders, you have indicator variants. Select any; for this, we have selected the round indicator.

This is the mobile preview of the home screen now with the added carousel banner. Clicking on any banner will take the user to the linked product page.

Next, we add a banner grid to the layout. Select "Banner Grid" from the drop-down widget list. From the variants, we have opted for a "square banner with radius" style. Drag and drop this into the home screen below the carousel banner.

Again, hover over the dropped banner grid widget and click on "Add/Edit Content". On the popup, click on the product from the drop-down list. Click on the upload icon to add a banner and link it to the selected product. Click on "Add" to add the image to the banner grid. Repeat the process to add images to the banner. Save after you complete the task.

Open "Edit Style" to customize the look of the banner grid. Here, adjust the container radius, padding, and other style formats such as image orientation, background, and font color for the title. Adjust the parameters and save when done.

Click here for a detailed tutorial on the "Edit Style" option for the widgets.

Here's the image of the Wildberries app with the banner grid.

Next, we'll add a product grid to the app's home screen. Select "Product Grid" from the drop-down list. There are about ten different product grid styles displayed below the drop-down box. Select one and drop it inside the home screen layout.

Let's start adding products to the product grid. Click on "Add/Edit Content". Give an attractive title to the product grid such as "Bestsellers", "Recommended For You", "Suggested Products", "Trending Products", and so on. Click on the drop-down list in the products tab. Select the product you want to be displayed on the grid. Click on "Add". Save when done.

Click here for a detailed tutorial on how to add content to the widgets.

Click on "Edit Style" to customize the look of the product grid. Adjust the parameters such as radius, padding, and container padding. Adjust the image orientation inside the grid. You can enable/disable the visibility of product title and price, and favorite and cart icons. We have disabled the Additional Products Button. This means the users will not see the "See More" message at the top right corner of the product grid. Save the changes when done.

So, here is the mobile preview of the Wildberries app we have created until now with the product grid added to it.

Similarly, we continue to add product grids, banner grids, and carousel banners to complete the app design.

Click here, to study various widgets and how to design an app with Swipecart.

So, here's the final look at the Wildberries app we have built using Swipecart.