How To Create An App Like Wish

The first step to building any app is to create its layout. To do this, go to your Swipecart dashboard. Now click on “Layouts” in the left menu.

Now, click on the "Create Layout" icon to create a new layout.

A "Create Layout" popup opens.

Enter your layout name "Wish" or any other name and click on the "Create" button.

In the "Choose Layout" screen, select the blank layout option. Swipecart has many ready-to-use templates for your app layout. But since we are creating an app like Wish, let's go with the blank layout for now. Click the "Create Layout" button to create a blank layout.

You’ll be taken to your blank layout dashboard with the default tab as “Theme Settings” and the sub-tab as "App Bar 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 by customizing the app bar.

In the "App Bar Settings" 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. We have disabled the visibility of all the icons for the Wish app. Upload the logo image or title text. Align its position on the app bar. Click on "Save" before you exit.

Note: Click on "Save" wherever it is given before you exit the screen or tab so that the changes are saved to your layout.

Next, customize the look of the side menu, bottom bar, user profile page, and input (welcome/sign-in page). For all these, go to the respective tabs on the left menu. A set of readymade templates are available for each. Select an option from the variants and update it to the app.

Let's customize some of the theme elements now. Click on "Theme Style Settings" in your app layout's left menu. Here, 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 Wish brand loader GIF and when you are done with customizing the theme, save and update.

Here's the mobile preview of the Wish app with the customized app bar and bottom bar.

We'll move on to customizing the home screen of the app. Click on the “Home” tab next to "Theme Settings" to edit the home page layout.

In this tab, a blank home screen layout with only the app bar and bottom bar is displayed. Let us start filling the contents inside it.

Filling contents inside the layout is easy with Swipecart. It has visual UI components called widgets. You have to drag and drop them into place inside the layout with a drag-and-drop editing tool. Let's see how we can accomplish this to design our Wish-like app.

Click hereto know more about the widgets and their function.

Locate a drop-down box to the top right of your layout dashboard just next to the blank layout. Click on the drop-down icon and you'll see a widget list containing names such as Collection Slider, Product List, Search, Carousel Banner, etc. This is Swipecart's widget library or list. Let's start with the Search widget. Click on "Search" in the list.

A search bar is displayed below the drop-down box. Drag this and drop it inside the blank home screen layout just below the app bar.

Hover your mouse over the dropped search bar in the layout to open the “Edit Style” option. Edit the style of the search bar such as radius and padding. You can enable/disable the visibility of the search and voice search (mic) icon on the search bar. For our Wish app, we have enabled the search icon. Click on “Save” and exit.

So, here's a mobile preview of the Wish app with the search bar we just added to the home screen layout.

Next, we start adding banners, sliders, and grids into the home layout. Let's add a collection slider. Select "Collection Slider" from the drop-down widget list. Different variants of the collection slider are displayed below the drop-down box. Let us select a "round collection slider with title" for our Wish app. Drag and drop it inside the layout below the search bar.

To add content to the slider, hover over the dropped slider widget and spot the "Add/Edit Content" option next to the home screen. Click on it to open a "Collection Slider" popup. Add a title to the collection slider if you want. Click on the drop-down icon under "Select Collection". Your collection category list opens. It is fetched from your e-commerce store. Click on the category that you want to display on the slider. Then, click on "Add". The category is now added to the slider. Repeat this to add more categories to the collection slider. Click on "Save" when done and exit the popup.

Click here for a detailed tutorial on adding and editing content into the widget.

Now, if you want to customize the look of the collection slider, hover over the widget again. This time, spot the "Edit Style" option and click on it. An "Edit Style" popup opens. On this popup, you have options to edit the radius and padding of the images inside the slider container. You can also adjust the image orientation. Add a background image or color to the slider container. Adjust the title alignment inside it and the font color. Click on "Save" when done.

Click here to know more about how to style widgets on Swipecart.

Here is the mobile preview of the Wish app with the collection slider.

Next, we add a carousel banner inside the home screen. Select "Carousel Banner" from the drop-down list. Different styles of carousel banners are displayed below the drop-down box. Select any from among the choices and place it on the home screen below the collection slider. Here, for the Wish app, we have selected a carousel banner with an aspect ratio of 1.5:1.

It's time to add content inside the carousel banner. 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.

Here is the preview of the Wish app with the carousel banner widget.

Next, let's add some products to the home screen. From the drop-down widget list, select "Product Grid". Select any style in the product grid widgets displayed. Place it inside the home screen of your Wish app.

Let's add images to the product grid. Hover over the dropped grid and click on "Add/Edit Content" to open a "Product Grid" popup. On it, in the Product tab, click on the drop-down list and select a product that you want to add to the grid. Click on "Add". The product image gets uploaded to the grid. Repeat the process to keep adding products to the grid. Finally, click on "Save" before you exit the screen.

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 Wish 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.

Below is the mobile preview of the Wish app with the product grid.

We now add a product slider to the home screen. Select "Product Slider" from the widget list. Pick any product carousel slider style from the displayed variants. Drag 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 Wish app, we have named it "Most-wanted on Wish". 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. Enable/disable the visibility of product title and price or that of favorite and cart icons. For our Wish app, we have disabled the visibility of favorite and cart icons. Save and exit.

Below is a preview of the Wish app with the product grid and slider below it.

Below the product slider, let's add a collection grid to the app. Select "Collection Grid" from the drop-down list. We select a 3x3 round collection grid from the available different styles. Place it inside the home screen layout.

To add categories to the grid, hover over the dropped collection grid widget. Spot the "Add/Edit Content" option to your right just next to the widget. Click on it. A "Collection Grid" screen opens. Click on the drop-down list in the "Select Collection" tab. You will see a list of collection categories fetched from your e-commerce site. Select the category you want to add to the grid. Click on "Add". The collection category image with the internal link is uploaded to the grid. Repeat the process to complete adding categories to the grid. Since we have selected a 3x3 grid, you must add collection categories in multiples of three to the grid. Give a title to the grid. Here, we have named it "Let's help you find something". Save and exit.

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

Next, we edit the style of the collection grid. Hover over the widget and click on "Edit Style". A popup screen opens. Here, edit the radius and padding of the images inside the container. Add a background image or color to the grid. Adjust the image position inside its container. Also, you can align the title as well as change its color. Save when you are done editing the grid style.

Look at the mobile preview below and spot the collection grid we have recently added to the Wish app's home screen.

Next, we add a product grid to the home screen. The process is almost similar to all the widgets. Adding contents or editing the style of these widgets remains the same.

This comes to the end of our "How to create an app like Wish" tutorial. Here is the final look of the app we built with Swipecart.