How to create an app like Overstock

Install Swipecart to start using it. It is available on the Shopify app store and WordPress plugin center. You'll be taken to your admin after signing up for Swipecart.

Click on "Layouts" in the left menu of your Swipecart dashboard.

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

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

Here, Swipecart allows you to choose between pre-made layout templates and a blank layout. Since we need to design an app like Overstock, we choose "Blank Layout". Now, click "Create Layout."

A blank layout with the name Overstock is formed. For more details about creating layouts on Swipecart, click here.

You'll be taken to the Overstock layout dashboard with the default tab as "Theme Settings" and the sub-tab as "App Bar Settings". Basically, the theme settings allow you to set the theme and customize it for your brand.

App Bar Settings: Set your branding element on the app bar or the action bar because it stays on the top throughout all pages of your app. Here, we upload the Overstock logo to customize the app bar. For more details on app bar settings, click here.   

We then go to Side Menu Settings, Bottom Bar Settings, Profile Page Settings, and Input Style Settings. Here, we select our choice from the style variants and save it to the app.

Theme Style Settings: In this section, we set the theme for the app. The changes made here are reflected throughout the app.

Here, we can change some of the styling parameters for the app's theme such as app background color and font style & color. 

Click here to learn more about theme style settings on Swipecart. 

Here's the draft app with theme customizations completed to match the Overstock app.

Next, we move on to designing the Overstock app home screen. Click on the "Home" tab. A blank home screen is displayed with only the app bar and bottom bar.

We add content to the home screen by dragging and dropping style variants of widgets. These are accessible in the drop-down box panel at the right section of your screen.

Click here for more information about widgets on Swipecart.

Adding a new page: To add a new page to the home screen, click "Add Page". Enter the page name "LATEST OFFERS" on the popup. Click on "Submit". A new tab is created on the home screen.

To edit the name of the existing "Home" page, hover over it and click on the edit icon. Rename it from "Home" to "SHOP BY".

For more information on adding pages, click here.

Search: Let's start populating the "LATEST OFFERS" tab on Overstock. Let's insert a search bar into it.

Click on the widget drop-down list and select "Search" on it. Drag and drop the displayed search bar inside the app screen layout below the app bar. Hover over the search bar and click on "Edit Style" to customize the search bar.

For more information on the search bar, click here.

Here is the app preview of the search bar added to the "LATEST OFFERS" tab on the Overstock app.

Carousel Banner: These are banners in rotating or slideshow format. You can add diverse information in them ranging from offers, product-specific discounts, new launches, and many more.

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

For more details on carousel banners, click here.

To add images to the carousel banner, hover over it and click on "Add/Edit Content". In the popup that opens, add images and link them to relevant products, collection categories, other app pages, or external website links.

Click here for details about adding and editing content on widgets.

To set the styling for the carousel banner, hover again over it and click on "Edit Style". In the popup that opens, set the styling parameters to suit the app theme.

Click here for details on styling widgets.

Here's the mobile preview of the draft Overstock app with the carousel banner on it.

Collection Slider: A collection slider works best to display various collection categories in a slider format so that it's easy for your customers to simply click on a category of their choice.

Select "Collection Slider" from the widget list. Place a square collection slider inside the home screen of the app.

Click here to learn more about collection sliders on Swipecart.

Add categories to the slider from the collection list through the "Add/Edit Content" option. Give an engaging title to the widget. Set the styling elements for the slider through the "Edit Style" option.

Here's the app preview with the added collection slider in it.

Product Slider: We can display products in a slideshow format similar to the above collection slider. Make use of Swipecart's AI-based product recommendation to display products that your customer may like increasing the chances of sales.

To display specific products on the home screen, select "Product Slider" from the widget list. Place one among the style variants inside the home screen.

Click here for information about product sliders on Swipecart.

Add products to the slider from the product list through the "Add/Edit Content" option. Set the styling elements for the slider through the "Edit Style" option. You can preview the changes in the popup itself.

Have a look at the product slider added to the mobile app.

Add one more product slider to the app. Repeat the process as mentioned above. Don't forget to add an engaging title to the widget.

Single Banner: It is used to highlight attractive schemes like discounts, sales, new product launches, or flash deals on the app.

Select "Single Banner" from the widget list. From among the different style variants offered by Swipecart, select one and place it on the app's home screen.

Click here for detailed information on single banners.

Adding an image to a single banner is similar to that of a carousel banner. Link it to a relevant product or collection category. Add a title to the widget based on the image and its content.

Customize the single banner through the "Edit Style" option to suit the app theme.

Design your app on Swipecart easily and fast. Creating an app like Overstock takes a few minutes.

Have a look at the Overstock app preview here.

Once you are done adding content to the "LATEST OFFERS" tab, it is time to populate the "SHOP BY" tab by adding relevant widgets as explained above. Complete adding collection categories, products, and banners to the tab.

Explore other widgets including banner grid, banner slider, collection grid, product grid, product list, and timer to add to the Overstock app.

Here's the final Overstock app we have designed on Swipecart.