September 14, 2022

How to create an app like Americanas

Americanas is a dominant retail and e-commerce player in Brazil launched by the brick-and-mortar retail chain Lojas Americanas. It serves as a distribution platform similar to Amazon. It sells around 137 million items from over 120,000 third-party vendors. It gets an estimated monthly visitors of 135 million on its online platform. Its app on the Google Play Store has more than 50 million downloads.

Can we create an app like Americanas? Is it necessary to have coding skills to create apps? With Swipecart, a no-code app builder you can create apps for your e-commerce stores easily and fast. As the name suggests, you don’t have to write a single line of code to create an app like Americanas with Swipecart.

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.

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

    create an app like Americanas
  • Clicking on “Create Layout” will open a popup.

    create an app like Americanas
  • We'll type the layout name as Americanas. Click on "Create".

    create an app like Americanas
  • 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.

    create an app like Americanas
  • 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.

    create an app like Americanas
  • 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.

    create an app like Americanas
  • 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.

    create an app like Americanas
  • Here's the mobile app preview after customizing the app loader and the bottom bar.

    create an app like Americanas
  • 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.

    create an app like Americanas
  • 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.

    create an app like Americanas
  • 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.

    create an app like Americanas
  • 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.

    create an app like Americanas
  • This is the Americanas app with the added carousel banner.

    create an app like Americanas
  • 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.

    create an app like Americanas
  • 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.

    create an app like Americanas
  • Here's the mobile preview of the Americanas app with the added single banner.

    create an app like Americanas
  • 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.

    create an app like Americanas
  • 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.

    create an app like Americanas
  • The Americanas mobile app with the added collection slider looks as in the preview below.

    create an app like Americanas
  • 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.

    create an app like Americanas
  • 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.

    create an app like Americanas
  • 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.

    create an app like Americanas
  • 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.

    create an app like Americanas
  • Similarly, keep adding products with engaging titles and offers using the "Product Slider" widget on Swipecart.

    create an app like Americanas
  • 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.

We hope you enjoyed creating an app like Americanas. Swipecart makes it easy, fast, and fun to create apps for your e-commerce stores. If you have any queries regarding how to create apps on Swipecart, we'll be glad to assist you.

In the meanwhile, you can watch this beginner's tutorial. Subscribe to Swipecart now to get the most out of your online business.

To know more about how to create apps with Swipecart, watch this video.

Swipecart, the best no-code app builder is your go-to solution to create apps easily and fast. So, when are you planning to build an app for your e-commerce store with Swipecart?