How to create an app like American Eagle

Install Swipecart to start using it. It is available on the Shopify app store and WordPress plugin center. You'll be taken to your admin after signing up for Swipecart.

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 "American Eagle". Click on "Create".

You'll have the option to select from ready-to-use layout themes or a blank layout. We select "Blank Layout" since we have to create an app like American Eagle. Click on "Create Layout".

A blank layout with the name American Eagle is formed. For more details about creating layouts on Swipecart, click here.

You'll be taken to the American Eagle layout dashboard with the default tab as "Theme Settings" and the sub-tab as "App Bar Settings". Basically, the theme settings allow you to set the theme and customize it 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 American Eagle 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 American Eagle app.

Next, we move on to designing the American Eagle app 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.

This feature is to add new tabs or pages to the home screen or any other screens in the app. Click on "Add Page" on the left of your screen.

A popup opens. Name the page "SHOP" and click on the "Submit" button.

A new page "SHOP" is created on the home screen. Click here to know more about adding pages on Swipecart.

Hover over the Home tab and click on the "Edit" icon.

In the popup that opens, rename the Home tab to "DISCOVER". Click on "Submit".

So, now you have two tabs on the home screen, "DISCOVER" and "SHOP".

Here's the mobile preview of the app with the DISCOVER and SHOP tabs on the home screen.

Carousel Banner: Let's start populating the DISCOVER tab now with a carousel banner. Through this, you can engage customers with deals on products.

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 content to the carousel banner, hover the mouse pointer over the 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.

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 open popup, set the styling parameters to suit the brand.

Click here for details on styling widgets.

Here's the preview of the draft app with the carousel banner on its home screen "DISCOVER" tab.

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 under the collection slider on the app's home screen.

Click here for detailed information on single banners.

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. During the editing, you can preview the changes you make on the "Edit Style" popup itself.

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

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

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

Click here for information about product sliders on Swipecart.

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

Design your app on Swipecart. You can easily create apps like The American Eagle to increase customer engagement and conversions.

So, here's the preview of the American Eagle app with the product slider added to it.

Repeat adding single banners and product sliders to design the "DISCOVER" tab. Similarly, populate the "SHOP" tab with widgets to complete creating an app like American Eagle.

Explore other widgets such as the search bar, banner grid, banner slider, collection grid, collection slider, product grid, product list, and timer to add to your e-commerce app.

Let's see the final app here.