How to create an app like Decathlon International

Click on "Layouts" in the left menu on your Swipecart dashboard.

Next, click on the "Create Layout" icon to create a new layout.

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

Now, you can choose between pre-made layout templates and a blank layout. Since we need to design an app like Decathlon, we choose "Blank Layout". Next, click "Create Layout."

A blank layout with the name Decathlon International 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 theme settings allow you to customize the theme for your brand.

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 Decathlon 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 is the preview of the app with theme customizations done on the app design, including the app bar and bottom bar.

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 screen's drop-down box panel in the right section.

click here for more information about widgets on Swipecart.

Adding a new page: You have the Add Page section to the left of your app layout dashboard. Click on "Add Page". In the popup that opens, type the page name as "MEN". Click on "Submit".

To edit an existing page name, hover over the "Home" page and click on the edit icon. Rename it "WOMEN". You can adjust its position by dragging it down below the MEN tab.

The "Add Page" option allows you to create as many new pages as you want for your app. Similarly, we create new pages for our Decathlon International app. For more details on adding pages, click here.

Carousel Banner: Let's start adding content to the "MEN" tab. We first start with carousel banners. These are banners in rotating or slideshow format. You can add diverse information, including offers, product-specific discounts, new launches, and many more.

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

For more details on carousel banners, click here.

To add images to the carousel banner, hover over the widget and click on "Add/Edit Content". In the popup that opens, add images and link them to relevant products, collection categories, any other app pages, or external website links.

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

To set the styling for the carousel 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.

Here's the draft app preview after adding the carousel banner.

Product Grid: To highlight specific products on the home screen, select "Product Grid" from the widget list. Place one among the style variants inside the home screen.

Click here for information about product grids on Swipecart.

To add content to the product grid, click on "Add/Edit Content". Add relevant products from the product list to the grid in the opened popup.

Set the styling elements for the product grid through the "Edit Style" option.

Have a look at the draft app with the product grid widget used on the home screen.

Single Banner: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 on the app's home screen.

for detailed information on single banners. click here .

Add products to the banner from the product list through the "Add/Edit Content" option. Set the styling elements for the banner through the "Edit Style" option.

Design your app on Swipecart to easily gain traffic and boost customer engagement.

Here's the mobile preview of the Decathlon app with a single banner added to it.

We add another product grid to the app's home screen. Follow the process mentioned before to add the product grid widget and populate it with product images and links.

Banner Grid: Instead of displaying banners in slideshow format, you can also display them in a grid form. With this, customers can easily click on the link they want without having to wait for it 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.

To add content to the banner grid, click on "Add/Edit Content". In the opened popup, add all relevant collection categories from the collection list to the grid.

Set the styling elements for the banner grid through the "Edit Style" option. You can view the changes you make on the popup itself.

Have a look at the collection categories displayed with the help of a banner grid widget.

Product Slider:Highlight important products on the home screen in a slider format through the product slider widget.

Select your preferred product slider widget variant and place it on the app's home screen.

Click here to learn more about product sliders.

Add product images and links to the product slider through the "Add/Edit Content" option. Add an attractive title to the widget. Customize its looks through the "Edit Style" option.

Here's a preview of the product slider added to the app.

We continue adding relevant widgets to the app. Similarly, you can explore other widgets including the Search bar, Banner Slider, Collection Grid, Collection Slider, and Timer.

After completing the MEN tab, proceed to populate the other pages with content. Repeat the steps of selecting the appropriate widget and adding images and links to them.

Let's see the final Decathlon International app we have designed on Swipecart.