November 16, 2022

How to create an app like Mini In The Box

Mini In The Box, is an e-commerce platform established in 2007 in Beijing, China. Owned by Light In The Box Holding Co Ltd, this platform sells lifestyle products to consumers in over 200 countries and territories. Its discounts and flash deals are popular as customers hunt for good deals online.

The greatest advantage of selling goods online is that you can sell them to customers globally. If you have an online store, convert it into a mobile app like Mini In The Box to get increased conversions. Building an app is easy if you use the no-code app builder Swipecart. You don’t have to hire an app development team or learn to code. It uses a graphical interface with a drag-and-drop editor. We have put together details in this tutorial to guide you.

Watch this video tutorial to know about creating an app for your e-commerce store:

An amazing app is guaranteed with the drag-and-drop app builder Swipecart. What are you waiting for? Create your app today.

Steps to create an app like Mini In The Box:

Creating an app layout on Swipecart

  • On the dashboard, click on "Layouts" in the left menu.

  • Click on "Create Layout" to create a new layout.

  • Clicking on “Create Layout” will open a popup. Name the layout "Miniinthebox". Click on "Create".

  • Now, you have to choose between pre-made layout templates and a blank layout. Since we need to design an app like Mini In The Box, we choose "Blank Layout". Click "Create Layout."

  • A blank layout with the name Miniinthebox is formed. For more details about creating layouts on Swipecart, click here.

Theme Settings on Swipecart

  • You'll be taken to the layout dashboard with the default tab as "Theme Settings" and the sub-tab as "App Bar Settings". Basically, the theme settings allow you to set the theme and customize it for your brand.

  • App Bar Settings: Set your branding element on the app bar or the action bar because it stays on the top throughout all pages of your app. Here, we upload the Mini In The Box logo to customize the app bar. For more details on app bar settings, click here.

  • We then go to Side Menu Settings, Bottom Bar Settings, Profile Page Settings, and Input Style Settings. Here, we select our choice from the style variants and save it to the app.

  • Theme Style Settings: In this section, we set the theme for the app. The changes made here are reflected throughout the app.

  • We can change some of the styling parameters for the app's theme such as app background color and font style & color. Click here to know more about theme style settings on Swipecart.

  • Here's the draft app with theme customizations completed to match the Mini In The Box app.


Designing the Mini In The Box app home screen

  • Next, we move on to designing the app's home screen. Click on the "Home" tab. A blank home screen is displayed with only the app bar and bottom bar.

  • We add content to the home screen by dragging and dropping style variants of widgets. These are accessible in the screen's drop-down box panel to your right.

  • Click here for more information about widgets on Swipecart.


Adding new pages to the app's home screen

  • This feature is to add new tabs or pages to the home screen or any other screens in the app. Click on "Add Page" on the left of your screen.

  • In the opened popup, type a new page name and click on "Submit". Repeat this to add more new pages.

  • For this Mini In The Box app, we create Cases & Covers, Screen Protectors, and Smartwatch Bands pages.

  • For more information on adding pages on Swipecart, click here.

  • Search Bar: Let's start designing the Home tab first. We start with the search bar. Select "Search" from the drop-down widget list. Drag and drop the search bar displayed below the box inside the home screen.

  • Hover over the search bar and click on the "Edit Style" option. In the popup that opens, customize the styling parameters for the search bar.

  • Click here for information on the search bar widget.

  • Have a look at the app's home screen with the search bar on it.

  • Banner Grid: We display the collection categories in a grid format at the top of the app.

  • Select "Banner Grid" from the widget list. Different styled widgets are displayed just below the drag-and-drop box. From among the different style variants offered by Swipecart, select one and drag and drop it to the home screen below the search bar.

  • Click here for details about banner grids on Swipecart.

  • To add content to the banner grid, hover over the widget and click on "Add/Edit Content". In the opened popup, add all relevant collection categories from the collection list to the grid.

  • Click here for details about adding and editing content on widgets.

  • To set the styling for the banner grid, hover again over it and click on "Edit Style". In the opened popup, set the styling parameters to suit the brand.

  • Click here for details on styling widgets.

  • Have a preview of the banner grid added to the home screen of the app.

  • Collection Slider: In this, the collection categories are displayed in a slider format.

  • Select "Collection Slider" from the widget list. From among the different style variants offered by Swipecart, select one and place it on the app's home screen.

  • Click here for detailed information on collection sliders.

  • Add a title and categories to the slider through the "Add/Edit Content" option. Set the styling elements for the slider through the "Edit Style" option.

  • Here's the mobile preview of the app with the collection slider.

  • Repeat adding more collection sliders to the app.

  • Product Grid: To display specific products on the home screen, select "Product Grid" from the widget list. Place one among the style variants inside the home screen.

  • Click here for information about product grids on Swipecart.

  • Add products to the grid from the product list through the "Add/Edit Content" option. Set the styling elements for the grid through the "Edit Style" option.

  • Here's the app preview of the product grid included in the Mini In The Box app layout.


After adding content to the home tab, we similarly add content to the other new pages that we had created.

Explore and add other widgets such as the single banner, carousel banner, product slider, product list, and timer.

Here's the final Mini In The Box app we built on Swipecart.

Anyone can create a ready-to-launch app on Swipecart. This free no-code app builder allows you to convert your e-commerce store into a feature-rich mobile app in minutes. And the biggest advantage is that you don't have to code. Even you can try creating apps like Mini In The Box for your online store. It is super-fast and easy.

If you have any questions regarding app-building on Swipecart, contact us.