Create an Attractive and Functional Mobile App with Mobical

Create an Attractive and Functional Mobile App with Mobical

Table of Contents:

1. Introduction
2. Logging into the Backend Panel
3. Accessing the Mobical Mobile App
4. Using the Page Builder
   • Builder Components
   • Setting up the Home Page
   • Adding Carousel
   • Adding Slider Banner
   • Adding Grid
   • Adding List
   • Adding Product Slider
5. Making Changes to the Mobile Application
6. Connecting the Demo with Shopify Web Store
7. Adding Banners
8. Using the Mobile Drawer
9. Adding Menu Items
10. Conclusion

Introduction

In this article, we will explore the page builder section of the Mobical mobile app and learn how to set up the home page for your mobile application. We will discuss how to access the builder components, make changes to the mobile application, connect the demo with your Shopify web store, and much more. So, let's dive in and create an attractive and functional mobile app using Mobical.

Logging into the Backend Panel

To begin, you need to log into your backend panel for your Shopify web store. Once logged in, go to your sales channel and find the Mobical mobile app that you installed from the app store. Watch the videos attached to the description of this article to learn how to install the Mobical mobile app builder.

Accessing the Mobical Mobile App

After installing the Mobical mobile app builder, tap on the mobile app option in the backend panel. This will bring up the sections for the Mobical mobile app configuration. On the left side, you will find the builder components, including the carousel, slider banner, grid, list, and product slider. These components are used to set up your mobile application's home page.

Using the Page Builder

Under the page builder section, you can add and customize various builder components to create a personalized home page for your mobile application. The changes you make here will be visible on your mobile device as well. Let's explore each component in detail:

1. Builder Components: These components include the carousel, slider banner, grid, list, and product slider. They can be used to add different sections to your mobile application's home page.

2. Setting up the Home Page: Drag and drop the builder components into the preview window to arrange them on your home page. You can change their location by dragging them to the desired position.

3. Adding Carousel: The carousel component allows you to showcase multiple products or categories. Add items to the carousel by tapping the "Add Item" button and selecting the desired products.

4. Adding Slider Banner: The slider banner component is perfect for displaying important information or promotions. Set the text and add items (products or categories) to the banner for a visually appealing home page.

5. Adding Grid: The grid component helps organize your products or categories in a grid format. Customize the grid layout and add items to create an organized and visually appealing home page.

6. Adding List: The list component allows you to display products or categories in a list format. Add items to the list and customize its layout to make your home page more user-friendly.

7. Adding Product Slider: The product slider component is ideal for showcasing a specific collection or group of products. Add items to the slider and customize its settings to make your home page more engaging.

Making Changes to the Mobile Application

The changes you make using the page builder will be reflected on your mobile application. The preview window on the left side shows you a real-time preview of how your mobile application will look with the selected components. You can make adjustments, rearrange components, and add or remove items as needed.

Connecting the Demo with Shopify Web Store

To connect the demo version of your mobile application with your Shopify web store, refer to the video guide provided. It will walk you through the step-by-step process of connecting the demo version with your online store.

Adding Banners

Apart from the builder components, you can also add banners to your mobile application's home page. Banners are great for highlighting special offers, promotions, or new arrivals. Customize the text and add items (products or categories) to the banners for an eye-catching home page.

Using the Mobile Drawer

The mobile drawer is a side panel that displays a complete listing of categories within your Shopify store. It can be accessed by tapping the three lines on the top-left corner of the mobile application. You can add menu items to the mobile drawer to provide easy navigation for your app users.

Adding Menu Items

To add menu items to the mobile drawer, go to the mobile drawer section in the page builder. Here, you can see the menu items that will be visible when the side panel is opened. You can add more menu items by tapping the "Add Menu" button. Customize each item by setting a category, sub-category, or link.

Conclusion

With the page builder section of the Mobical mobile app, you can easily create a visually appealing and functional home page for your mobile application. By using builder components like the carousel, slider banner, grid, list, and product slider, you can showcase your products and categories in an attractive manner. Additionally, you can use the mobile drawer and add menu items for easy navigation. Connect the demo version with your Shopify web store to provide a seamless shopping experience. Start using the Mobical page builder today and create a stunning mobile app for your business.

Highlights:

1. Easily create a personalized home page for your mobile application using Mobical's page builder.
2. Customize and arrange different builder components like carousel, slider banner, grid, list, and product slider.
3. Add and showcase products or categories in an attractive manner using builder components.
4. Connect the demo version of your mobile application with your Shopify web store for a seamless shopping experience.
5. Use the mobile drawer and menu items to provide easy navigation for users.
6. Create visually appealing banners to highlight special offers, promotions, or new arrivals.

FAQs:

Q: How do I access the Mobical mobile app builder? A: Log into your backend panel for your Shopify web store and go to your sales channel. Look for the Mobical mobile app that you have installed from the app store.

Q: Can I customize the layout of the builder components? A: Yes, you can drag and drop the components to arrange them on your home page as per your preference.

Q: Can I add multiple items to the carousel or other builder components? A: Yes, you can add multiple products or categories to the carousel, slider banner, grid, list, and product slider.

Q: How can I connect the demo version of my mobile app with my Shopify web store? A: Refer to the video guide provided to learn how to connect the demo version with your online store.

Q: Can I add banners to my mobile application's home page? A: Yes, you can add banners to highlight special offers, promotions, or new arrivals. Customize the text and add items (products or categories) to the banners.

Q: How can I add menu items to the mobile drawer? A: Go to the mobile drawer section in the page builder and tap the "Add Menu" button. Customize each item by setting a category, sub-category, or link.