How to Create an App like Meesho

After signing up and activating Swipecart, you are taken to its dashboard. Click on "Layouts" in the left menu of your dashboard.

Click on the “Create Layout” icon to create a new layout for your Meesho app.

Clicking on “Create Layout” will open a popup. Let's name the layout.

We name the layout "Meesho" and click on "Create".

Swipecart gives you two options before it creates the layout. You can select a blank layout and start laying visual components on it. The other option is to select any of the ready-to-use templates and customize them. Since we have to create an app like Meesho, let's go with the blank layout. Choose the "Blank Layout" and click on the "Create Layout" button.

A blank Flipkart layout is created. You are taken to the layout dashboard with the default tab as “Theme Settings” and the sub-tab as "App Bar Settings".  The primary function of “Theme Settings” is to customize the app's look. It has multiple options to set branding elements for your app.

Let's start by customizing the app bar for our Meesho app.

You can modify the app bar color, font color, bottom radius, and elevation. Enable/disable the visibility of the cart, favorite, notification, and search icons on the app bar. Here, for the Meesho app, we have enabled the visibility of favorite and cart icons. Upload the logo image or title text. Align its position on the app bar. Click on "Save" before you exit.

Note: Click on "Save" wherever it is given before you exit the screen or tab.

Next, we customize the look of the side menu, bottom bar, user profile page, and input (welcome/sign-in page). It is simple. For all these, go to their respective tabs on the left menu. A set of readymade templates are available for each. Select an option from the variants and save it to the layout

Now, let's customize the theme of the app. Click on "Theme Style Settings" in your layout's left menu.

Here, we edit some of the theme settings such as font style, scale, and color. You can even set the app's primary color and background color from the color picker. Upload the Meesho loader GIF or any other and when you are done with customizing the theme, save and update.

Here's the mobile preview of the Meesho app with the customized app bar, bottom bar, and theme. Notice the cart and favorite icons on the app bar that we had enabled in the "App Bar Settings".

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

When you click on "Home", a blank home screen layout with only the app bar and bottom bar is displayed. It's time to start filling the contents inside it.

With Swipecart, a no-code app builder, adding content inside the layout is simple. Widgets, which are pre-coded visual UI elements, can be dragged and dropped into the layout. Let's see how a drag-and-drop editing tool can help us.

Look for a drop-down box next to the empty layout in the top right corner of your layout dashboard. When you click on the drop-down icon, a list of widgets with titles like Collection Slider, Product List, Search, Carousel Banner, etc. will appear. This is the widget library or list of widgets for Swipecart.

The Search widget will be our first stop. Click on "Search" in the widget list. A search bar is displayed just below the drop-down box. Drag and drop the search bar widget on the home screen layout.

You can edit the style of the Search bar such as radius and padding. Hover your mouse over the search bar to open the “Edit Style” option. You can enable/disable the visibility of the search and voice search (mic) icon on the search bar. For the Meesho app, we have enabled the visibility of both the search and mic icons. Click on “Update” to save your changes.

Below is the mobile preview of the Meesho app with the customized search bar.

Now, let's start laying other elements inside the home screen. Select "Carousel Banner" from the drop-down widget list. Different styles of carousel banner components are displayed below the drop-down box. Select one, drag it, and drop it inside the layout below the search bar. For our Meesho app, we have selected a 2.5:1 aspect ratio carousel banner.

Let's add images to the carousel banner. Hover the mouse pointer over the dropped carousel banner. Spot the "Add/Edit Content" option to your right, next to the widget. Click on it. An "Add Carousel Banner" popup opens. See if the "Internal Linking" option is checked. Click on the Product tab. In the drop-down list, select a product you want to link to the image you'll be soon uploading. Now, click on the upload icon. A window opens up prompting you to open and upload an image from the local system. Select and open the image you want to add to the carousel banner. The image gets uploaded. It has to be relevant to the product you just selected from the product tab. Click on "Add". Now, the uploaded image gets linked to the relevant product in your product list. When a user clicks on that image in the carousel banner, they are taken to that product page. Repeat the same process and keep adding images to the carousel banner. Click on "Save Banner" when done and exit the popup screen.

Note: The uploaded image size should match the aspect ratio specification of the carousel banner.

Click here to know more about adding or editing content to a widget on Swipecart.

Swipecart gives you the option to customize the carousel banner. Hover the mouse pointer over the banner in the layout until you spot the "Edit Style" option sandwiched between "Add/Edit Content" and "Remove Block". Click on it to open an "Edit Style" popup. Here, you can adjust the banner padding and radius. You can also add a background image or color for your banner. There are some more options such as adding an indicator, box-shadow, and others. If you enable the indicator for the banner, select one style from among the variants. Save and exit when you are done editing the style of the carousel banner.

Click here to know more about editing the style of a widget on Swipecart.

Here's the preview of the Meesho app with the added carousel banner. Notice the indicator variant we have selected for the banner.

