How to create an app like Wayfair

In the Swipecart admin, click on "Layouts" in the left menu.

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

Clicking on “Create Layout” will open a popup. Enter the layout name "Wayfair" and click on "Create".

You have to choose a layout for the app. You can select from different ready-to-use themes. But since we have to design an app like Wayfair, we go with a "Blank Layout". Click on "Create Layout".

A blank layout for your Wayfair app is now created. To know more about creating layouts on Swipecart, click here.

You’ll be taken to your layout dashboard with the default tab “Theme Settings” and the sub-tab "App Bar Settings". The primary function of “Theme Settings” is to customize the app's look.

App Bar Settings: The app bar stays at the top of the app screen always and it is necessary that you customize it to suit your brand. With Swipecart you can add titles and icons to it and also change the font and app bar color. For more information on app bar settings, click here.

To customize the side menu, bottom bar, profile page, and input style settings, click on them in the left menu. You'll be given different style variants for each. Select one that best suits the Wayfair brand app.

Theme Style Settings: In this section, set the theme styling parameters such as app color and font styles. The changes you make are carried forward throughout the app. Click here to know more about theme settings on Swipecart.

Here's the mobile preview of the Wayfair app with the customized theme, including the app bar and 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.

Swipecart has converted UI components into visual widgets. You have to choose one from the picklist style variant option and drag and drop it to place inside the home screen. Learn more about widgets here.

Search Bar: Let's start populating the home screen by placing a search bar. Click on the drop-down box next to the home screen. Select "Search" from the drop-down widget list. Drag and drop the search bar displayed just below the box inside the home screen.

For detailed information on the search bar, click here.

Here's a mobile preview for you to see the search bar we've placed just below the app bar on the Wayfair app.

Collection Slider: A collection slider allows you to show collection categories to your customers in a sliding format.

Select "Collection Slider" from the drop-down list. Different style variants are displayed below the drop-down box. Pick one and place it inside the home screen.

For more details about collection sliders on Swipecart, click here.

Hover the mouse pointer over the dropped collection slider widget and click on "Add/Edit Content". In the popup that opens, add collection categories from the collection list to the slider. Click here to know about adding content to any widget on Swipecart.

Again, hover over the widget and click on "Edit Style". In the popup that opens, set the styling parameters for the collection slider to suit the brand. Click here for information about styling widgets on Swipecart.

As seen in the mobile preview below, we have now successfully added a collection slider to the Wayfair app.

Carousel Banner: A carousel banner is nothing but sliding banners. You can add these to your app to engage customers.

Select "Carousel Banner" from the widget list. Place one among the style variants inside the home screen below the collection slider.

Click here for information about carousel banners on Swipecart.

Click on "Add/Edit Content" to add images to the banners and link them to relevant products, collection categories, other app pages, or external website links. Similarly, the "Edit Style" option lets you customize the style of the carousel banner.

Have a look at the carousel banner added to the Wayfair app. For more information about app design on Swipecart, click here.

Single Banner: A single banner is best to highlight information on the app such as a sale, offer, or reminder. Select "Single Banner" from the widget list. Place one inside the home screen layout. Click here for information about single banners.

As mentioned earlier, add an image to the single banner and link it to its specific product or collection category. Similarly, edit its style to suit the Wayfair brand.

Here's the mobile preview of the Wayfair app we have designed until now.

Product Slider: Next, we add some inspiring products on the home screen. For this, first place a product slider widget inside the home screen layout of the Wayfair app. Click here to know about product sliders on Swipecart.

Next, we add relevant products from the Product list to the slider. We also edit the style elements and save the changes.

Notice the product slider we have added to the Wayfair app below the single banner.

In this way, we design our Wayfair-like app. You can explore and add other widgets such as a product list, timer, product grid, collection grid, and banner slider.

Have a look at the final Wayfair-like app we have created on Swipecart.