How to create an app like Forever21

On the dashboard, click on the layout tab from the left menu.

Click on the ‘Create Layout’ icon as we’re making an app from scratch.

Clicking on “Create Layout” will open a popup. Name your app ‘Forever 21’ & click on "create".

Now, 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’.

You’ll be taken to your layout dashboard with the default tab “Theme 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 with App Bar Settings

App Bar Settings-Here, you can customize the app bar that remains constant wherever you go on the app. To know what you can do with this, click here.

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- Here, you can manage and edit the fonts, colors, and app loaders for a universal app usage experience. To know more about this, click here.

Here’s what the draft app would look like after these settings.

Let's begin adding content to the home page now. Click on the "Home" tab next to "Theme Settings". A blank home screen layout with the app bar and bottom bar is displayed.

Swipecart has pre-coded UI components turned into visual widgets. We drag and drop these inside the home screen. Let's see how it is to be done to create the Forever 21 app. Know more on widgets here.

Collection Slider: Let's add a collection slider to the home screen layout. Locate a drop-down box next to the home screen.

Select "Collection Slider" from the widget list. Different variants are displayed just below the drop-down box.

Drag and drop the one you like into the home screen layout. To know more about collection sliders, click here.

Upon hovering on the dropped collection slider, you will find the ‘Add/Edit Content’ option. In the popup that appears, add the image and links you'd want to showcase. To know more about the ‘Add/Edit content’ feature, click here.

Once you’re done with adding the image and link, hover again on the slider to find the ‘Edit Style’ option. This allows you to customize the widget’s look. For more information, click here.

Here's a mobile preview with the collection slider.

Single Banner: You can use single banners to highlight important messages such as offers, sales, new launches, and discounts to your customers. To add it to the home screen, select "Single Banner" from the drop-down widget list.

Place one style variant on the app's home screen. Click here for more information on single banners.

Use the 'Add/Edit Content' option to add images and links. When done, use the 'Edit Style' option to customize the single banners.

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

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.

Use the 'Add/Edit Content' option to add images and links. When done, use the 'Edit Style' option to customize the banner grid.

This is how the banner grid would look on the app.

Product Slider: Similar to the collection slider, you could use the product slider to showcase your star products.

Select the right product slider design from the widget library and drop it into the draft app layout. For more information about this, click here.

Use the 'Add/Edit Content' option to add images and links. When done, use the 'Edit Style' option to customize the product sliders.

Here is a preview of the completed app.

Add another product slider to the app

Besides this, you could add widgets like a Banner Grid, Banner Slider, Collection Grid, Product List, Search, single banner, Carousel Banners, and Timer.

After you’ve added all the widgets, links, and images to your app, here’s what the draft Forever 21 app would look like