How to create an app like DSW

First install, sign up, and activate Swipecart.

At the Swipecart dashboard, click on the Layout tab in the left menu

As we’re creating a new app from scratch, click on the ‘Create Layout’ option.

A popup would appear to name the app, let’s call the app ‘DSW’. Click 'Create'.

After doing so, 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’.

This will lead you to the ‘DSW’ layout dashboard. Here, we start creating the app by managing the app’s theme in the Theme Settings tab.

Here, we customize the overall look and feel of the app. Let's start with the App theme settings.

App bar Settings- Here, you can manage and add features to the app bar along with another branding that remains constant wherever you are on the app. Click here to know more about App Bar Settings.

Besides this, you’ve got to choose from pre-made templates for the side menu, bottom bar, profile page, and input style.

Theme Style Settings- Here, you can manage and edit the app loader icon, fonts, and colors for the entire app. To understand how you could make these changes, click here.

Here’s a preview of the completed theme settings.

Once you are done with the theme settings, you can start designing your app with the help of drag-and-drop widgets on your home page. First, we need to add a single banner to our draft DSW app

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.

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

You can then choose to add the product, collection or page images, or link via the "Add/Edit Content" option. Click here to know more about it.

Once done, customize your banner design and formatting with the "Edit Style" option later. Click here to know more about how to style widgets.

Here's a preview of the DSW app with a single banner.

Add another single banner as per the design.

Collection Slider: We display the collection categories in a slider format at the top of the app.

Select "Collection Slider" from the widget list. Different styled widgets are displayed just below the drag-and-drop box. From here, we select a square collection slider and drag and drop it to the home screen below the search bar.

Click here for details about collection sliders on Swipecart.

Add collections to the slider from the product list through the "Add/Edit Content" option. Set the styling elements for the slider through the "Edit Style" option.

Here's a preview of our DSW app with the collection slider.

As per the design, let's add another single banner as explained above.

Again, we need to add another Collection Sliders as per the design.

Another Single Banner as required.

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

Click here for information about product sliders on Swipecart.

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

Here's a preview with the added Product Slider.

After this, continue to add a Single Banner, Collection Slider, and Product Slider as per the design.

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

Here's a video of the final app.