How to create an app like Americanas

Install and activate Swipecart. It is available as a Shopify app and WordPress plugin.

Once you are in the Swipecart dashboard, click on "Layouts" in the left menu.

Click on the "Create Layout" icon to create a new layout from our Americanas app.

Clicking on “Create Layout” will open a popup.

We'll type the layout name as Americanas. Click on "Create".

Now, Swipecart gives you two options. One is to select an empty layout. Another is to select a layout theme from different ready-to-use templates. Since we have to customize the layout to look like the Americanas app, we choose a blank layout. Click on "Create Layout" after selecting the blank layout icon.

A blank layout has now been created with the name "Americanas". Let's start customizing the app now.

You’ll be taken to your layout dashboard with the default tab as “Theme 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.

Let's start with the app bar. Select "App Bar Settings" from your Americanas layout's left menu.

You can modify the app bar color, font color, bottom radius, and elevation. Enable/disable the visibility of the cart, favorite, notification, and search icons on the app bar. For our Americanas app, we have disabled the notification and favorite icons. Upload the logo image or title text. Align its position on the app bar.

Note: Ensure the uploaded logo image matches the requirement mentioned on the screen.

Next, customize the look of the side menu, bottom bar, user profile page, and input (welcome/sign-in page). It is simple. For all these, go to the respective tabs on the left menu, select an option from the available ready templates and update it to the app.

Now, let's move on to customizing the theme of the app. Click on "Theme Style Settings" in your Americanas layout's left menu. Here, we can edit some of the theme settings such as font style, scale, and color. You can even set the app's primary color and background color from the color picker. Upload the Americanas brand loader GIF and when you are done with customizing the theme, save and update.

Here's the mobile app preview after customizing the app loader and the bottom bar.

The next task is to customize the home screen of the app. Click on the “Home” tab to edit the home page layout.

In this tab, a blank home screen layout with only the app bar and bottom bar is displayed. Now, you have to start filling content inside it.

Swipecart has a widget library consisting of UI components in visual form. Let's see how to access this widget list, add them to the app's home screen, and fill them with content.

Locate a drop-down box to the top right next to the home screen layout. Click on the drop-down icon. The widget list is displayed here. You can click on any widget to start working on it.

For the Americanas app, we start by adding a carousel banner. Select "Carousel Banner" from the drop-down widget list. Soon, you'll see different styled carousel banner variants displayed below the drop-down box. Select one for your app. Drag and drop it into the home screen.

To add content to the carousel banner, hover the mouse pointer over the dropped widget. Locate the "Add/Edit Content" option right next to the widget. Click on it to open an "Add Carousel Banner" screen. See to it that the "Internal Linking" option is checked. Select the collection tab and click on the relevant collection category in the drop-down list to link the banner image. Now, click on the upload icon to open an image for the widget specific to the selected collection category. Click on "Add". The image is added to the carousel banner and gets linked to the selected collection category. Repeat the same process until you've added sufficient images for your carousel banner widget. Save and update.

To customize the look of the carousel banner widget, hover over the widget. This time, spot the "Edit Style" option below the "Add/Edit Content". Clicking on it will open a popup screen. Make changes to the widget style such as radius, padding, container padding, image position inside the container, title alignment, background color or image, indicator variant, etc. We have opted for the round indicator variant. A preview of the changes you do is available to the right of the popup. Save the changes before you exit the screen.

This is the Americanas app with the added carousel banner.

We'll add a single banner to the app's home screen. Select "Single Banner" from the widget drop-down list. For this app, we select a banner with an aspect ratio of 2.7:1. Drag and drop it inside the home screen layout below the carousel banner.

Let's add an image to the banner container. Hover over the dropped widget until you spot "Add/Edit Content". Clicking on it will open a "Custom Image Banner" popup. Check the "Internal Linking" option. Click on the Collection tab and then on the drop-down list. Select the collection category to be linked to the banner image. Next, click on the upload icon. A window will pop up prompting you to open the image from your local drive. Open the relevant image and click on "Save Banner". The image is now added to the single banner. When a user clicks on it, they are taken to its relevant collection category page.

Note: Ensure that the size of the uploaded image and the aspect ratio mentioned in the single banner widget are the same.

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

Next, we add a collection slider to the app's home screen. Select "Collection Slider" from the drop-down list. We select a square collection slider with title and radius from among the different styles. Place it below the single banner on the home screen.

To add content to it, click on the "Add/Edit Content" option. A "Collection Slider" popup opens. Click on the drop-down list in the "Select Collection" tab. Select the collection category and click on "Add". Repeat the same process to add collection category images to the slider. Save when done.

To customize the style of the collection slider, click on "Edit Style". Modify the various styling parameters such as radius, container padding, image position inside the container, adding a background image or color to the slider box, etc. Save and update the changes to the app.

To learn more about styling widgets, click here.

The Americanas mobile app with the added collection slider looks as in the preview below.

Let's add products to the home screen in a slider format. Select "Product Slider" from the drop-down widget list. Select any slider style. Drag and drop it into the home screen.

To add products to the slider, click on "Add/Edit Content". In the "Product Slider" popup, select the product tab. Click on the drop-down list and select the product you want to add to the slider. Click on "Add". Repeat the process to add relevant product images to the slider. We have added a title to the widget. Save when you complete the task.

To customize the product slider, hover over the widget and click on "Edit Style". A popup screen opens wherein you can edit some styling parameters. Here, we have disabled the visibility of the add to cart button and favorite icon on the product slider. We'll also not be showing the additional product button or the "See More/View All" text. Modify the container radius and padding. Save when done.

This is the mobile preview of the Americanas app with the added product slider. Notice that we have given the title to the product slider "Most Viewed Products in Americanas". Similarly, you can give any attractive relevant titles to engage your customers.

Similarly, keep adding products with engaging titles and offers using the "Product Slider" widget on Swipecart.

You can add products in slider or grid format. Continue to use different widgets to add category collections, products, and banners.

That's it to create an app like Americanas. Here's a final look at the app built using the no-code app builder Swipecart.