How to create an app like Amazon

Once you activate and sign up for Swipecart, you'll be taken to the dashboard. Let's start by creating a layout for the app. Click on the "Layouts" option on the left menu.

Click on the “Create Layout” icon to create a new layout.

Clicking on “Create Layout” will open a popup. Let's give a name to the layout.

Since we are creating an Amazon app, we have named the layout "Amazon". Click on the "Create" button to continue.

Next, it'll ask you to choose a layout. Here, you have two options. Swipecart already has various amazing ready themes to choose from. Else, you select a blank layout to customize the app. For this Amazon app, let's choose "Blank Layout".

Note: Even if you select a ready theme, Swipecart still allows you to customize the app for your branding purposes.

You’ll be taken to your Amazon layout dashboard with the default tab as “Theme Settings”.  The primary function of “Theme Settings” is to customize the theme of your app. It has multiple options to set branding elements for your app.

Let's start our customization process with the app bar. For this, click on the "App Bar Settings" on your layout's left menu.

Here, you change the app bar color, font color, app bar bottom radius, and elevation. You can enable/disable the visibility of search, favorite, cart, and notification icons in the app bar. We have enabled the cart icon to appear on the app bar of the Amazon app. Upload the logo image or enter the logo in text format. Adjust its alignment. Save the changes.

Next, let's customize the bottom bar of the app. To do this, click on "Bottom Bar Settings" in your layout's left menu.

Swipecart gives you different variants for the bottom bar. Select a variant of your choice for the app and click on "Save". The bottom bar is added to the Amazon app.

Similarly, customize the look of other features of your app. Swipecart has picklist options for the app's side menu, profile page, and input page settings. You have to select one and save the changes.

Let's move to customize the app's theme settings. Click on "Theme Style Settings" in the left menu.

Here, change the font style, color, and scale for your theme. The changes will be reflected throughout the app where the theme is visible. Also, upload the Amazon brand loader GIF here in this section. The specifications for the GIF file are specified. Save and exit.

The app with the customized app bar, bottom bar, and theme style looks as in the image below.

Now that we are done with the theme styling, let's start filling content inside the Amazon app's home screen. Click on the "Home" tab in the top menu next to "Theme Settings". You'll get an empty home screen layout with the customized app bar and bottom bar. Now, let's fill the home screen with products and collection links in the form of banners, sliders, and grids.

You don't have to write codes for it. Swipecart has already pre-coded these blocks into visual components called widgets. You have to place it inside the app layout with a drag-and-drop editing tool. We'll see how to do it here.

Let's first insert a search bar on the home screen. To do this, go to the drop-down box located to your top right just next to the home screen layout. Click on the drop-down icon. Here, you get access to Swipecart's widget library. From this, click on the "Search" option. A search bar widget is displayed below the drop-down box. Drag and drop this on the home screen layout.

Let's edit the style of the search bar such as radius and padding. Hover your mouse pointer over the dropped search bar. Spot the "Edit Style" option that appears on the right side. Click on it to open the Edit Style popup screen. Now, here, you have the option to enable/disable the visibility of search and voice search (mic) icons. We have enabled the search icon to be visible on the search bar. Once done, save the changes. Then, click on "Update" to update the home screen layout.

The Amazon app home screen with the search bar now looks like this.

Now, let's display a collection slider just below the search bar. For this, go to the drop-down list again. This time, select the "Collection Slider" option. Different variants of collection grids are displayed just below the drop-down box. We have selected a square collection grid. Drag and drop this collection grid widget into the home screen below the search bar.

To add images to the collection slider, hover the mouse pointer over the dropped widget. Spot the option "Add/Edit Content" to the top right, next to the widget. Click on it to open a "Collection Slider" popup screen. Give a name to your collection slider.

Next, click on the drop-down icon in the "Select Collection" tab. It'll display the collection list fetched from your e-commerce store. Select a collection category to be displayed on the slider and click on "Add". This collection category image is now added to the slider. Repeat this process to add more categories to the square collection slider. Save the changes when done.

Click here to know more about how to add content to your widget using Swipecart.

Swipecart allows you to customize your collection slider widget. To do this, hover the mouse pointer over the dropped widget. This time, spot the "Edit Style" option sandwiched between "Add/Edit Content" and "Remove Block". Click on it to open the "Edit Style" popup. Here, you can adjust the padding of the image inside the container. You can also add a background image or color to the slider. Adjust the image orientation inside the container. Save the changes and exit.

Click here to know more about how to edit the style of the widget using Swipecart.

Here's the mobile preview of the Amazon app with the collection slider added to it.

