November 11, 2022

How to create an app like ShopClues

Started in 2011, Shopclues is an e-commerce marketplace in India that sells many products at deeply discounted rates. These include electronics, apparel, accessories, jewelry, kitchenware, home essentials, and much more. For many small and medium enterprises, e-commerce marketplaces like ShopClues are ideal to expand their business reach beyond borders.

With the help of no-code app builder Swipecart, you too, could create an e-commerce mobile app like Shopclues and compete domestically and across the world. All of this with an app you make yourself without any professional help. Let’s see how to do so-.

Here’s a detailed video tutorial for creating your mobile app with Swipecart.

With this drag-and-drop app builder Swipecart, you can now complete with established mobile apps in the market like ShopClues within your means.

Steps to create an app like ShopClues

To make an app like ShopClues, Swipecart requires you to have an existing Shopify or WordPress e-commerce store. Firstly, you have to download and install Swipecart from the Shopify app store and WordPress plugincenter.

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

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

    shopclues
  • Clicking on “Create Layout” will open a popup

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

    shopclues
  • 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.

    shopclues

Theme Settings

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

    shopclues
  • 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.

    shopclues
  • 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 

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

    shopclues

Designing the home page

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

    shopclues
  • 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.

    shopclues
  • To add or edit images and links, use the "Add/Edit Content" option. Click here to know how to add images and links.
  • 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.

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

    shopclues
  • 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.

    shopclues
  • 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.

    shopclues
  • 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.

    shopclues
  • 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.

    shopclues
  • Here’s what your finished banner would look like.

    shopclues
  • 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

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

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

    shopclues
  • Here's what the banner grid would look like.

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

    shopclues
  • 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

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

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

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

    shopclues
  • 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.

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

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

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

    shopclues

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

    shopclues

Besides this, you could add widgets like a Banner Grid, Collection Grid, Product List, Search and Timer.

Here is a complete video of the completed ShopClues app

As we can see, it is quite easy to create an app like ShopClues on Swipecart. By creating your e-commerce mobile app, you are saving yourself crucial resources that you could invest in your operations.

If you have any questions regarding Swipecart, do Contact us.