How to create an app like Mi Store

Let’s start building an app like Mi Store by creating a layout for it. Click on "Layouts" on the left menu.

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

Clicking on “Create Layout” will open a popup.

Let's name the layout "Mi Stores". Click on "Create Layout".

Choose a "Blank Layout". There are various ready-to-use default layout themes. But we have to create an app like Mi Store. So, choosing a blank layout is a better option. Select "Blank Layout" and click on "Create Layout". Swipecart will now create a blank "Mi Store" layout for your app.

You’ll be taken to the Mi Store layout 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.

In the "Theme Settings", click on "App Bar Settings" on the left menu.

Let's start customizing the app bar. 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 our Mi Store app, we have enabled the "Search" and "Cart View" features on the app bar. Upload the logo image or title text. Align its position on the app bar. Here, for the Mi Store, we don't upload any branding elements. Save the changes once you have completed customizing your app bar.

Next, customize the look of the side menu, bottom bar, user profile page, and input (welcome/sign-in page). It is simple. You go to these tabs by clicking on them on the left menu. Each of the above features has different style options. Select an option from among the variants 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 Xiaomi brand loader GIF and when you are done with customizing the theme, save and update.

This is the mobile preview of the Mi Store with the app bar and bottom bar.

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

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

For its users, Swipecart has pre-coded all UI elements and turned them into visual widgets to easily add content. Access these widgets from a drop-down menu located next to the app's home screen layout. We'll show you how to use these widgets with a drag-and-drop editing tool to add content to the Mi Store app's home screen.

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. We have selected a carousel banner with an aspect ratio of 1.5:1. We drag and drop this widget inside the home screen layout.

Let's now include images in the banner. Hover your mouse pointer over the dropped carousel banner widget. You'll spot an "Add/Edit Content" option adjacent to the home screen layout to your right. Click on it. An "Add Carousel Banner" popup will appear. Add a title to the banner. Now, click on the drop-down list in the collection tab. Select any category to internally link the banner image with it. Click on the upload icon. Open a banner image from your local system for that collection category. Click on "Add". That's it. When a user clicks on the banner, they are taken to that collection category. Repeat the same process to add images to the banners and link them to specific collection categories. Save when done.

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.

Here's the mobile preview of the Mi Store with the added carousel banner to the home screen.

Let's now add a collection slider to the Mi Store home screen. Select "Collection Slider" from the drop-down widget list. We have opted for a square collection slider with title and radius. Place it on the home screen below the carousel banner.

To add collection category images, click on "Add/Edit Content". Click on the "Select Collection" drop-down icon. Select the collection category you want to add to the slider. Click on "Add". Repeat the process until you have added collection category images to the slider. Save when you have completed the task.

To edit the style of the slider, click on "Edit Style". On the popup screen, make changes to customize the look of the slider. Save and exit.

See how the collection slider looks on the Mi Store app.

We'll add a single banner to the app's home screen. Select "Single Banner" from the drop-down list. We have selected a 2.7:1 aspect ratio single banner. Drag and drop it into the home screen.

To add an image to the single banner, click on "Add/Edit Content". Uncheck the "Internal Linking" option when you don't want to link it to any product or collection page. Upload an image for the banner from your local system. Ensure the banner image size meets the aspect specifications of your widget. Save and exit.

To customize the look of the banner, click on the "Edit Style" option. Make changes to the style format and save.

Click here to know more about the "Edit Style" option for your widgets.

Here is the mobile preview of the single banner added to the home screen.

We repeat the same process and add keep adding attractive single banners to the app's home screen.

Next, let's add a product slider to the Mi Store's app home screen. Select "Product Slider" from the drop-down box. A range of different styles of product slider widgets is displayed below the drop-down box. We have selected one and placed it on the home screen.

To add contents to the product slider, we hover the mouse pointer over the dropped product widget. On sighting the "Add/Edit Content" option, we click on it to open a Product Slider popup.

The next step is to add product images to the product slider widget. To do this, click on the drop-down list in the product tab and click on the products you want to add to the widget. The product list is dynamically fetched from your e-commerce website. Click on the "Add" button. Now, you have successfully added a product image to the product slider widget. Repeat this process until you have added relevant products to the slider. Click on "Save".

Swipecart gives you the option to set the styling for the product slider. Hover over the widget and click on "Edit Style". In the popup, edit some styling parameters like radius, padding, image position in the container, title alignment, visibility of cart and favorite icons, visibility of product title, price, and additional products button. Here, we have disabled the visibility of favorite and add-to-cart icons. Save when done.

Here's how the Mi Store app home screen looks after adding the product slider.

We keep adding widgets such as product sliders, carousels, banners, and grids to the home screen. This is the preview of the app after adding these widgets.

Above, we displayed products in a slider format. Now, we'll arrange them in a grid format. Select "Product Grid" from the drop-down widget library. Select any product grid widget style from the variants. Drag and drop it into the home screen.

To add products, hover over the widget and click on "Add/Edit Content". On the Product Grid popup, keep adding relevant products from the product tab drop-down list.

To modify the product grid style, hover over the widget and click on "Edit Style". Modify the styling parameters. Save the changes. Update them to the app.

So, here's the mobile preview of the added product grid.

Repeat the same process and keep adding single banners, carousel banners, product sliders, and grids. Here's a final look at the Mi Store app.