How to create an app like Stockx

Let’s start with a layout for the app on Swipecart. On the dashboard after signing up, click "Layouts" on the left menu.

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

Clicking on “Create Layout” will open a popup. Type the name "StockX". Click on "Create".

Next, you can see different themed templates. But since we would like to build an app like StockX, let's get it done on a blank layout. Choose "Blank Layout" and click on "Create Layout".

A blank layout with the name StockX is created. Click here for information on creating layouts on Swipecart.

You’ll be taken to your layout dashboard with the default tab as “Theme Settings” and the sub-tab as "App Bar Settings". It is here we set and customize the theme as per the StockX app.

App bar settings - Here, we customize the look of the app bar. Apart from setting colors and uploading the logo, you can place the search, notifications, cart, and favorite icons

click here to know more about App Bar Settings.

Similarly, go to Side Menu Settings, Bottom Bar Settings, Profile Page Settings, and Input Style Settings. Select a style from among the variants displayed. Save it to your app layout.

Theme style settings- This section serves to customize the app theme. You can change the font and color styling parameters here. Also, upload the loader in this section. click here for more information on Theme Style Settings.

Have a look at the mobile preview of the app with the customized theme, app bar, and bottom bar.

Let's move on to the "Home" tab. Here, a blank home screen with only the app bar and bottom bar is displayed. It's time to place contents inside it.

To do this, Swipecart has pre-coded UI components into widgets. Drag and drop the widgets into your home screen and add content to it.

Carousel Banner: Let's add the carousel banner widget to the home screen. Click on the drop-down box next to the home screen layout. Select "Carousel Banner" from the widget list. Select one from among the different style variants. Drag and drop it inside the home screen. For more information on Carousel Banners, Click here.

The ‘Add/Edit Content’ option allows you to add images inside the carousel banner and link them to relevant collection categories or products. click here to know more about adding content to widgets on Swipecart.

Customizing the carousel banner style in Swipecart is done by clicking on ‘Edit Style’. In the popup, set the styling parameters to suit your branding. click here for more information on styling widgets.

Here's the preview with a carousel banner on the home screen of the StockX app.

Collection Slider: To add collection categories in a sliding format, select "Collection Slider" from the drop-down widget list. Place a variant of your choice inside the home screen below the carousel banner. click here to know about collection sliders on Swipecart.

Adding content to the collection slider is as easy as it can be. Hover over the widget and click on "Add/Edit Content". Select and add collection categories to the slider. The images get linked to the respective collection pages on the app.

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.

Customizing the collection slider style in Swipecart is done by clicking on "Edit Style". In the popup, set the styling parameters to suit your branding.

Here, have a look at the StockX mobile app preview with the collection slider added to it.

Product Slider: Similar to the collection slider, we can also display products in slider format. Select "Product Slider" from the drop-down widget list. Do you want to know more about product sliders? click here.

Click on "Add/Edit Content" and in the popup, you will be able to directly add products from your e-commerce store to the product slider in the app. Give a title to the widget. For example, here we have named it "Trending Sneakers".

Customize the look of the product slider by making changes to the style parameters.

Have a look at the StockX app with the added product slider widget below the collection slider.

Single Banner: Banners are effective for product promotion inside the app. They allow you to highlight important messages like sales and offers. Select "Single Banner" from the widget list and place a variant inside the home screen. click here for information on single banners.

As previously mentioned, add an image to the single banner. Link it to the relevant product or collection category. You can even link to any other app page or an external link like your website URL. Similarly, customize the banner look with the "Edit Style" option.

Here is the preview of the StockX app with the single banner.

We continue to populate the home screen with content through the single banner and product slider widgets. Besides this, you could add widgets like a Banner Grid, Banner Slider, Collection Grid, Product List, Search and Timer.

Let's have a look at the final app here.