How to create an app like Rosegal

After signing up, you’re taken to its dashboard. On the Swipecart dashboard, click on “Layouts” in the left menu.

Click on the "Create Layout" icon to create a new layout.

Clicking on “Create Layout” will open a popup. Name the layout "Rosegal". Click on "Create".

You can select from pre-built templates for your layout. But since we have to create an app like Rosegal, let's go with a "Blank Layout". Click on "Create Layout".

A blank layout is now created for your app. For more details on creating layouts on Swipecart, click here.

You’ll be taken to your layout dashboard with the default tab “Theme Settings” and sub-tab "App Bar Settings". The primary function of “Theme Settings” is to customize the app's look.

App Bar Settings: Here you set customization parameters for the app bar such as adding logo image and title as well as colors. To know more about app bar settings, click here.

Customize the side menu, bottom bar, user profile page, and input style (welcome/sign-in) settings by going to the respective tabs and selecting one style from among the variants. Save and proceed.

Theme Style Settings: In the theme style settings, you set up the theme style that will be reflected throughout the app. To get more details about theme style settings, click here.

Look at the mobile preview of the Rosegal app with the customized theme, app bar, and bottom bar.

Now, let's move on to populating the app's home screen with content. Click on the “Home” tab to edit the home page layout.

We select widgets from the drop-down widget list located right next to the home screen layout. Next, we drag and drop a widget-style variant into the home screen. It's as simple as that.

Click here for more information about widgets on Swipecart.

Single Banner: Click on "Single Banner" from the widget drop-down list. Select one from among the different variants displayed below the box. Drag and drop it inside the app's home screen. Click here for more information on single banners.

Hover your mouse pointer over the dropped widget and click on "Add/Edit Content". A "Custom Image Banner" popup opens. It's here you add an image to the banner and link it with a relevant product or collection category. Click here to know about adding content to widgets.

Hover again over the dropped widget and this time, click on "Edit Style". In the popup that opens, you can modify the styling elements for the banner. Click here to know more about styling widgets on Swipecart.

Here's the mobile preview of the app with the added single banner.

In a similar way, we add one more single banner to the app. Learn more about designing apps on Swipecart by clicking here.

Collection Grid: Let's showcase the collection categories in a grid format. Select the "Collection Grid" widget from the drop-down list and place a variant below the single banner in the app layout. Click here for information on adding a collection grid to the app.

We click on "Add/Edit Content" and in the popup that opens, we add collection categories to the grid.

Similarly, we click on "Edit Style" to make changes to the grid's style. Here, we have added a background color to the grid using the color picker.

Note: Click on "Save" before you exit any popup. Click on "Update" on the dashboard after you save to update the changes to the app.

Have a look at the added and customized collection grid in the Rosegal app.

We continue to add single banners to the app.

Here's a mobile preview of the Rosegal app with the added single banners and collection categories.

Product Slider: Let's start displaying some selected products on the app's home screen. Select "Product Slider" from the widget list. Place a style variant of your choice on the home screen layout. Click here to know more about product sliders on Swipecart.

We now add products to the slider by clicking on "Add/Edit Content".

Similarly, we edit the styling parameters for the Rosegal app through the "Edit Style" option. As you can observe below, the preview of the changes you make is available on the popup itself.

Here's the mobile preview of the Rosegal app with the product slider included in it.

Banner Grid: Banner grids are useful promotional tools inside the app. Select a "Banner Grid" variant from the styles displayed below the widget list box. Place it inside the home screen. For more details on banner grids, click here.

We add images to the banner grid and link them to relevant categories in the collection list. You can also link them to specific products, app pages, or any other external website URL.

The "Edit Style" option allows you to modify the style parameters of the banner grid to suit your branding and enhance the overall look and feel of the app.

Here's the banner grid added to the app's home screen layout.

We complete the design by adding single banners, product sliders & product grids. You can also explore other widgets for your apps such as a search bar, timer, product list, and banner slider. Take a look at the final Rosegal app we have designed on Swipecart.