September 21, 2022

How to create an app like Club Factory

Chinese E-commerce stores like Club Factory have made an impressive mark in the international markets, even when leading e-commerce players are working hard to maintain their order flow. Started in 2014 by two Chinese graduates from Stanford University in the US, Club Factory gives small and medium businesses a chance to target an international audience. To date, Club Factory has more than 70 million users worldwide, most of which use the platform to buy accessories, apparel, and electronics at extremely discounted rates.

Considering the immense potential of cross-border e-commerce trade, you too could create an app like Club Factory and give global small and medium businesses a chance to sell their wares across the world. With no-code app builder Swipecart, you could do this yourself without spending countless resources on conventional mobile app development. Let's start.

Steps to create an app like Club Factory:

Swipecart requires you to have a Shopify or WordPress-based e-commerce website to make a no-code app on its platform. Choose the Swipecart application on the Shopify app store and WordPress plugincenter and install Swipecart.

  • When done, activate it and Signup. Go to the Swipecart dashboard, and click on 'Layouts' on the left menu.

    Creat an app like club factory
  • Click on 'Create Layout' to make a new app interface like Club Factory.

    Creat an app like club factory
  • Clicking on “Create Layout” will open a popup.

    Creat an app like club factory
  • Let's name it 'Club Factory'. Click on the 'Create' button.

    Creat an app like club factory
  • At Swipecart, you can choose from various pre-made templates or design your app from scratch. In this case, click on "Blank Layout" as we're making an app like Club Factory.

    Click here to know how to create/edit a design for your app.

    Creat an app like club factory
  • You’ll be taken to your layout dashboard with the default tab as “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. To start with, let's customize the app bar. Click the 'App Bar Settings' in the Club Factory Layout. This is the default option in the 'Theme Settings tab.

    Creat an app like club factory
  • To customize the app bar, you can modify the app bar color, app font color, bottom radius, and elevation. Besides this, you can toggle between enabling or disabling the notification icon, search icon, cart icon, and favorite icon. Upload your logo image or app title and choose its alignment on the app bar. Click 'Save' when done.

    Creat an app like club factory
  • Once done, you can customize the side menu, user profile page, input (welcome page/sign-in page) style, and bottom bar. Just choose one from a set of pre-made templates that suits the layout. Save the changes when done.

    This is what the app bar and bottom bar will look like after you save the changes.

    Creat an app like club factory
  • Next, we'll proceed to customize the overall theme of the app. In the Club Factory layout's left menu, click on the 'Theme Style Settings' to start. Here, you can edit the font style, scale, and color. Besides this, you can select the primary and background color of the app in the app color option.

    Creat an app like club factory

    Note: For an immersive app experience, add the exact color code in the app color/font color option that matches your e-commerce website.

    Creat an app like club factory
  • The next task is to customize the home screen of the app. Click on the “Home” tab to edit the home page layout.

    Creat an app like club factory
  • Here, you can start building your app by dragging and dropping widgets from the widget library to the blank home screen layout. The widgets available encompass all the features you'd need for your app. You can choose from the Collection slider, product list, Carousel banner, and many more. To start with let's see how to add the search bar widget.

  • Drag and drop the Search bar widget on the home screen layout. Hover your mouse over the search bar to open the “Edit Style” option. You can edit the style of the Search bar such as radius and padding, besides this, you can also add a mic option for voice search. Click on “Update” to save your changes.

    Click here to know how to edit the widget's style

    Creat an app like club factory
  • Here's how the search bar would look on the app.

    Creat an app like club factory
  • Now, we have to add other elements to the app. Let's start with the carousel banner. Choose the carousel banner option from the drop-down widget list above the widget library. Select the appropriate carousel banner widget style and drop it below the search bar on the home screen layout.

    Creat an app like club factory
  • Now, it's time to choose an image for the carousel banner. Hover your mouse on the carousel banner widget on the home screen layout and select the 'Add/Edit content' option. The 'Add carousel banner' popup will open. After naming the widget, upload your image. After doing so, you can link the banner to a specific product page, collection, app page, or even an external URL. By default, the 'Internal linking' tab is checked. You could uncheck this if you don't want the banner to redirect to another page. Once done, click the 'Add' and 'Save banner' options.

    Click here to know how to add/edit content in a widget.

  • You have to add a minimum of 3 carousel images. Once done, you can choose to customize the carousel banner. Hovering over the banner will give you an additional 'Edit Style' option. Here you can adjust the banner container radius, padding, and container padding, besides choosing to edit title alignment, background, font color, and box shadow. Preview the banner before saving your changes.

    Creat an app like club factory
  • This is how your carousel banner would look on a mobile screen.

    Creat an app like club factory
  • Next, we add a carousel product slider to the home page layout. Choose the slider style you'd want and add it to the home screen layout. Upon hovering on the slider, click on the 'Add/Edit content' option. In the popup that appears, you can add specific products, and collections or let Swipecart help your customers choose the right products with our signature Artificial Intelligence (AI) feature. If you want individual products to display on the widget, you need to choose at least 3 or more products.

    Creat an app like club factory
  • Besides this, you can also add customized images for groups of collections you'd want to show in the widget.

    Creat an app like club factory
  • Here's what your product slider would look like on the app.

    Creat an app like club factory
  • On Swipecart, you can add a product grid anywhere as per your requirement. From the widget library drop-down, click on 'product grid'. Then just drag the required product grid style widget to the app layout. On hovering over the widget, you can choose the products to display using the 'Add/Edit content' popup. Here, you can select individual products, and collections or use the AI function to recommend products.

    Creat an app like club factory
  • Customize the product grid using the 'Edit Style' popup which appears below the 'Add/Edit content' popup after you've added the products.

    Creat an app like club factory
  • This is what the product grid would look like after you're done.

    Creat an app like club factory

Here's how the final Club Factory app would look like using Swipecart.

Making a mobile app yourself was never that easy. With Swipecart, you can now convert your e-commerce website into an app effortlessly

If you have any queries or want to know more about Swipecart, please Contact us.

Watch this video tutorial to know about creating an app for your e-commerce store:

With drag-and-drop app builder Swipecart you can create your e-commerce mobile app without spending six figures on mobile app development by hiring professionals to get the same result.