How to create an app like Lenskart

Let's start by creating a layout for the Lenskart app. In the dashboard, click on "Layouts" in the left menu.

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

Clicking on “Create Layout” will open a popup. Type the layout name as "Lenskart". Click on "Create".

Since we have to create an app like Lenskart, let's go with the blank layout. Click on the "Create Layout" button. To learn more about creating layouts on Swipecart, click here.

You’ll be taken to your blank layout dashboard with the default tab as “Theme Settings” and the sub-tab as "App Bar Settings". The "Theme Settings" tab has multiple options to set branding elements for your app. Let's start by customizing the app bar.

App Bar Settings: In the "App Bar Settings" modify the app bar styling parameters. For more information on App Bar Settings, Click here.

Note: Click on "Save" wherever it is given before you exit the screen or tab so that the changes are saved to your layout.

To customize the look of the side menu, bottom bar, user profile page, and input style (welcome/sign-in page), go to the respective tabs on the left menu. Select and save the one that matches the brand from among a set of readymade templates.

Theme Style Settings: Let's customize some of the theme elements now. Click on "Theme Style Settings" in your app layout's left menu. Here, edit theme style settings such as fonts and color. Upload the Lenskart brand loader GIF. Click here to know more about customizing the theme.

Here's the mobile preview of the Lenskart app with the customized app bar, bottom bar, and theme.

We'll move on to customizing the home screen of the app. Click on the “Home” tab next to "Theme Settings" to edit the home page layout.

In this tab, a blank home screen layout with only the app bar and bottom bar is displayed. Let us start filling the contents inside it.

Filling contents inside the layout is easy with Swipecart. It has visual UI components called widgets. You have to drag and drop them into place inside the layout with a drag-and-drop editing tool. Click here to know more about the widgets and their function.

Collection Slider: Select "Collection Slider" from the drop-down widget list located next to the home screen layout. Select one from among the different variations displayed below the drop-down box. Drag and drop it inside the layout below the app bar. Click here to know more about collection sliders.

To add content to the slider, hover over the dropped slider widget and click on "Add/Edit Content" next to the home screen. Here, you add images and link them to relevant collection categories.

Click here for a detailed tutorial on adding and editing content into the widget.

Now, if you want to customize the look of the collection slider, hover over the widget again. This time, spot & click on the "Edit Style" option. On the popup that opens, you have options to customize the widget style.

Click here to know more about how to style widgets on Swipecart.

Here's the mobile preview of the Lenskart app with the collection slider added to it.

Single Banner: Select "Single Banner" from the drop-down options. From among the different formats of single banners displayed below the drop-down box, select one and place it on the home screen below the collection slider. Click here for information on single banners.

Add content to the single banner by clicking on "Add/Edit Content". Customize its style through the "Edit Style" option.

Here's the mobile preview of the Lenskart app with a single banner added to it.

Carousel Banner: Next, we add a carousel banner inside the home screen. Select "Carousel Banner" from the drop-down list. Select any from among the choices and place it on the home screen below the collection slider. To know more about carousel banners, click here.

It's time to add content inside the carousel banner and customize its style. Repeat the same process as mentioned above for the single banner.

Click here for a detailed tutorial on how to design apps with Swipecart.

The added carousel banner looks like this in the preview below.

Collection Grid: Let's add a collection grid to the app. Select "Collection Grid" from the drop-down list. We select a 3x3 round collection grid from the available different styles. Place it inside the home screen layout. Click here for more information on the collection grid widget.

Click on "Add/Edit Content" to add collection categories to the grid. On Swipecart, you can even customize the styling elements for the collection grid.

Note: Click on "Save" before you exit any popup. Click on "Update" on the dashboard after you save to update the changes to the app.

Here's the preview of the Lenskart app with the added collection grid.

We repeat the process of adding more widgets such as single banners and collection grids. Have a look at the Lenskart app below.

Banner Grid: It's time to add a banner grid to the Lenskart app. Select "Banner Grid" from the drop-down list. Drag and drop it inside the home screen layout. Click here for more information on banner grids.

Repeat the process of adding content to the banner grid as mentioned previously for the single banner and banner carousel. Style the banner grid to customize it for branding.

Besides this, you could add widgets like a Banner Slider, Carousel Banners, Product List, Product Slider, Search and Timer.

We are done creating an app like Lenskart. Here's the final preview of the app.