How to create an app like Firstcry

Once you activate Swipecart, the next step is to create a layout for the Firstcry app. In the Swipecart dashboard, click on "Layouts" in the left menu.

To create a new layout, click on the “Create Layout” icon.

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

Since we have to create an app like Firstcry, let's go with the blank layout. Click on the "Create Layout" button.

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 primary function of “Theme Settings” is to customize the app's look. It has multiple options to set branding elements for your app.

App Bar Settings- The "App Bar Settings" allows you to modify the app bar's styling parameters, including uploading the logo image. To learn more about 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.

Next, customize the look of the side menu, bottom bar, user profile page, and input style (welcome/sign-in page). For all these, go to the 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 app.

Theme style settings- Click on "Theme Style Settings" in your app layout's left menu. Here, edit some of the theme settings such as font style, scale, and color. Upload the Firstcry brand loader GIF. For more details on Theme Settings, click here.

Here's the mobile preview of the Firstcry app with the customized app bar, bottom bar, and changes made to the layout's theme.

Click on the “Home” tab 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.

With the no-code app builder Swipecart, adding content inside the layout is simple. Widgets, which are pre-coded visual UI elements, can be dropped and dragged into the layout. Click here to know more about widgets.

Collection Slider - Let's first start by adding a collection slider to the home screen. Different variants of the collection slider are displayed below the drop-down box. Drag and drop one inside the layout below the app bar. Click here to know more about the collection slider.

To add content to the slider, hover the mouse pointer over the dropped slider widget and click on the "Add/Edit Content" option. In the popup that opens, select collection categories to add to the slider.

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. Click on "Edit Style". In the popup that opens, you have options to customize the style of the widget.

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

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

To add a carousel banner to the Firstcry app's layout, select "Carousel Banner" from the drop-down widget list. Different styles of carousel banners are displayed below the drop-down box. Select one and place it on the home screen. Click here to know more about carousel banners.

To add content, click on "Add/Edit Content". In the popup that opens, upload images and link them to relevant collection categories.

To customize the carousel banner, click on "Edit Style" to open a popup. You can preview changes in real-time while editing the styling parameters for your widget.

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

Here's the Firstcry app preview with a carousel banner added to it.

Next, we add a banner grid to the Firstcry app's home screen. Select "Banner Grid" from the drop-down list. We select a "1:1 square banner with radius" for the app. Drag and drop it inside the home screen layout. For more information on the banner grid, Click here.

To add content to the banner grid, repeat the process of clicking on "Add/Edit Content' and adding & linking images to the relevant product or collection category.

To customize the banner grid style, hover over it and click on "Edit Style". On the popup that opens you'll find options to edit some of the styling parameters. Complete the customization and save the changes.

Here's the mobile preview. Notice the title "Shop By Category" added to the banner grid.

We repeat the process and add more banner grids to the app. Have a look at the mobile preview after adding banner grids to the Firstcry app.

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 banner grid. For more details on the single banner, click here.

Add an image to the banner by clicking on "Add/Edit Content". Link it to a product, collection category, any other app page, or an external website link.

To customize the style elements for the single banner, hover over the banner and click on "Edit Style". You have customizing options here.

Have a look at the mobile preview of the Firstcry app with a single banner added to it.

We complete creating an app like Firstcry by adding single banners and banner grids as required. Besides this, you could add widgets like a Banner Slider, Collection Grid, Product List, Product Slider, Search, and Timer. Let's see the final app here.