How To Create An App Like Banggood

On the dashboard, click on the layout tab from the left menu.

Click on the ‘Create Layout’ icon as we’re making an app from scratch.

A popup would appear to name the app, let’s call the app ‘Banggood.

Now, you’ll be asked to choose a layout. Swipecart allows you to select pre-made layouts or make one from scratch. As we’re making a new app, click on ‘Blank Layout’.

You’ll be taken to your layout dashboard with the default tab “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 with the App Bar Settings

App Bar Settings:Here, you can customize the app bar that remains constant wherever you go on the app. To know what you can do with this, click here.

Next, customize the look of the Side Menu, Bottom Bar, Profile Page, and Input Style. (welcome/sign-in page). For all these, go to the respective tabs on the left menu. A set of readymade templates are available for each. Select an option from the variants and save it to the app.

Theme Style Settings: Here, you can manage and edit the fonts, colors, and app loaders for a universal app usage experience. To know more about this, Click here.

Here's a preview of the Banggood app with the theme settings.

As per the design, let’s rename the home page as ‘Hot’ by clicking on the pencil icon on the home tab.

Next, let’s create a new ‘Toys, Hobbies & Robot’ page. Click on ‘Add Page’ and in the popup that appears, name the page ‘Toys, Hobbies & Robot'. A new page is added to the list.

For more details on how to create a page,Click here.

Now Click on the edit icon on the home tab and rename the 'home' tab as 'hot'

Now add more pages as required. Here's how the pages would look on a mobile screen.

Now, we add content to the Hot tab by dragging and dropping style variants of widgets. These are accessible in the screen's drop-down box panel in the right section.

Click here for more information about widgets on Swipecart.

Collection Slider- It's time to display the collection categories on the home page. These are displayed in a slider format through the collection slider widget.

Select "Collection Slider" from the widget list and place a variant inside the home screen layout.

Click here to learn more about collection sliders.

To add content to the collection slider, click "Add/Edit Content". Add all relevant collection categories from the collection list to the slider widget in the opened popup. Click here to know more about this.

Set the styling elements for the collection slider through the "Edit Style" option. Click here to know more about this.

Here's what the collection slider would look like on the mobile screen.

Single banner- With this, you can attract your user’s attention towards a single item- this could be a collection, a product, or anything else.

Just select ‘Single banner’ from the widget library drop-down and choose a banner style that matches your requirements. Drop it to the draft app home page. For more information, click here.

Use the Add/Edit Content option to add the image and link to the banner. When done, customize the widget format with the ‘Edit Style’ option.

Here's a preview of the single banner.

Banner Slider- Here, you can display multiple banners in a slider format and add links to them as necessary. You can add links to products, collections, pages, or outside URLs

For more information, please click here.

Use the Add/Edit Content option to upload your image and link.

After doing so, use the Edit Style option to customize the banner slider’s look.

Here's how the banner slider would look on mobile.

Add another banner slider as per the design.

Collection Grid- You can set up a collection grid where you can add links to a set of images for easier navigation. Choose ‘Collection Grid’ from the widget library drop-down. For more details, please click here

As always, use the Add/Edit Content option to add products to the grid. When done, customize the widget format with the ‘Edit Style’ option.

Here's a preview of the Collection Grid.

Product Grid- This widget allows you to highlight unique products on the home page itself. The products are arranged in a grid format.

Select "Product Grid" from the widget list. Place one among the style variants inside the home screen layout.

For more details on the product grid, click here.

To add content to the product grid, click "Add/Edit Content". Add all relevant products from the product list to the grid in the opened popup.

Set the styling elements for the product grid through the "Edit Style" option. You can preview the changes you make in the right section of the popup itself.

Here's a preview of the app with the product grid.

Besides this, you could add other widgets like Banner Grid, Banner Slider, Collection Grid, Product List, Search and timer.

Here is what the completed Banggood app would look like