How to create an app like Joom

First, activate and sign up on Swipecart.

On the Swipecart dashboard, start by clicking on the ‘Layout’ tab on the left menu.

As we’re designing an app from scratch, click ‘Create Layout’.

In the popup that appears, let’s name the app ‘Joom’. Proceed to click on ‘Create’

You’ll be asked to choose a layout. Swipecart allows you to choose from pre-built app templates or make one from scratch. As we’re doing the latter, select the ‘Blank Layout’ and click ‘Create Layout’.

You’ll be taken to the Joom layout dashboard. Here, the ‘Theme Settings’ is the default tab.

Now, we start designing and customizing our app.

This option allows you to customize the app’s branding elements and primary look.

App bar settings - Here, you can manage the branding and navigation icons on the app bar that remains in place wherever you go on the app.

Click here to know which settings you could make on the app via App Bar Settings. The settings would be applicable all across the app.

Besides this, you have the liberty to choose from various pre-made design templates for the side menu, bottom bar, profile page, and input style.

Theme style settings- Here, you can manage the app’s color theme, fonts, and the app loader for an immersive and uniform app experience.

Click here to know how to manage the theme style settings.

Here’s a preview with all the theme settings

Search Bar-Your mobile app is incomplete without a search bar. Above the widget dropdown, select the search bar from the drop-down and drag it & drop it to the top of the app below the app bar.

Upon hovering on the search bar, you would find an ‘Edit Style’ option. Click here to know how you could customize the search bar.

Here's a preview of the search bar on a mobile app interface.

Product Grid- You can showcase your star products using the Product Grid widget. Select the product grid in the widget library drop-down and drop the desired product grid style on the draft home page.

For more information on the product grid, click here.

Use the ‘Add/Edit Content’ popup to add products/collections to the product grid. Click here to know how to use this feature. Click ‘Save’ when done.

After this, customize the Product Grid style with the ‘Edit Style’ popup. Click here to know how you can use this feature.

Here’s a preview of the result.

Adding a new page- On the "Add Page" button to your left next to the home screen layout, you'll find the 'home' tab as default. Click on the 'Add page' option for creating a new page.

To know how to add a new page, click here. Type the page name 'Stores' and click on "Submit".

Now that we've created a new page, let's add widget elements to it. To start with, let's add a product slider.

Product Slider- Here, you can add products in a carousel format. This is great to show featured products. For this, choose the product slider option from the widget library.

Drag and drop the product slider style you’d want on the draft home page. For more details, click here.

Use the ‘Add/Edit Content’ popup to add products/collections to the product slider. Click ‘Save’ when done.

After this, customize the Product Slider style with the ‘Edit Style’ popup.

Keep adding product sliders as required.

Now, we create the 'Promotions' page just the way we did with the 'Stores' page. Please note that the default 'Home' page is renamed as 'Best'

Single Banner- To draw your customer’s attention to a single item, you could drag and drop a single banner from the widget library and use the ‘Add/Edit Content’ option to add your image and link.

Customize the banner style with the ‘Edit Style’ option thereafter. To know more about adding a single banner, click here.

This is how the single banner would look on the app.

Add more single banners to the Promotions tab as required.

Besides this, you could add widgets like a Banner Slider, Collection Grid, Product List, Product Slider, and Timer.

Upon hovering on the widgets in the home page layout, you will see a ‘Copy Block’ option below Edit Style. Here, you can duplicate the widget and make changes to it as needed. The final look of our app like Joom is here.