How to create an app like Kohl's

Once you are in the Swipecart dashboard, the first step to building an app like Kohl's is to create a layout for it. Select "Layouts" from the left menu of your dashboard.

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

Clicking on “Create Layout” will open a popup. We'll name it "Kohl's". Now, click "Create".

Before a layout is created, you have to choose the type of layout. Since we have to create an app like Kohl's, it's best if we go with a blank layout for now. Click on "Create Layout". Your layout is now created. Click here to know more about creating layouts on Swipecart.

You are now in the default tab "theme Settings" and sub-tab "App Bar Settings". We start by customizing some theme elements for the app.

App bar settings - Customize your app bar by setting colors and adding helpful icons to it. Upload your brand logo here. For more details on app bar settings, click here.

For the side menu, bottom bar, profile page, and input style settings, you simply select one from among the different available variants and save it to the app's layout.

Theme style settings-In this, we customize the theme to meet the branding requirements. Set the font and color styling parameters. Upload a loader for your app here. click here, to know more.

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

Come to the "Home" tab. It is here that you start laying UI components or "widgets" for your app. Access these widgets from the drop-down box next to the home screen layout.

Search: Click on the drop-down box and select the search widget from the list. This widget is displayed just below the box. Drag and drop it inside the home screen below the app bar. Click here to get a detailed guide on the Search widget.

Look at the preview below to see how the search bar appears on the Kohl's app.

Carousel Banner: Let's now add a carousel banner to the home screen. These are rotating banners that will enable you to drive conversions.

Select "Carousel Banner" from the drop-down widget list. From among the style variants displayed below the box, select one for your home screen. click here for more information on using carousel banners for Swipecart.

To add images to the banner, hover the mouse pointer over the dropped widget. Click on "Add/Edit Content". It is from here you add images to the banner and link them to the relevant products, collection categories, any other app pages, or external URLs.

Click here to know more about adding and editing content to widgets.

Swipecart also gives you the option to customize some styling parameters for the carousel banner. Hover over the widget and click on "Edit Style". On the "Edit Style" popup, you have various options to make your banner look appealing and meet the branding requirements.

click here to learn about editing widget styles on Swipecart.

Here's the preview of the added carousel banner below the search bar.

Single Banner: A single banner lets you highlight promotional content to your customers. To add this to your home screen, select "Single Banner" from the widget list in the drop-down box. Drag and drop it below the carousel banner. To know more about single banners, click here.

To add an image to this single banner, repeat the task we have mentioned above for the carousel banner.

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.

Customize the single banner using the "Edit Style" option. During the editing, you can preview the changes you make on the "Edit Style" popup itself.

Have a look at the preview below of the added single banner below the carousel banner.

Continue adding single banners to the Kohl's app home screen layout to drive conversions.

Banner Grid: Using this widget, you display the banners in a grid format. Select "Banner Grid" from the widget list. Place one from among the different style variants inside the app's home screen layout. click here, to know more about banner grids.

Add images to the banner grid by clicking on "Add/Edit Content". You can link the images to products, collection categories, any other app pages, or website URLs. Customize the look of the banner grid through the Edit Style option on Swipecart.

Have a look at the mobile preview below to see how the added banner grid looks on the Kohl's app home screen.

We continue to add banners in carousel and grid format to the home screen.

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

Let's see the final Kohl's app.