Let's add a carousel banner to the home screen. Select "Carousel Banner" from the drop-down list. Banners of different sizes are displayed below the drop-down box. Select one from among the options and place it below the collection slider.

To add images to the banner, hover over the dropped widget to spot the "Add/Edit Content" option. Hover over the dropped widget and spot the "Add/Edit Content" option. Clicking on it will open an "Add Carousel Banner" popup. See that the "Internal Linking" option is checked. Now in the Product tab, click on the drop-down list and select the product whose image will be uploaded to the carousel banner. Click on the upload icon to open a file window. Open the image from your system to upload it. Click on "Add". Now the uploaded banner image gets internally linked to the selected product from the Product tab. When a user clicks on the banner, they are redirected to the selected product page in the app. Repeat the process of selecting products from the product list and uploading relevant banner images. Click on "Save Banner" to save the images to the carousel banner. Update the changes to the app by clicking on the "Update" button at the top-right corner of your layout dashboard.

Next, if you want to customize the carousel banner, hover over it again and click on "Edit Style". Here, edit the padding and radius of the banner image and even the padding of the banner. Next, you can adjust the image position inside its container. Add an image or background color with the color picker. Adjust the title alignment and font color. If you enable an indicator for the carousel banner, you can select one style from among the given variants. And while you are editing the changes, you can preview them to your right on the popup screen. Save when done and exit the screen.

Now, we have completed adding a carousel banner widget to our app.

Swipecart also allows you to add banners in a grid format. Select "Banner Grid" from the drop-down list. Select a banner style from among the various options. We have selected a "Square banner with radius". Place it below the carousel banner.

To add images to the banners, hover over the dropped widget and click on the "Add/Edit Content" option. A "Banner Grid" popup opens. See that the "Internal Linking" option is checked. Click on the upload icon to open a file window. Open the image from your system you want to add to the banner grid. It gets uploaded. Now in the Product tab, click on the drop-down list and select the product relevant to the uploaded image. Click on "Add". Now the uploaded banner image gets internally linked to the selected product from the Product tab. When a user clicks on the banner, they are redirected to the selected product page in the app. Repeat the process of selecting products from the product list and uploading relevant banner images. Save the changes.

Next, if you want to customize the banner grid, hover over it again and click on "Edit Style". Here, edit the padding and radius of the banner image and even the padding of the banner. Next, you can adjust the image position inside its container. Add an image or background color with the color picker. We have added a background color to the grid. Adjust the title alignment and font color. If you enable an indicator for the banner grid, you can select one style from among the given variants. And while you are editing the changes, you can preview them to your right on the popup screen. Save when done and exit the screen.

Here's the mobile preview of the Amazon app with the added banner grid.

Let's add a single banner to the app's home screen. Select "Single Banner" from the drop-down menu. Select one from among the various banner style options. We have selected a banner with an aspect ratio of 2.7:1. Drag and drop the selected widget into the home screen layout.

Let's add an image to the banner. Hover over the widget and click on "Add/Edit Content". The "Custom Image Banner" popup opens. See that the "Internal Linking" option is checked. Click on the upload icon. Select any image from the system. The image gets uploaded. Next, click on the "Collections" tab, and click on the drop-down icon. Select any collection relevant to the uploaded image. Click on "Add". The collection category gets linked to the banner image so that when a user clicks on it they are redirected to the selected category page on the app. Click on "Save Banner" and exit.

Note: Ensure that the uploaded image size matches the aspect ratio mentioned on the widget.

Now, let's customize the banner style. Hover over the widget and click on "Edit Style". In the popup that opens, adjust the container padding or the image style inside the container. Enable box-shadow if necessary. Add a background color or image. Save the changes when done.

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

Let's add another single banner to the amazon app home screen. Select "Single Banner" from the drop-down widget list. This time, we select a banner with an aspect ratio of 1.6:2. Place it on the home screen.

Let's add an image to the banner. Hover over the widget and click on "Add/Edit Content". In the popup that opens see that the "Internal Linking" option is checked. Next, click on the upload icon and select an image for the banner. Now, in the Products tab, click on the drop-down list. Select a product relevant to the uploaded image. Click on "Add". The product gets linked to the banner image so that when a user clicks on it they are redirected to the selected product page on the app. Click on "Save Banner" and exit.

Note: Ensure that the uploaded image size matches the aspect ratio mentioned on the widget.

Now, let's customize the banner style. Hover over the widget and click on "Edit Style". In the popup that opens, adjust the container padding or the image style inside the container. Enable box-shadow if necessary. Add a background color or image. Save the changes when done.

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

