How to create an app like Walmart

We will start by creating an app like Walmart on a blank layout. Log in to your Swipecart dashboard. On the left menu, click on "Layouts".

To create a new layout, click on the “Create Layout” Button.

Clicking on “Create Layout” will open a popup.

Since we are creating an app like Walmart, let's name the layout "Walmart". Click on the "Create" button.

You will have the option to choose a blank (empty) layout or select one from among the various default layouts. Choose "Blank Layout".

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

Let's first customize the app bar. For this, click on the "App Bar Settings" on the left menu of the blank layout.

In "App Bar Settings", Swipecart allows you to customize the app bar color, font color, bottom radius, and elevation. Enable/disable the search, cart, and favorite icon on the app bar. For this particular app, we have enabled only the cart icon on the App bar.

Another feature in this setting is to upload your branding element in the form of a brand title or logo.

Note: While uploading the image file, ensure it matches the mentioned specifications.

Let us start customizing the theme settings. For this, click on "Theme Style Settings" located at the end of the blank layout's left menu list. Here, Swipecart allows you to change the font style, scale, color, and even the app color.

Upload a GIF loader for your app here. Again, make sure that the file size meets the requirements mentioned in the section.

Save the changes by clicking on the "Save" button. You must save any changes you make for it to reflect on the app layout. Your Walmart app with the customized app bar and a bottom menu will now look as seen in the image below.

The next task is to customize the home screen of the app. To edit the home page layout, click on the “Home” tab next to "Theme Settings".

When you click on "Home", an empty home screen is displayed with only the app bar and the bottom bar. We now have to populate the home screen with banners of offers, collections, and products. Let's start it now.

First, let's add the search bar on the home screen below the app bar. To do this, go to the drop-down box located at the top right just next to the home screen layout. Click on the drop-down icon in it to view the list. Select "Search" from the drop-down menu list. A search bar is displayed below the drop-down box. Drag and drop this widget on the empty home screen.

Hover your mouse pointer over the dropped search widget until you spot the "Edit Style" option. Click on it to open an edit popup screen. Swipecart allows you to customize certain aspects of the search bar such as radius and padding. You can also opt on what to show to the customers on the search bar such as cart, search, favorite, and voice search mic icons. For our Walmart-like app, let's enable the cart icon and disable others.

So, here is the app with the app bar, bottom navigation menu, and search bar.

Let's add banners in a carousel format to the home screen. For this, select "Carousel Banner" from the drop-down list. Various styles of carousel banner UI components are displayed below the drop-down box. Select one among them of your choice. Now, pressed drag it into the home screen below the search bar. Once in place, release the mouse button to drop it there.

Let's add images to the empty carousel banner widget. Hover the mouse pointer over the empty widget until you see the “Add/Edit Content” option. This will open a popup. Add a title to it and start uploading images from the product collection. Save the changes when done.

Swipecart gives you the option to customize the style of the banner. Again hover the mouse pointer over the widget until you get the "Edit Style" option. Click on it to open a popup. Here, you can edit the padding, container padding, radius, font color, background color, and more. Notice that we have disabled the count indicator that otherwise appears at the bottom of the carousel banner. Save the changes and update the app layout preview.

The app with the carousel banner added to the home screen of your Walmart-like app appears as in the screenshot below.

Note: You can use these banners to display sponsored ads.

Let's add a single banner below the carousel banner. Select "Single Banner" from the drop-down menu. Pick one from the various different styles of single banner UI components displayed below the drop-down box. Drag and drop this onto a position on the home screen.

Again, hover over the widget until you get the “Add/Edit Content” option. Click on it to open a popup. Add a title and upload a banner from your collection file.

Note: Please ensure that the uploaded image size matches the aspect ratio mentioned on the selected single banner widget.

You can also modify some of the styling aspects of the single banner widget. To accomplish this task, hover over the widget and click on the "Edit Style" option. On the opened popup screen, you've options to modify some of the styling parameters for the single banner. Save the changes and update the app layout.

The Walmart-like app with the added single banner looks as in the screenshot below.

If you want to add a banner grid, select "Banner Grid" from the drop-down menu list. Select one from the various styles displayed. Drag and drop it into the home screen.

Again, to upload the banner images, hover over the widget and select the "Add/Edit Content" option. Now, start uploading the images from the collection. Save when done. To customize its styling, hover over the widget and click on "Edit Style". Make modifications to match your brand or website, save the changes, and update the app layout.

The single banner and the banner grid are now ready as seen in the image below.

Repeat the same above mentioned process to add as many banner grids as you want to the app's home screen.

Next, let's try adding a product slider to the app. Select "Product Slider" from the drop-down list. Click, drag, and release the product slider widget you want into the home screen.

To add products to the widget, hover the mouse pointer over the dropped widget and click on the "Add/Edit Content" option. On the opened popup screen, you have the option to select product images from your product list and upload them to the product slider widget. Save the changes.

To customize the product slider, hover over it and select "Edit Style". Here, you have various options to style the product slider. Make changes and update the app layout.

For more information on editing and styling widgets, click on this link.

We have kept the product name, price, favorite, and cart icon enabled here. Your app with the product slider inserted in it will now look like as below.

Again, you can add as many product sliders as you want with various titles as shown below. The main focus is to engage users on the app and attract them with offers.

Repeat the same process and keep adding product sliders, banner grids, and single banners.

Next, we'll add a carousel banner to the app's home screen. Select "Carousel Banner" from the drop-down list. Drag and drop a banner of your choice from the different styles displayed below the drop-down box.

Hover over the widget and select "Add/Edit Content". Give a title to the carousel banner and upload images from your collection. If you enable the "Internal Linking" option, it will take users to the specific collection page in your app when users click on the banner.

To edit styling elements of the banner, select "Edit Style". Here, we have enabled the indicator. So, the user will see three dots below the banner indicating the banner count. Clicking on any of the dots will display that banner.

The app will look as below after adding the carousel banner.

Continue using the "Carousel Banner" option and add as many banners as you want for the discounts, offers, combo offers, product collections, and others.

Explore each of the widget types in the drop-down menu list and see which works best for your app. You can keep adding these on your app's home screen to highlight various offers and products. The final look of our app like Walmart is here.