How to create an app like Bath & Body Works

On the dashboard, click on "Layouts" in the left menu.

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

Clicking on “Create Layout” will open a popup. Name the layout "Bath & Body Works". Click on "Create".

You can choose between pre-made layout templates and a blank layout. Since we need to design an app like Bath & Body Works, we choose "Blank Layout". Now, click "Create Layout."

A blank layout with the name Bath & Body Works is formed. For more details about creating layouts on Swipecart, click here.

You'll be taken to the app 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: Set your branding element on the app bar or the action bar because it stays on the top throughout all pages of your app. Here, we upload the logo to customize the app bar.

For more details on app bar settings, click here.

We then go to Side Menu Settings, Bottom Bar Settings, Profile Page Settings, and Input Style Settings. Here, we select our choice from the style variants and save it to the app.

Theme Style Settings: In this section, we set the theme for the app. The changes made here are reflected throughout the app.

We can change some of the styling parameters for the app's theme such as app background color and font style & color.

Click here to know more about theme style settings on Swipecart.

Here's the draft app with theme customizations completed to match the Bath & Body Works app.

Next, we move on to designing the app's home screen. Click on the "Home" tab. A blank home screen is displayed with only the app bar and bottom bar.

We add content to the home screen by dragging and dropping style variants of widgets. These are accessible in the drop-down box panel at the right section of your screen.

Click here for information about widgets on Swipecart.

Single Banner: Let's start with the single banner widget. It is used to highlight attractive schemes like discounts, sales, new product launches, or flash deals on the app.

Select "Single Banner" from the widget list. From among the different style variants offered by Swipecart, select one and place it under the collection slider on the app's home screen.

Click here for detailed information on single banners.

To add an image to the single banner, hover over the dropped banner widget and click on "Add/Edit Content". In the popup that opens, add an image and link it to the relevant product, collection category, any other app page, or an external website link. You can also display the banner without linking it to anything.

Click here for details about adding and editing content on widgets.

To set the styling for the single banner, hover again over it and click on "Edit Style". In the popup that opens, set the styling parameters to suit the brand.

Click here for details on styling widgets.

Have the look at the app with a single banner on it.

We repeat adding attractive single banners to the app and linking them to relevant products or collection categories.

Banner Grid: Instead of displaying banners in single or slider format, you can also display them in a grid form. With this, customers can easily view multiple banners without having to wait for them to appear on the slider.

Select "Banner Grid" from the widget list. Place one among the style variants inside the home screen layout.

For more details on the banner grid, click here.

As previously mentioned for the single banner, add products to the banner grid from the product or collection list through the "Add/Edit Content" option.

Set the styling elements for the banner through the "Edit Style" option. During the editing, you can preview the changes you make on the "Edit Style" popup itself.

Design your app on Swipecart to increase customer engagement and conversions.

Here's the mobile preview of the Bath & Body Works draft app with the banner grid on it.

Other than the single banner and banner grid widget we have mentioned here, there are other widgets you can explore on Swipecart including the search bar, timer, banner slider, carousel banner, collection grid, collection slider, product grid, product list, and product slider.