Let's add a collection slider to the Meesho app home screen layout. Select "Collection Slider" from the drop-down widget list. For our app, we have selected a "Square collection slider with title and radius". Place it inside the layout below the carousel banner.

Let's add collection categories to the slider. Hover over the widget and click on "Add/Edit Content". In the "Collection Slider" popup, go to the "Select Collection" tab. Click on the drop-down list. Select the category to be added to the slider. Click "Add". The collection category is now added to the slider. Keep repeating to add more categories to the slider. Give a name to the slider. We have named it "Top-Selling". You can add relevant attractive titles to keep the customers engaged in the app. Click on "Save" and exit.

To customize the collection slider, hover over it until you spot the "Edit Style" option. Click on it to open the "Edit Style" popup. In this, you can set some styling parameters such as adjustments for radius and padding, adding a background color or image to the slider, aligning the position of images inside the slider container, adjusting the title alignment and font color, and so on. Finally, save before your exit

The Meesho app with the collection slider added to it now looks as in the image below.

We gain repeat the above process of adding one more collection slider. This time we give the title "Top Demand" and add relevant collection categories to it.

Next, let's add a single banner to the Meesho app. Select "Single Banner" from the drop-down menu. Different variants of the single banners are displayed below the drop-down box. Select one that suits the requirement of your app and place it on the home screen layout.

To add an image to the single banner, hover over the dropped widget and spot the "Add/Edit Content" option. Click on it to open a "Custom Image Banner" popup. Give a title to the banner. Check if the "Internal Linking" option is enabled. In the "Products" tab, click on the drop-down box and select a product to link to the image you'll be uploading soon. Click on the upload icon to your left on the popup screen. An "Open" window prompts you to select and upload any image from the local system. Select a relevant image and click on "Open". This image is now uploaded. Click on "Add". The image gets added to the single banner widget. Also, it gets internally linked to the selected product in the products tab. When a user clicks on the image, they are redirected to that product page. Similarly, you can link the image to a collection category, any other page in the app, or any website URL outside the app. Click on "Save Banner" when done and exit the popup.

To customize the banner style, hover over the dropped widget and select the "Edit Style" option. Click on it to open the "Edit Style" popup. In this, edit the radius and padding of the image inside its box. You can also adjust the container padding. Add a background color or image to the banner box. Adjust the image orientation inside the banner container. And then, you can adjust the title alignment and change the font color. Click on "Save" before you exit the popup. Click on "Update" on the top right of your layout dashboard to update the changes to your Meesho app's layout.

Here's a glimpse of the single banner we added to the Meesho app.

Next, we add a collection slider to the app. Select "Collection Slider" from the widget list. We have opted for a "round collection slider" from the different styles. Drag and drop it into position on the home screen layout.

Let's add collection categories to the slider. Click on "Add/Edit Content". In the "Collection Slider" popup, click on the "Select Collection" tab. Select any collection from the drop-down category collection list. Now, click on the upload icon. Select and open a relevant image to the selected category from your local system. The image is now uploaded. Click on "Add". So, when a user clicks on the image, they are taken to the collection category page you had selected from the list. Repeat this process of selecting categories from the collection list and uploading images for the same. After you are done, click on "Save" and exit.

To customize the collection slider, hover over it and click on the "Edit Style" option. In the popup that opens set the styling parameters for your collection slider. As mentioned above for other widgets, you can set the padding, radius, title alignment, image position, font color, background image/color, and more. Save and exit when you are done customizing the slider style.

So, here's our Meesho app with the collection slider.

Now, we add some products to the home screen layout. Let's display them on a grid. Select "Product Grid" from the drop-down widget library. Select any suitable style of product grid as you see in the Meesho app. Place it on the home screen layout.

Let's populate the grid with product images. Hover over the widget. Click on "Add/Edit Content". A "Product Grid" popup opens. Add a title to the widget. Here, click on the Product tab and select any product you want to add to the grid. Click on "Add". That product image gets uploaded to the grid. Repeat the same to add individual products to the grid. If you want to add a collection category, click on the collection tab and select a category to add to the grid. Click on "Add". All the products in that category get uploaded. Keep the relevant products you want to display in the grid and delete the rest. Now, click on "Save". So here, you can add products one at a time to the grid or select categories to add multiple products to the grid.

To customize the style of the product grid, hover over the widget and click on "Edit Style". In the popup that opens, adjust the radius and padding, ad background image/color, adjust the image orientation inside its box, align the title, and change its font color. You can enable/disable the visibility of product titles and prices or favorite and cart icons. Any changes you do is visible right on the popup screen to your right. Adjust the styling format and click "Save" before you exit.

Click here for a detailed guide on how to design an app on Swipecart.

So, here's the product grid in the Meesho app with the title "Products For You".

That completes our tutorial on how to create an app like Meesho using Swipecart. Here's the final look of the Meesho app.