Next, we add a banner grid to the home screen layout. Select "Banner Grid" from the widget list. We select a "square banner with radius" from among the variants. Place it on the home screen.

To add content, hover over the widget and open the "Add/Edit Content" popup. See that the "Internal Linking" option is checked. Let's give the title to the widget "Pocket-friendly stores". Next, click on the upload icon and open an image to upload to the banner. Select a category collection from the "Collection" tab. Click on "Add". The collection category gets linked to the banner image so that when a user clicks on it they are redirected to the selected category page on the app. Repeat the same process to keep adding images and link them to their specific collection categories. Save and exit.

To set the styling elements for the grid, hover over it and click on "Edit Style". In the "Edit Style" popup, set the style customizations.

Here's the mobile preview for the Amazon app with the added banner grid.

We add a single banner to the app again. Select "Single Banner" from the drop-down widget list. Place any variant you like on the home screen. For our app, we have selected a single banner with an aspect ratio of 1.7:1.

Let's add an image to the banner. Hover over the widget and click on "Add/Edit Content". In the "Custom Image Banner" popup that opens see that the "Internal Linking" option is checked. Next, click on the upload icon and select an image for the banner. Now, in the Products tab, click on the drop-down list. Select a product relevant to the uploaded image. Click on "Add". The product gets linked to the banner image so that when a user clicks on it they are redirected to the selected product page on the app. Click on "Save Banner" and exit.

Note: Ensure that the uploaded image size matches the aspect ratio mentioned on the widget.

Now, let's customize the banner style. Hover over the widget and click on "Edit Style". In the popup that opens, adjust the container padding or the image style inside the container. Enable box-shadow if necessary. Add a background color or image. Save the changes when done.

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

We now add a product grid to the Amazon app home screen. Select "Product Grid" from the drop-down widget list. From the available options, select one, drag it, and drop it inside the home screen layout.

To add products to the grid, hover over it until you spot the "Add/Edit Content" option. In the popup that opens, click on the Product tab. In the drop-down list, select a product you want to display on the grid and click on "Add". The product image gets added to the grid. Repeat this process to add products to the grid. We have given a title to the grid as "Clothing, footwear, and more". Save when done.

To customize the grid style, hover over the widget and click on "Edit Style". Adjust the radius and padding. Next, you can enable/disable the visibility of product title and price as well as that of add-to-cart and favorite icons. For our Amazon app, we have disabled the visibility of favorite and cart icons. You can also add a "See More/View All" text variation in your product grid if you enable the additional products button. Click on "Save" when done.

Here's the mobile preview of the Amazon app with the added product grid.

We now add a single banner to the app. Select "Single Banner" from the widget list. Select the 1:1 single banner and place it on the home screen.

Hover over the dropped single banner widget and spot the "Add/Edit Content" option. Click on it to open the "Custom Image Banner" popup. Give an attractive name to the widget. See that the "Internal Linking" option is checked. Next, click on the upload icon and select an image for the banner. Now, in the Products tab, click on the drop-down list. Select a product relevant to the uploaded image. Click on "Add". The product gets linked to the banner image so that when a user clicks on it they are redirected to the selected product page on the app. Click on "Save Banner" and exit.

Note: Ensure that the uploaded image size matches the aspect ratio mentioned on the widget.

Now, let's customize the banner style. Hover over the widget and click on "Edit Style". In the popup that opens, adjust the container padding or the image style inside the container. Enable box-shadow if necessary. Add a background color or image. Save the changes when done.

Click here for more details on how to design your app on Swipecart.

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

Next, we add a product slider to the Amazon app. Select "Product Slider" from the drop-down list. Select the slider you want and drop it inside the home screen.

The next step is to add product images to the slider. Click on "Add/Edit Content". In the popup that opens, click on the Product tab. Here, select the product you want to add from the product drop-down list. Click on "Add". The product image is now uploaded to the product slider. Add more products to the slider by repeating the same process each time. You can also add a title to the slider. For the Amazon app, we have named it "Budget-friendly Stores". Finally, click on "Save" to save the product images in the slider.

Swipecart allows you to customize the style of the product slider. Hover over the dropped product slider on the home screen and click on "Edit Style". In the popup that opens, you have various styling parameters that can be edited to suit the branding requirements. Adjust the radius and padding. Add a background image or color to the slider container. We have added a background color to the slider. Enable/disable the visibility of product title and price or that of favorite and cart icons. For our app, we have disabled the visibility of favorite and cart icons. Save and exit.

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

Here is the final look of the Amazon app.