How to create an app like Adidas

We begin by creating a layout for our Adidas app. To do this, on your Swipecart dashboard, go to "Layouts" on the left menu.

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

Clicking on “Create Layout” will open a popup. For now, name the layout "Adidas" and click on "Create".

You then have the option to choose from a blank layout or a pre-made app template. As we're making an app from scratch, select the 'Blank Layout'.

A blank Adidas layout is now created. For more information on creating layouts on Swipecart, click here.

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.

App Bar Settings-Let's start by customizing the top app bar of the app. This remains constant throughout the app. To know what you can do here, click here.

Next, customize the look of the side menu, bottom bar, user profile page, and input style settings (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 Adidas app layout.

Theme Style Settings: Next, we set some styling parameters for the app's theme. Click on "Theme Style Settings" on the left menu.

Here, you can customize the entire app's theme. This includes the font, font color, app loader, and font style. To know more, please click here.

Here is the mobile preview of the Adidas app with the customized app bar, bottom bar, and theme.

We'll move on to customizing the home screen of the app. Click on the “Home” tab next to "Theme Settings" to edit the home page layout. A blank home screen layout with only the app bar and bottom bar is displayed. Let us start filling the contents inside it.

Adding a new page- On the "Add Page" button to your left next to the home screen layout, you'll find the 'home' tab as default. Click the edit icon on its side. In the "Edit Page" popup that opens, change the page name from "home" to "RUNNING". Ensure that the "Add As A New Page In Home" toggle is ON. Click on 'Submit' when done.

Add new pages to the app through the "Add Page" popup. In it, type the page name and click on "Submit". Add new pages 'ORIGINAL', 'FOOTBALL', and 'TRAINING' to the app layout as shown in the preview below.

Let's start adding content to the "RUNNING" page. Click on it. Now, the home screen of the "RUNNING" tab is visible.

Swipecart comes loaded with pre-made widgets that you can drag and drop to the draft app page layout. Let's see how to do this-

Single Banner- To add a single banner to the app layout, select "Single Banner" from the widget library drop-down. Select any among the displayed variants. Drop it to the draft app page layout. Click here to know more.

To add the image and link to the widget, hover over it and you'll find the 'Add/Edit Content' option. Click here to see how to use this option. Once done, you'll find the 'Edit Style' option to customize the banner's look. Click here to know how to use this option.

Here's the preview of the single banner placed on the "RUNNING" page of the home screen in the Adidas app. Notice the "ORIGINALS", "FOOTBALL", and "TRAINING" tabs on the app's home screen.

Similarly, we keep adding single banners to the "RUNNING" tab and linking them with products or collection categories.

To add content to the "ORIGINALS" tab, spot it below the "Add Page". Click on it. You'll get a blank screen with only the app bar and bottom bar. Start placing single banners on it just as you did for the "ORIGINALS" page. Repeat the same process for the other tabs, "FOOTBALL" and "TRAINING".

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

That's it. You are done creating an app like Adidas using Swipecart. Here's the final preview of your app.