How to create an app like Club Factory

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

Click on 'Create Layout' to make a new app interface like Club Factory.

Clicking on “Create Layout” will open a popup.

Let's name it 'Club Factory'. Click on the 'Create' button.

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.

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.

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.

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.

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.

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

The next task is to customize the home screen of the app. Click on the “Home” tab to edit the home page layout.

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

Here's how the search bar would look on the app.

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.

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.

This is how your carousel banner would look on a mobile screen.

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.

Besides this, you can also add customized images for groups of collections you'd want to show in the widget.

Here's what your product slider would look like on the app.

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.

Customize the product grid using the 'Edit Style' popup which appears below the 'Add/Edit content' popup after you've added the products.

This is what the product grid would look like after you're done.