How to create an app like ShopClues

Once done, install, sign up and activate Swipecart on your website’s backend. On the Swipecart dashboard, click on ‘Layouts’ from the left menu.

First, we create a new layout. To do so, click on the “Create Layout” icon.

Clicking on “Create Layout” will open a popup

Let’s name this layout ‘ShopClues’. Click 'Create'.

Swipecart allows you to choose between pre-made layout templates or to make a layout from scratch. As we’re doing the latter, select ‘Blank Layout’ and click on ‘Create Layout’. This will take you to the layout dashboard.  Now we start creating an app like ShopClues.

For more details about creating layouts on Swipecart, click here.

You’ll be taken to your layout dashboard with the default tab “Theme 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.

App bar settings : Here, you can customize the app bar that remains constant wherever you go on the app. click here to know what you can do with this.

Next, customize the look of the Side Menu, Bottom Bar, Profile Page, and Input Style (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 save it to the app.

Theme style settings- Here, you can manage and edit the fonts, colors, and app loaders for a universal app usage experience. To know more about this, click here

Here’s what the draft app would look like after these settings.

Swipecart allows you to design the home page with simple drag-and-drop widgets.

When you go to the ‘Home’ tab on your ShopClues layout, you’ll find a home page layout in the center with a widget library to the left and the draft pages on the right.

Let’s see how we can make a mobile app quickly that looks and feels the same as the ShopClues app home page with Swipecart.

Collection Slider - Here, you can add collection-specific images with links that are scrollable like a carousel.

Choose the collection slider design from the widget library and drop it at the desired position to the draft home page layout. For more details about this, click here.

Once done, use the 'Edit Style' option to customize the look of your collection slider. Click here to know how to customize widgets like the collection slider.

Here’s a preview of the app with the collection slider.

Collection Grid- Next, you can set up a collection grid where you can add links to a set of images for easier navigation.

Choose ‘Collection Grid’ from the widget library drop-down. Select the Collection grid style you’d want. For more details, please Click here.

To add or edit images and links, use the Add/Edit Content option. Once done, use the Edit Style option to customize the look of your collection grid.

Single Banner- You can use a Single banner whenever you’d want to showcase a promotional campaign or discount offer.

Choose a single banner from the widget library and drop it into the desired position. To know more about the single banner, Click here.

Use the Add/Edit Content option to upload your image and link. After doing so, use the Edit Style option to customize the single banner’s look.

Here’s what your finished banner would look like.

Banner Grid- Banner grids are useful promotional tools inside the app. Select a "Banner Grid" variant from the styles displayed below the widget list box. Place it inside the home screen. For more details on banner grids, click here

Use the Add/Edit Content option to upload your image and link.

After doing so, use the Edit Style option to customize the banner grid’s look.

Here's what the banner grid would look like.

Now, let's add another single banner to the draft ShopClues app.

Carousel Banner- Now it’s time to showcase the products or categories you’d like. From the widget library, choose the Carousel banner from the drop-down list. Drop a carousel banner design you’d like to the draft home page layout. For more details, Click here

Use the Add/Edit Content option to upload your image and link.

After doing so, use the Edit Style option to customize the carousel banner’s look.

Here’s what the completed carousel would look like on the draft ShopClues app.

Product Grid- You can showcase some of your star products using a product grid.

Choose a product grid style from the widget library and drop it into your draft home page layout. For more details about this, click here.

Use the Add/Edit Content option to choose the products you’d like to showcase.

Once done, you can customize the product grid with the Edit Style option.

This is how the app would look after adding the product grid.

Add another Banner Grid and a Single Banner to complete the app.