How to create an app like Myntra

In your dashboard, click on "Layouts" on the left side menu.

In the "Layouts" tab, click on "Create Layout" button to begin the app design.

Clicking on “Create Layout” will open a popup. Give a name for the layout.

Let's name it Myntra. Now, click on the "Create" button.

You will be asked to select either a default layout or a blank layout.

Let’s go ahead and create a Blank Layout for now. So select the "Blank Layout" option.

You’ll be taken to your layout dashboard with the default tab as “Theme Settings”. The basic function of “Theme Settings” is to customize the look of the app. It has multiple options to set branding elements for your app.

Let's first customize the app bar. For this, click on "App Bar Settings" on the left menu.

In "App Bar Settings", Swipecart allows you to customize the app bar color, font color, bottom radius, and elevation. Enable the search, cart, and favorite icon on the app bar.

Another feature in this setting is to upload your branding element in the form of a brand title or logo.

Note: While uploading the image file, ensure it matches the mentioned specifications.

Let us start customizing the theme settings. For this, click on "Theme Style Settings" located at the end of the left menu list. Here, Swipecart allows you to change the font style, scale, color, and even the app color.

Upload a GIF loader for your app here. Again, make sure that the file size meets the requirements mentioned in the section.

Save the changes by clicking on the "Save" button. You must save any changes you make for it to reflect on the app layout. Your Myntra app will now look like as seen in the image below.

The next task is to customize the home screen of the app. To edit the home page layout, click on the “Home” tab next to the "Theme Settings" on the header.

When you click on "Home", an empty home screen is displayed with only the app bar and the bottom bar. We now have to populate the home screen with banners and product collections. Let's start it now.

Spot the drop-down box next to the home screen layout. Click on the drop-down icon and select "Collection Slider" from the list. Different UI styles for the collection slider are displayed just below the drop-down box. Select a widget of your choice, drag it to the home screen, and release it there. We have opted for a round collection slider here.

Hover the mouse pointer over the dropped widget until you sight the “Add/Edit Content” option. Click on it to open a popup.

Here, add a title to the widget, and upload images to it from the collection list. Save the changes.

The app home screen will now look like this with the added collection slider.

Let's add a single banner below the collection slider. Select "Single Banner" from the drop-down menu. Now, select a single banner widget that you like and drag it to the home screen just below the collection slider.

Hover over the empty widget to get the “Add/Edit Content” option. Clicking on it will open a popup. Give a title to the widget and then upload a collection banner. Ensure the banner size matches the aspect ratio mentioned on the widget. Save changes.

Once the banner is uploaded, we now customize the style of the banner. Again hover over the widget and click on the "Edit Style" option. Here, you can adjust the radius, padding, container padding, and other details.

For more information on editing and styling widgets, click on this link.

We are done with adding a collection slider and a single banner on the home screen.

Again repeat the process to add a second single banner below the first one. Add as many single banners as you want to inform app users about the latest offers. Enable internal linking if you want to take users to the specific product or collection page.

We'll add a carousel banner next. Select "Carousel Banner" from the drop-down list. Place a banner of your choice from the displayed widgets on the home screen.

Now, click on “Add/Edit Content” to open a popup screen. Upload three to four banners from your collection list and save the changes.

Click "Edit Style" to make changes to the banner layout. Adjust the padding and radius. You can even change other parameters such as font color, box-shadow, and others. Save the changes and update the layout design.

We have added three images to the carousel banner. Notice the three dots below it indicating the number of sliding banners.

Repeat the process to place as many single banners and carousel banners as you want on the home screen.

Let's begin to add products to the home screen. Select "Product Slider" from the drop-down menu. Multiple product slider UI components will be displayed below the drop-down box. Select one and place it on the home screen.

Clicking on “Add/Edit Content” will open a popup. Add a title to the product slider widget and start uploading relevant product images to it.

To customize the product slider widget, click on the “Edit Style” option. Adjust the radius and padding. Decide the details you want to show to the users below the product image. You can enable/disable product title, price, cart, and favorite button. You can also select if you want to show all uploaded products or simply display a "See More" option to take users to the collection page.

Save the changes and update the layout view each time.

We have enabled the product title and price to be displayed below the image. The app home screen will now look as in the screenshot below.

Repeat the process to place as many product sliders as you want on the home screen.

Go through the drop-down list to study the differences available to make your app's home screen more attractive and engaging. The final app which we have built will look like this.