Tag: eCommerce mobile app builder

PrestaShop Mobile App Builder – User Manual

Get fully Flutter Android & iOS apps for your PrestaShop website & start selling your products on Mobile Apps!

1.0 Introduction

prestashop-mobile-app-builder

This is the user guide of the advanced & readymade Flutter mobile app solution of PrestaShop Mobile App Builder. This is an eCommerce website plugin designed & crafted to build perfect & featured Android & iOS shopping apps for you.

1.1 PrestaShop Mobile App Builder: A Brief Introduction

The PrestaShop Mobile App Builder is the most advanced & automated solution to take your online website business to the mobile platform. It transforms your entire website into a featured Mobile App & allows you to sell products on mobile along with the traditional website. The functionalities & working of the app exactly match the website & work flawlessly on both Android & iPhone devices.

Our PrestaShop Mobile App Builder is the pre-configured framework designed by experts & professionals to build a pair of Flutter eCommerce apps. The apps are capable of taking all your store products to the user’s fingertips & boost sales & revenue. So, if you are a PrestaShop store merchant & looking for a full-fledged mobile app solution, this is your best chance. Read the complete article to get fully intact info on PrestaShop Mobile App Development.

Also, our PrestaShop Mobile App Builder extension is fully compatible with the Multi-vendor Marketplace plugin. You can bring the entire marketplace listing on the same Mobile Apps. We even offer a combo pack of our PrestaShop Mobile App Builder with PrestaShop Multi-Vendor Marketplace in PrestaShop Advanced Marketplace With Mobile App.

New Update: PrestashopMobile App and AI Chatbot Integration 6.0.6

The PrestaShop Mobile App Builder now supports integration with the PrestaShop AI Chatbot, helping store owners provide AI-powered assistance to mobile app users. The chatbot can help customers find products, get answers to common questions, and receive personalized product recommendations directly within the mobile shopping experience.

Moreover, the following benefits of PrestaShop Mobile App Maker would compel you to go for this Flutter app solution:

  • A no-code Mobile App solution.
  • Friendly admin panel with complete access.
  • 3 months of free support
  • Fully Flutter solutions (Android & iOS)
  • 100% synchronization between your apps & website
  • Highly customizable with design & functioning control.
  • Increases user engagement with handy marketing tools.
  • Increases traffic & revenue to your store.

1.2 Top-notch Features of PrestaShop Mobile App Builder:

Here is the list of some of the key features which you will get in your apps with Prestashop Mobile App Builder:

  • Customizable Home Screen Layout (Complete Flexibility)
  • Store Branding
  • WhatsApp Chat Support (24*7)
  • Google & Facebook Login
  • OTP & Fingerprint Login
  • Both Tablet & Mobile Support
  • Android 4.2 and so on Android VersionSupport
  • iOS 9 and so on iOS VersionSupport
  • Automatic Inventory Update
  • Multiple Color & Font Choices
  • Multi-lingual & RTL (Right To Left) Support
  • Multi-currency Support
  • All Product Type Support
  • Website Payment Method Supported on Apps
  • Website Shipping Method Supported on Apps
  • Unlimited Push Notifications
  • Product Social Sharing Options
  • Multiple Filtering & Sorting Options
  • Wishlist Functionality
  • Website Coupon/Vouchers Supported on Apps.
  • Simplified Checkout Screen
  • Real-time Order Tracking
  • Seamless Accordion Menu
  • Clear-cut Product & Category Screen
  • Show Video Banner Elements on the Home Page and Category Product Listing Pages
  • List/Grid Product View Options
  • Login/Sign-up pop-up
  • Enhanced Review Section
  • Multi-layered layout
  • Automated Banner Sliders
  • Notification Tab

Latest Version Updates in PrestaShop Mobile Apps:


a) “Add To Cart” Button on Home & Category Screen

The PrestaShop Mobile App has been made more usable for online shoppers with an inbuilt “Add To Cart” button for products on the Home & Category screen. This allows users to quickly add products to the cart by just tapping the cart button.

The Add To Cart button is also available on the category screen of mobile apps. The users can simply scroll down to the bottom to browse the products and keep on adding products to the cart by simply tapping the Add To Cart button.

b) Product Reviews on App

Our PrestaShop Mobile App is now compatible with the default Product Comments module of PrestaShop. Now, the user can post reviews for the products on the website and the same will appear on the app as well. Also, the user gets to view all reviews from the app and write them as well.

c) Related Products on App

The PrestaShop Mobile App Builder is now compatible with the Automatic Related Products module. The related products can be displayed on the product page of the website and mobile app. This compatibility can be used as a perfect tool to improve cross-selling for your business.

–> Explore PrestaShop Related Products

d) Offline Mode Accessibility:

The eCommerce mobile apps with this extension will now work in offline mode as well i.e. without internet connectivity. The users get to browse the pages anytime which were loaded while active internet. Categories, products, cart screen, etc.

–> Explore PrestaShop Image Search

e) GDPR Compliance:

Now, the apps with PrestaShop Mobile App  Builder are fully compliant as per the GDPR regulations of the EU. It will offer more control to app users over their stored personal data. The store admin can simply configure the GDPR settings to work on the application & the same will be displayed on various app screens like sign-up, login, checkout, payment, etc. Online shoppers even get the right to ask the store merchant for the removal of his/her personal information.

–> Explore PrestaShop GDPR Module

f) Spin & Win (Gamified Email Subscription) Compatibility:

The PrestaShop Mobile App Creator is also compatible with PrestaShop Spin & Win extension. The gamified email subscription pop-up is used for offering a spin-wheel interactive pop-up that can be scheduled for entry or exit display on the web store. Now, with this integration, the same pop-up will be automatically displayed on the apps. You just need to install the extension on your website.

–> Explore PrestaShop Spin Win Module

This list doesn’t end here. Get to know more about the features in detail from here.

g). Video Banner Elements:

The all-new Prestashop App Maker comes with video banner components available on the home page. The store admin can now showcase different videos with the option to upload/YouTube videos on the home page banner components.

h). List/Grid View:

The Android and iOS App built with Prestashop Native Mobile App Builder provides the app users with the opportunity to explore the products in list/grid view, enhancing the visuals and customer experience. 

Now, the users can simply tap on the list/grid button provided on the product listing pages to switch between list and grid view for the products.

i). Video/Banner Options on the Category Product Listing Pages:

Showcase your product carousal with the all-new video/banner upload options introduced in the updated Mobile App Maker for Prestashop. The store admin can upload videos below 2 MB or can also showcase the YouTube videos directly on the category product listing pages. This feature provides better UI control to the store admin, enhancing the customer experience at the same time. 

J). Automated Banner Sliders:

In the latest Mobile App Builder module, we have introduced the automated banner slider feature that allows the Prestashop store administrator to configure the automated sliding time from the module backend. 

The admin can use the functionality, particularly for the “Banner Horizontal Sliders” home page layout components, and can add sliders for both videos and image banners. 

K). Enhanced Review Section:

If you are using PrestaShop’s default Product Comment module, you can enjoy the enhanced review section in the app. All the approved reviews now come with enhanced UI that delivers a top-notch visual experience for your Android and iOS App users. 

L). Login/Sign-up Pop-up:

Capturing the visitors’ emails is one of the biggest challenges in eCommerce. However, we have simplified this process by introducing the login/sign-up pop-up in the recent Mobile App Builder version. 

The store admin can add a login pop-up that will appear for non-logged-in customers, increasing the email opt-in chances by providing simple login options to the users. 

2.0 PrestaShop Mobile App Demo

KnowBand understands your concern about your uncertainty to go for the solution & to curb the same, it has offered a free demo for all eCommerce store owners. The merchants can view our demo store working on the mobile app & even their store working on our demo apps.

2.1 View Our Demo Store working on Apps

Want to see the eCommerce app features? We have integrated our demo store with the app where you can explore the fully functional app and see all its features. Just follow the below instructions:

Step 1: Download and install the Nautica PrestaShop Mobile App from either App Stores on your mobile device. Here, are the links to download demo apps:

Apple App Store  – https://testflight.apple.com/join/PAcL7EEE

Google Play Store– https://play.google.com/store/apps/details?id=com.velsof.prestashopgenericapp&pli=1

Step 2: the Open the Nautica PrestaShop App and hit the view demo button.

That’s it! You will see our demo store running on the demo app. You can browse the same, check all functionalities, create an orders, etc.Note: To access the Admin Panel of KnowBand Mobile App Builder on our demo store, visit here.

2.2 View Your Store working on Demo Apps

Not satisfied? Want to test your store on the demo apps? Well, we got you covered with everything. You can experience your store on our demo app as well that too without any cost. Just 3 steps are all you need to follow for the same:

Step 1: Download & install FREE PrestaShop Mobile App Builder plugin & install it on your store.

Step 2: Install the Demo Apps (links in the previous section) on your mobile device. Open App & enter your Store URL.

Step 3: Tap “View Your Store” and start experiencing your store on demo apps.

Step 4: Enter your store URL in the appeared box.

Example: https://www.example.com/

Note: This Free version of Mobile App Builder is just for the demo purpose & no APK/IPA files will be provided with this module. To get your own APK/IPA files, you need to purchase the paid version of the PrestaShop Mobile App Builder.

3.0 Build your PrestaShop Mobile App in 3 Simple Steps

We hope that you liked the demo of our PrestaShop Mobile Apps and found what you were looking for. So, this is the time to get a Flutter pair of apps for your store. The process to build an eCommerce mobile app is as simple as it could get. Just follow 3 simple steps & your app will be ready in 1-2 working days.

Step 1: Install-Module on your website

Download Prestashop Mobile App Builder & install the same on your store.

Step 2: Share your App Specifications

Share your App details/requirements in our pre-requisites form.

Step 3: Get Your Apps in 1-2 days

Our skilled & professional developers build your apps matching exactly the shared details. We would get back to you with APK/IPA files in 1-2 days.

Note: You can publish these APK/IPA files on respective app stores. Refer following links for the same:

How to publish an app on Google Play Store?

How to publish an app on the Apple App Store?

Still an issue? Tell us, we would publish the apps for you. Moreover, for any queries and suggestions, please reach us at support@knowband.com.

4.0 Module Installation

Once you have purchased the PrestaShop Mobile App Builder module, you will get the following files as listed below:

1. Compressed File in ZIP format (contains the source code of the addon)2. User Manual

Now, you can go on with the further installation process in the following two ways:

Module Installation using FTP Details

Module Installation using Admin Details

5.0 Admin Panel Screens

Once the PrestaShop Mobile App Maker is successfully installed on your website, it’s time to configure the Admin Panel of PrestaShop Mobile App Creator. Once you click on the “Configure” option on KnowBand Mobile App Builder, you will get the following tab with friendly interfaces. Let’s narrow down them one by one.

5.1 General Settings

The General Setting tab is all about the settings required to run your Mobile App on the user’s devices. This tab contains all the necessary generalized options to sync the app.

a) Enable Plugin: Enable the PrestaShop Mobile App Creator plugin to make your mobile app work on user’s devices.

b) Enable Spin and Win: Enable to display a gamified spin-wheel pop-up on the home screen whenever any user opens the app. It can be used to offer discounts/deals & capture their e-mails in return for marketing purposes. To make this functionality work, you need to install Knowband’s Spin and Win module on your website.

Note: The Spin and Win Module will only work in case you have installed the plugin in your store end.

c) Redirect on Cart Page when Add To Cart: This functionality allows you to control the navigation of the “Add To Cart” button. You can either redirect your users to the shopping cart or keep them on the product page whenever they tap Add To Cart button. This enhances the chances of additional purchases.

d) Display Short Description: Enable to display product short description on the product screen along with full description & other details.

e) Select Layout: Choose the desired Home Page Layout for your PrestaShop app. You can create multiple home screen layouts in the backend as per various festivals & themes & use them as per your store requirement.

f) App Button Color: Choose the desired button color for your PrestaShop Mobile App.

g) App Theme Color: Choose the desired theme color for your PrestaShop Mobile App.

h) Image for logo: Upload your store logo image to be displayed on the top header of the app. This promoted your brand among worldwide mobile shoppers.

i) Disabled Shipping Methods: Choose desired shipping methods that you don’t want to be displayed on your PrestaShop Mobile App.

j) Enabled CMS Pages: Choose desired CMS pages to be displayed on the mobile apps.

k) Enable Request Log Reporting: Enable log on the mobile apps to get details of any abnormal behavior of your app.

l) Enable WhatsApp Chat Support: Enable the WhatsApp chat option on your PrestaShop Mobile Apps. The users can directly contact you at your WhatsApp number entered in the backend.

m) Enable/disable Phone Number Registration: Enable the Phone Number login option in your PrestaShop Mobile App & let your users authenticate with OTP verification.

n) Enable URL encoding of Image links: Enable this functionality to support Non-ASCII characters on the app.

o). Enable/Disable Fingerprint Login: This option enables or disables the fingerprint of Face ID login options in the Android and iOS apps. 

p). Enable Notification List Feature: The admin can show/hide the notification section in the app for the customers with the help of this button. 

q). Enable Sign In Login Popup: This button is designed to enable/disable the login pop-up for customers who have not completed registration on the store. 

r). App Icon Theme Color: The store admin can configure the color of app icon themes, especially Wishlist, Cart, and Hamburger menu icons. 

s). Enable Social Login: The following button can show/hide the social login options Google, Facebook, and Apple from the apps.

5.2 Push Notifications Settings

The PrestaShop Mobile App Creator for Android/iOS leverages the Power of Push Notification using the Google Primary Services for the Push Notification to Mobile devices. It brings this handy marketing tool to grab immediate user attention & boost sales. Highlighting your daily deals & offers is just a message away with your PrestaShop Mobile App. Both automated & custom notifications are available with PrestaShop Mobile App Maker.

a). Service Account Json: Since the traditional Firebase push messaging API is deprecated and replaced with a service Json file, this section allows the admin to configure the Json file extracted from the Firebase account. 

Either you can configure the same on your own, or we will also share your service Json file at the time of app creation.

b) Enable/Disable Order Creation Notification: Enable/Disable automated Push Notification sent to the app users for successful order creation.–> Title and Message for Push Notification: Enter the title and message on the push notification setting for successful order creation.

c) Enable/Disable Order Status Changed Notification: Enable/Disable automated Push Notification sent to the app users for any update regarding their previous order delivery status.–> Title and Message for Push Notification: Enter the title and message on the push notification setting whenever there is an update the in previous order delivery status.

d) Enable/Disable Abandoned Cart Notification: Enable/Disable automated push notifications sent to the users who have abandoned cart without successful purchase.–> Title and Message for Push Notification: Enter the title & message of the push notification for abandoned cart app users.

e) Time Interval: Interval (in hours) for sending Push Notification to app users who have abandoned their cart without successful purchase.

5.3 Push Notification History

This tab contains the history of all sorts of push notifications sent to every user with concerned details. The merchant can get to know about every notification sent earlier. This tab also has the option to send a custom notification to the users crafted from the backend. You can easily make them aware of any store-related details or discounts through manually sent notifications.

Send Notification:

This option is there to send a manual notification to the app users as per your choice. You can configure the title, message, landing page, image, etc., and notification of your choice as shown below snapshot:

a) Title of the Push Notification: The title of your manual Push Notification that is to be sent to the app users.

b) Message of the Push Notification: The message of your manual notification which is to be sent to the app users.

c) Device Type: You can choose the users on Android/iOS or on both to whom your manual Push Notification is to be sent.

d) Image Type: You can upload the desired image/banner justifying your notification. The banner image can be uploaded or used through an existing URL.

e) Notification Image: The store admin get to preview the notification image & analyze how it will look on the user’s apps.

f) Image URL: The actual URL of the notification image which is to be sent to the app users.

g) Redirection Activity: You can choose the redirection of your notification by choosing from Home Screen/Any Category/ Any Product here. Whatever you set, your users will be redirected to the same on tapping the push notification.

h) Select the Category/Product: You can choose any relevant category/product screen for your notification.

i) Send Notification: Once you have crafted & previewed your notification, it is time to send the same on your apps.

5.4 Payment Methods

The PrestaShop Mobile App Creator for Android & iOS supports all sorts of website payment methods on the Android & iOS apps. Additionally, it brings COD payment option & the flexibility to add other Web-Viewpayment methods as well.

By-Default, there is only a Cash On Delivery Payment Method in our Mobile App. However, if you want to add the same payment methods as on your PrestaShop store, disable the COD method from the module back-end. After disabling the COD method, all the payment methods that are available on your web-end will appear fine in your Mobile Apps.

5.5 Home Page Layout

This is one of the most amazing functionalities of the PrestaShop Mobile App Builder plugin to design & craft multiple home screen layouts using various designing attributes/elements. This tab contains the list of all the home screen layouts configured earlier based on various themes & fonts as shown in the snapshot below:

To configure the home page layouts, the following elements are available in the back-end:

  • Top categories
  • Square Banner
  • Horizontal Sliding Banner
  • Grid Banners
  • Countdown Banner
  • Grid Products
  • Horizontal Sliding Products
  • Recently Accessed Products
  • Login/Sign-Up Pop-Up

The store merchant can configure & use any of these attributes to craft & save multiple layouts. These layouts can be used as per the theme & requirements. Also, the positioning of various elements can be altered with just a simple drag & drop functionality.

Top Categories:

Top categories are displayed in the form of small squares on the home screen & can be configured including their image & landing categories/products. The PrestaShop Mobile App Maker offers a maximum of 8 categories in which a minimum of 4 are mandatory.

Square Banner:

Another attribute is Square Banner listing which is used to offer a square-shaped banner on the home screen of the app. You can customize the banner by choosing the right image & landing screen for the same. In the Recent Updates, we have also added the video selection option for the banner squares. Now the admin can also choose between the options of Video Upload or YouTube Video Link for the square banners.

Horizontal Sliding Banner:

These are the rectangle-shaped available in horizontal sliding & can be fully customized from the backend. The admin can also configure the automated banner sliding time interval for the horizontal banner sliders components.

Grid Banners:

These are square-shaped banners listed on the home screen in the grid form. You can set as many banners as you want on the home screen & customize their image & landing page accordingly.

Countdown Timer Banner:

The PrestaShop Mobile App Builder offers a banner with a countdown timer. You can set the banner image & landing screen & set the timer till you want to display the banner. Once the timer is over, the banner will automatically disappear.

Square Products:

As for banners, the PrestaShop Mobile App Creator offers products to display on the home screen in the form of a square listings.

Horizontal Sliding Products

You can add the products in the form of horizontal sliders. The selected products could be of any specific category or other highlights as Best Sellers, Featured Products, etc.

Grid Products:

The products can also be added to the home screen in the form of grid listings. The products can be chosen from any category.

Recently Accessed Products:

The PrestaShop Mobile App Creator provides the recent tab element which displays the recent products viewed by the user. You can just add the element in your layout to display the same on the home screen.

Note: The store admin can add up to 20 elements while designing a layout in the backend panel. 

Login/Sign Up Pop-Up:

We have introduced a new login pop-up that will encourage the customers to log in to their accounts with a single tap login/sing-up option provided on the home page of the apps.

5.6 GDPR Compliance

The PrestaShop Mobile App Builder offers GDPR compliance in mobile apps. The store admin can simply make a few clicks in the admin panel and apps will become GDPR compliant.

a) Enable GDPR Settings: Enable this tab to offer GDPR compatibility on various app screens.

b) Display GDPR on: Choose the app screens where you want to activate GDPR options.

c) Import Content Of CMS Page: Choose the CMS page whose content needs to be added for the GDPR option.

6.0 Mobile App Screens

6.1 Home Screen

The Home screen of your PrestaShop Mobile App will be exactly as you want it to be. The PrestaShop Mobile App Maker offers complete flexibility to design & craft a home screens into your hands. Using multiple banners(Square, Grid, Sliding), products (Square, Grid, Sliding), countdown timer banner, and recent products tab in the backend, you get to design intuitive layouts for your home screen. The following options are available on your app home screen:

Moreover, the positioning of various design elements can also be altered as per the requirement.

1. Dynamic Layouts:

Using various elements you can create & save various layouts in the backend & re-use them as per various events & festivals. You can design & craft your app home screen dynamically.

2. Brand Logo:

Your store logo is represented on the left-middle section of the top header of your PrestaShop Mobile App. The logo is fully configurable from the module backend & can be enabled/disabled including image changes.

3. Search:

The search option allows the mobile app shoppers to get easily & quickly what they desire. In your PrestaShop Mobile App, product search will be in two forms: The search option can be found on the bottom tab bar layout of PrestaShop Mobile App.

–> With Text: Your App users can search for desired products just by typing some related keywords. The PrestaShop Mobile App will show relevant results to that keyword.

4. Wishlist Bag:

The wishlist bag is displayed on the top header of your PrestaShop Mobile App containing all bookmarked products. The app users can save their desired products in a wishlist bag for future purchases.

5. Shopping Cart:

The Shopping Cart is available on the top-right corner of the app home screen. The users can get to know about the products added to their cart right from there.

6. WhatsApp

On the right-bottom of the home screen, there is a live seller-buyer chat option. The mobile app shoppers can easily & directly message you their query & you can resolve them instantly.

6.2 Accordion Menu (Navigation Bar)

The PrestaShop Mobile Apps for Android & iOS come up with proper categorization of products is available on the website. Mobile shoppers can easily browse products from multiple categories. All CMS pages are also available in Accordion Menu. It provides the following options:

1. My Account

My Account screen contains all the user information like Personal Details, Shipping Address(s) & Order Details. The shoppers can view all the info related to them & can update personal details & login passwords as well.

2. Categories

These categories are the same as on your website. You can map them accordingly & offer a 3-level categorization to your app users for hassle-free browsing.

3. CMS Pages

Various CMS pages like About Us, Contact Us, Terms & Conditions, etc. Available on your website are displayed here. You can choose the desired one from the PrestaShop Mobile App Builder backend to be displayed on Mobile App.

4. Language(s)

The language option allows your users to view PrestaShop Mobile app in their Nativelanguage. All available languages are displayed under this option only.

5. Currency(s)

All available currencies on your eCommerce website are displayed on PrestaShop Mobile App as well. The shoppers can view & purchase the product price in their desired currency.

6. Login/Logout

Your users can easily log in/log out from PrestaShop Mobile App using this option.

7. Notification Settings:

The app users can control the specific push notifications they want to receive in the app. The options allow mobile app users to choose between all notifications, promotional notifications, and order status update notifications.

6.3 Category Screen:

All the sub-categories, parent categories & other associated categories are available in your PrestaShop Mobile App. The category screen is designed to deliver clutter-free experience in two basic views: Grid & List. The product image, name, price, the discount is displayed in all listings with an option to add them to the wishlist bag as well. The Mobile Apps with PrestaShop Mobile App Builder have layered navigation which makes the product search just simpler. The following options are available on the category screens:

Furthermore, now the admin can also enhance the UI of the category product listing page by adding video/images on the category page section.

 

1. Sort:

This option allows the shoppers to select the desired order in which the category product pricing is to be sorted. Two sorting orders are available in your apps: Price: Low to High & Price: High to Low.

2. Filter:

The option to filter products simplifies product search. The app users can filter the products in your PrestaShop Mobile App based on various attributes like size, color, compositions, Condition, Manufacturer, Price, etc. The users can search for their favorite products in minutes using these filters.

6.4 Product Screen:

The product screen of your PrestaShop Mobile App is simple & intriguing. Multiple images of the same product are displayed along with the name & price. The product availability is also displayed as “In Stock” or “Out Of Stock” based on inventory status. It contains the following other options:

1. Product Options:

All the options related to the product like size, color, etc. are displayed on this screen. These product options are the same as available on the website.

2. Short Description

Users get to read the short description of your product to quickly make up their minds.

3. Product Info & Care

The complete product information is listed on the website is displayed here. The app users can get complete product details from here.

4. Add To Wishlist:

The Mobile App users can directly bookmark the product just by tapping “Add To Wishlist” on the left bottom of the product screen.

5. Add To Cart:

As the name “Add To Cart” button adds the product directly into the cart & the users can further go on with the purchase.

6. Product Social Sharing:

There is an option on this screen to share your product on multiple social platforms, including Bluetooth & e-mail. The app users can share the products among their friends/relatives on multiple social platforms & lure heavy users to your app.

6.5 Wishlist Screen:


Your PrestaShop Mobile App Creator would have a wishlist bag allowing the users to bookmark products for future purchases. The users can view the list of all bookmarked products from here. It has two options:

1. Add To Cart:

The app users can add the bookmarked product directly into the shopping cart by choosing Add To Cart option.

2. Remove From Wishlist:

The users can even remove any wishlist product if not feel like buying that.

6.6 Login Screen

The PrestaShop Mobile App Creator offers various one-tap login options & makes the sign-in/registration process more seamless:

1. Login

The app users can authenticate & access apps using e-mail sign-in credentials.

2. Sign Up

All the new app users can sign-up & create their account on the store from the mobile App. The sign-up form of the PrestaShop Mobile App only asks for relevant details.

3. Login with Phone Number

Your Mobile App comes up with an easier & robust phone number login option which makes it easier for the users to verify the OTP & login app.

4. Login with a Fingerprint

Your users also get an option to log in with fingerprint authentication. This allows users to access apps in seconds.

5. Login with Facebook

The users can log in to the app using their Facebook Account Credentials.

6. Login with Google

The users can log in tothe app using their GoogleAccount Credentials.

6.7 Shopping Cart Screen:

The Shopping Cart screen of your PrestaShop Mobile App will display all products to the shopping cart. The app users can view the product’s name, quantity, total price & shipping cost. This screen has the following options:

  1. Apply Voucher

This option allows the users to get discounts & offers by entering valid coupons & vouchers running on your website.

2. Total Product Price

The users can view the complete cost of their shopping bag from here. It is automatically updated as per any update with product quantity or addition.

3. Update Product Quantity

The app users can even update the product quantity with the “Update Quantity” option.

4. Remove Product

The app users can simply remove the product from the cart by simply tapping the “Remove” option.

5. Continue To Checkout

The front-end mobile app users can proceed further to the checkout & payment screens just by tapping the “Continue To Checkout” option. It will re-direct them on the checkout screen.

6.8 Checkout Process

The Prestashop mobile app Builder consists of a simplified checkout process. The front-end mobile app users have the option to select the shipping details, billing details, order numbers, order comments, and so on in the checkout process of the mobile app.

Users of the Android and iOS apps only need to follow a few simple steps to place their orders.

1. Customers can select the desired product and add it to the shopping cart. After clicking on the shopping bag, he or she can also select the desired product quantity. Moreover, the front-end mobile app users can see the total number of products and shipping costs.

The customer also has the option to apply any voucher and coupon code at the bottom of the same page.

2. After clicking on the Continue to Checkout option, the user can review the order where he or she can see several details. Such as product price, shipping cost, shipping address (It can be edited on the same page), order summary (Number of the products), total price, and so on.

Additionally, the customer has the option to select their preferred mode of shipping on the same page. The user can also put his or her special request or requirement in the order comment option appearing on the bottom of the screen.

  1. The user will be redirected to the payment method screen after clicking on the continue to checkout option.

On this screen, users have the option to select from all of the website payment options. By default, the shopping app consists of a cash-on-delivery option as a mode of payment.

  1. When the user performs the payment activity, then he or she will be redirected to the order summary screen. where the customer can see the order status, order number, amount, and so on. The front-end mobile app users will get the order confirmation popup message on their mobile phone screens as well.

6.8 My Account Screen

My account screen of the Android/iOS eCommerce app allows users to view the complete account details including a list of previous orders. My Account screen offers the following options:

  1. Order History

The users get to know about complete order details being placed earlier. The order submission date, order reference, price & delivery status is displayed.

2. Update Profile

Users can also update their pre-saved profile details such as First or last name, phone number & password.

3. Shipping Address(s)

The app users can see the complete list of saved Shipping Addresses. A new Shipping address can also be added from here.

4. Order Details

The app users can get to view the complete list of the previously placed app orders.

5. Re-order feature

There is a direct re-order product directly by clicking the “Re-order” button. All the previous orders will be added to the cart by just tapping a single button.

6.10 Order Detail Screen

Order details screen of PrestaShop eCommerce App provides complete order detail such as shipping address, product summary, shipping and payment method, and total cost summary. The users can even track the delivery of previously placed orders directly from this screen.

7.0 Video Tutorials

8.0 Advanced PrestaShop Marketplace with Mobile App

KnowBand’s PrestaShop Marketplace converts your online website into a fully fledged marketplace. The PrestaShop Mobile App Builder is fully compatible with PrestaShop Marketplace extension. This means you can bring the entire marketplace listing on the same PrestaShop Mobile Apps. Thus, launch a pair of Marketplace-compatible Mobile Apps with KnowBand & attract a large base of sellers & customers to your store.

–> As the user clicks on the Seller option, he/she is redirected to the Seller page of the mobile store. The user can view the list of the sellers of the marketplace along with their ratings.

–> The customers can click on the name of the seller in order to see his profile and product being offered. The sellers can log in with their username and password. They are then redirected to the dashboard.

Get to know more about PrestaShop Marketplace with Mobile App from here.

Android & iOS Mobile App Builder for PrestaShop is also available at the Offical PrestaShop Addon Store

The “Mobile App Effect” In eCommerce Industry during Holiday Season

Hey all eCommerce store owners, the holiday season is about to begin and what are your plans? This is the time for more conversions & sale opportunities for your business”. Right? According to the previous reports, last year in US holiday season sale surpasses 1 trillion mark for the very first time. This wasn’t just from the online store, but mobile apps were also the leading pillar behind this growth.

So, what’s your game plan for this holiday season sale? Make sure tapping into mobile space is in the list. Why? Let’s find out in detail.

Effects of Holiday Season

According to studies, the number of users visited by mobile device is 51% where desktops users were only 40% worldwide. Smartphones handled half of the traffic during holiday season. As mobile website represented 51% of internet traffic where desktops generate 40% of internet traffic and tablets represent only 8.3 %.


Well, if you look into the usage of mobile apps versus website, mobile apps are always one step ahead of websites. Online shoppers prefer mobile apps rather than websites.
As you can see mobile app completely dominated the market and this is the main reason behind mobile app started take over on desktops and tablets.

Mobile Impact on Holiday Season

Black Friday:

The sales on Black Friday jumped 23.6%, where more than $2 billion of the revenue came from smartphones in U.S.. The mobile device showed the increment of 8.5%.

Cyber Monday:

Cyber Monday was the most awaited and biggest sales day of the year with revenue of $7.9 billion in U.S., an increment of 19.3 %. Almost half of visit came from mobile devices during holiday season sales and this number is persistently growing year-by-year.

These numbers clearly indicate the impact of mobile apps during holiday season. Smartphones becoming more popular and an important part of this holiday season. After seeing this impact many marketers predicted this would be the best year for online retailers.

1. Mobile Apps installation during Holiday Season

According to reports, In this holiday season the number of mobile app install increased as compared to an average day of any month. Because people looking forward to get their hands on year best offers & deal.

The reason behind this huge growth of app installation is offers and deals offered by eCommerce store provider. Also,

2. Traffic on Mobile App During Holiday Season

In 2017, 68% of traffic came from only mobile apps as compared to desktops worldwide. Mobile apps are the new channel which gives a boost to traffic on these days. The graph of time spent on mobile device is also going on upward direction.

According to business experts, On Christmas Eve the number of visits by mobile apps were nearly 72%. This was not just with Christmas but also Cyber Monday, On Thanksgiving day, mobile traffic increases 158 percent compared to a normal week. Many expert says that, In this holiday season mobile app going to dominate both traffic and conversions and set a new milestone.

According to source, in 2019 the number of users who use mobile payments to pay for the purchase in U.S. Stores will reach 150 million people. This is almost the country’s half population.

3. Transactions of Mobile During Holiday Season Sale

This growth is not just in mobile traffic area but also it changes the mobile transactions numbers. Almost 40% of eCommerce purchases during the 2018 holiday season were made by mobile devices. On Black Friday, there is a 300% increase in completed transaction says by a report. Nearly 40% of all purchases made by smartphones during 2018 holiday season sale.
Around 80% of Americans are online shoppers in which more than half of them have made their transaction via mobile devices.
A report says that the number of transactions were more during these days as compared to normal days.

Result : After going through all this research, we can definitely
say that Mobile apps are clear winner here. Final comparison between mobile app vs mobile websites:


Growth of your business during holiday season

You will see a huge growth in the holiday season in mobile app industry. From spending time on mobile apps to transaction, the numbers are increasing and its not slowing down. This is the most awaited time period in eCommerce industry for both users & merchants.

How can you make the most of it? Simple, go mobile! And it’s so easy beyond your imagination. You can get it done in just a few days without technical knowledge. Knowband offers a module to build mobile app for your eCommerce store in just a few clicks for the following platforms:

PrestaShop Mobile App Builder
OpenCart Mobile App Builder
Magento Mobile App Builder
Magento 2 Mobile App Builder
WooCommerce Mobile App Builder

Major benefits of eCommerce mobile app builder:

1. Boost Engagement

Most awaited season for online shoppers is holiday season. In this time, user engagement reach to its peak and this data is increasing year-over-year with very huge margin. Well if we are talking about user engagement, then its unfair to not mention the name of push notifications.

Turning point: Push notification is one of the best tool to boost your user engagement during holiday season sale. These push messages works like a source which bring more users to your store. Push notifications claims higher open-rate as compared to email. Knowband offers unlimited push notifications in their mobile app.
Also, by offering free shipping and flash sale you can create an urgency in your user’s mind and encourage them to shop instant from your store.

2. Increase Sale

From last few years, the number of sales of every store changing in this time period. No doubt mobile app has a big hand in this huge shift which continuously changing the number of sales. The more you spend in attaining user’s attention the more you will get benefit of it which result in increasing the sales number of your store.
During this environment a lot of transactions occurring. Adapting this new advancement in technology can gives you the opportunity to get a piece of this revenue.

But, the question arises how?

Related Links:
How to boost downloads of your eCommerce Mobile App
Top 10 eCommerce Mobile App of 2019
Tips to design beautiful eCommerce Mobile Apps

Game Changer Move

Spin and win:

Well, don’t worry we got you this time. KnowBand provides you an opportunity to get a piece of this revenue in your bucket-list by offering Spin and Win module for this holiday season. You can display a Spin-wheel pop-up to your user’s in this holiday season. This module is specially designed for these kinds of occasions. So, whether it’s a Halloween or Christmas Eve you can present special themes for every occasion.

Spin and Win extension is available for following platforms:
PrestaShop Spin and Win extension
OpenCart Spin and Win extension
Magento Spin and Win extension
Magento 2 Spin and Win extension

Flash Sale:

Flash sale is also one of the essential ways to boost the sales during the holiday season because it creates an urgency in user’s mind to get their hands on the special offer. This urgency can make them to go for purchase. In short Flash sale can be a game-changer for your business in this holiday season.

All Types of Coupons & Vouchers Support:

Your store sales will automatically increase if they get multiple coupons & vouchers while shopping. So, this holiday season provides multiple coupons & vouchers to your user’s and get ready to witness the highest revenue of your store.

Conclusion

Retailers should now focus on mobile apps because they are constantly changing the numbers every year. Also, they have to be prepared for huge peaks during these holiday season. This is the high time to stand out your business different from crowds. So, are you ready for this Holiday Season?

WooCommerce Mobile App Builder – User Manual

Get fully Flutter Android & iOS apps for your WooCommerce website & start selling your products on Mobile Apps!

1.0 Introduction

This is the user manual for WooCommerce Mobile App Builder’s cutting-edge and ready-made Flutter mobile app solution. This eCommerce website plugin was created and expertly crafted to help you create flawless and feature-rich Android and iOS shopping apps.

1.1 Introduction to WooCommerce Mobile App Builder

The most sophisticated and automated way to expand your online business to mobile platforms is with the WooCommerce Mobile App Builder. It turns your entire website into a mobile app with features and enables you to sell products on mobile devices in addition to the traditional website. The app’s features and operation perfectly mirror those of the website and are compatible with both Android and iPhone devices.

The pre-configured framework used by our WooCommerce Mobile App Builder was created by experts and professionals to create two Flutter eCommerce apps (Android and iOS). The apps can bring every item in your store to the user’s fingertips and increase sales and revenue. Therefore, this is your best opportunity if you are a WooCommerce store merchant looking for a complete mobile app solution. To get complete information on WooCommerce Mobile App Development, read the article in its entirety.

Additionally, the Multi-vendor Marketplace plugin is fully compatible with our WooCommerce Mobile App Builder extension. The same Mobile Apps can be used to access the entire marketplace listing. Even better, we provide a bundle that includes both WooCommerce Advanced Marketplace With Mobile App and WooCommerce Multi-Vendor Marketplace.

Moreover, You would be persuaded to choose this Flutter app solution if you considered the following advantages of WooCommerce Mobile App Maker:

  1. A mobile app solution with no coding.
  2. A welcoming administrative panel with full access.
  3. Free assistance for three months
  4. Completely Flutter remedies (Android & iOS)
  5. Synchronization of your apps and website at all times
  6. Extremely flexible in terms of design and operation.
  7. Uses practical marketing tools to boost user engagement.
  8. Increases your store’s revenue and traffic.

Top Qualities of the WooCommerce Mobile App Builder:

The following is a list of some of the major features that your apps with WooCommerce Mobile App Builder will include:

  • The layout of the home screen can be changed (Complete Flexibility)
  • Store Identities
  • (24/7) WhatsApp Chat Support
  • OTP and fingerprint login for both tablets and smartphones with Google and Facebook
  • Support iOS 9 and subsequent iOS versions, as well as Android 4.2, and up versions support.
  • automatic inventory updates.
  • Numerous Font & Color Options
  • bilingual and RTL (Right To Left)
  • Support All Product Types
  • Support Multi-currency
  • Support Website Shipping Method Supported on Apps
  • Support Website Payment Method
  • Push Notifications indefinite
  • Options for Product Social Sharing
  • Numerous options for sorting and filtering
  • Wishlist Functionality
  • Internet coupons or vouchers backed by apps.
  • Checkout Screen with Fewer Details
  • Live Order Monitoring
  • Unbroken Accordion Menu
  • Clear-cut Category & Product Screen

Latest Version Updates in WooCommerce Mobile Apps:

With an integrated “Add To Cart” button for products on the Home & Category screen, the WooCommerce Mobile App has been made more usable for online shoppers. By simply tapping the cart button, users can quickly add products to the cart.

The category screen of mobile apps also features an Add To Cart button. Users only need to scroll to the bottom of the page to browse the products and keep adding items to their shopping cart by tapping the Add To Cart button.

A) App Reviews for Products

Our WooCommerce Mobile App is currently compatible with WooCommerce’s built-in Product Comments module. The user can now post product reviews on the website, and those reviews will also show up on the app. The user has access to both read and write reviews on the app.

b) Related App Store Products

The Automatic Related Products module is now compatible with the WooCommerce Mobile App Builder. On the product page of the website and mobile app, related products can be shown. This compatibility can be a wonderful tool for your company to increase cross-selling.

C) Deep Linking: A deep linking feature is built into the WooCommerce Mobile App. Now, when a link is shared, the user will be taken to the application rather than the website. Installing the app on the mobile device is the only requirement. The user will even be directed to the appropriate app screen by the shared link.

D) Accessibility in Offline Mode: With this extension, eCommerce mobile apps will now function even when there is no internet connection. Users are able to browse any time the pages that were loaded while the internet was active. Products, categories, the cart screen, etc.

–> Explore WooCommerce GDPR Module

E) Spin & Win (Gamified Email Subscription) Compatibility:

The WooCommerce Spin & Win extension is also compatible with the WooCommerce Mobile App Creator. On the web store, a spin-wheel interactive pop-up that can be scheduled for entry or exit display is provided by the gamified email subscription pop-up. The same pop-up will now be automatically displayed on the apps thanks to this integration. The extension only needs to be installed on your website.

F) Video Banner Elements: Knowband’s WooCommerce Mobile App Builder now supports video banners on the home page. Store admins can upload videos directly or embed YouTube videos, making the home page more visually appealing and improving the user experience.

G) List/Grid View: Knowband’s WooCommerce 2 Native Mobile App Builder for Android and iOS allows app users to easily switch between list and grid views while browsing products. This feature improves the shopping experience by providing a flexible and attractive way to explore products. Users can toggle between views using the list/grid button on the product listing pages.

H) Automated Banner Sliders: The latest Knowband Magento 2 Mobile App Builder includes an automated banner slider feature. Store admins can easily set the sliding interval from the module’s backend. This is especially helpful for “Banner Horizontal Sliders” on the home page, allowing admins to add both video and image banners for a more dynamic and engaging display.

I) Enhanced Review Section: The Knowband mobile app features an improved review section. Approved reviews are displayed with a better user interface, offering a more visually appealing and seamless experience for both Android and iOS users.

–> Investigate the WooCommerce Spin Win Module

This is not the end of the list. Learn more about the features in-depth from this page.

2.0 Demo of the WooCommerce mobile app

KnowBand is aware of your hesitation to use the solution and has provided all owners of eCommerce stores with a free demo in order to allay your worries. The merchants can see their store operating on our demo apps as well as our demo store operating on mobile devices.

2.1 Check Out Our Demo Store for Apps

Want to see the features of the eCommerce app? In order for you to explore the app and see all of its features, we have integrated our demo store with it. Just adhere to the guidelines below:

Step 1: Your mobile device can be used to download and install the Nautica WooCommerce Mobile App. The following are links to download trial versions of the following apps:

Apple App Store  – https://testflight.apple.com/join/mrvIRLfw

Google Play Store- https://play.google.com/store/apps/details?id=com.velsof.woocommercegenericapp

Secondly, the Click the view demo button after launching the Nautica WooCommerce App.

I’m done now! On the demo app, you will see our demo store operating. You can browse it, test out every feature, place orders, etc.

Note: Click here to access the KnowBand Mobile App Builder Admin Panel on our demo store.

2.2 Watch Your Store Operate with Demo Apps

Not content? Do you wish to test the demo apps on your store? We have everything covered for you, though. On our demo app, you can also experience your store, and at no cost. You only need to follow these 3 steps to achieve the same results:

  • Install the FREE WooCommerce Mobile App Builder plugin on your store as the first step.
  • Install the Demo Apps on your mobile device in step 2 (links are in the previous section). Open the app and type in the store URL.
  • Click “View Your Store” to begin using demo apps to explore your store.
  • Type your store’s URL into the box that appears.

For instance, see https://www.example.com/

Note: No APK or IPA files will be provided with this module; this Free version of Mobile App Builder is only for demonstration purposes. You must buy the WooCommerce Mobile App Builder’s paid version in order to obtain your own APK/IPA files.

3.0 Create a mobile WooCommerce app in 3 easy steps

We hope you enjoyed the WooCommerce Mobile Apps demo and discovered what you were looking for. So now is the perfect time to add a pair of Flutter apps to your store. An eCommerce mobile app can be created in the most straightforward manner possible. Your app will be ready in just 3 easy steps and 1-2 working days.

First, add the module to your website.

Install WooCommerce Mobile App Builder on your store after downloading it.

Step 2: Share the details of your application

Use our prerequisites form to share your app’s specifications.

Step 3: In 1-2 days, receive your apps

Our knowledgeable and experienced developers create your apps precisely in accordance with the shared details. In 1-2 days, we would reply with APK/IPA files.

Note: These APK/IPA files can be published on the appropriate app stores.

 

Still a problem? Tell us, and we’ll help you publish the apps. Furthermore, you can contact us at support@knowband.com if you have any questions or suggestions.

4. Installation of Module

You will receive the files listed below once you have purchased the WooCommerce Mobile App Builder module:

1. ZIP-formatted compressed file (contains the source code of the addon)

2. User Guide

You can now continue the installation process in one of the two ways listed below:

Details of module installation via FTP

Installing a module using admin details

5.0 Screens for the admin panel

It’s time to set up the WooCommerce Mobile App Creator’s Admin Panel after it has been successfully installed on your website. You will see the following tab with user-friendly interfaces as soon as you select the “Configure” option on the KnowBand Mobile App Builder. Let’s eliminate each one individually.

5.1 General settings:

The settings needed for users’ devices to run your mobile app are all covered under the General Setting tab. This tab has every generalized option required to sync the app.

A) Enable Plugin: To make your mobile app functional on users’ devices, enable the WooCommerce Mobile App Creator plugin.

B) Enable Spin and Win: When any user opens the app, enable the display of a gamified spin-wheel pop-up on the home screen. It can be used to provide discounts and deals in exchange for their email addresses, which are then used for marketing. The Spin and Win module from Knowband must be installed on your website in order for this functionality to function.

The Spin and Win Module will only function if the plugin has been installed in your store end.

C) Redirect on Cart Page when Add To Cart: This feature enables you to manage the “Add To Cart” button’s navigation. When a user taps the Add To Cart button, you have the option of sending them to the shopping cart or keeping them on the product page. This increases the likelihood of making additional purchases.

D) Display Short Description: Allow the short description of the product to appear on the product screen alongside the full description and other information.

E) Choose Layout: Pick the Home Page Layout you want for your WooCommerce app. According to different holidays and themes, you can create a variety of home screen layouts in the backend and use them as needed for your store.

Choose the preferred button color for your WooCommerce Mobile App under Option

F) App Theme Color: Pick your WooCommerce Mobile App’s preferred theme color.

G) Logo image: Put your store’s logo on the app’s top header by uploading it. This helped your brand gain recognition among global mobile customer s.

H) Disabled Shipping Methods: Select the shipping options you want to be hidden from the WooCommerce Mobile App.

I) Enabled CMS Pages: Select the CMS pages you want to appear on mobile apps.

J) Enable Request Log Reporting: Enable the log feature on mobile apps to learn more about any unusual behavior exhibited by your app.

K) Enable WhatsApp Chat Support: On your WooCommerce Mobile Apps, enable the WhatsApp chat option. Your WhatsApp number entered in the backend can be used by users to get in touch with you directly.

L) Enable/disable Phone Number Registration: In your WooCommerce Mobile App, enable the Phone Number login option and enable OTP authentication for your users.

M) Enable URL encoding for Image Links: Turn on this feature to allow the app to support characters other than ASCII.

N) Show Add to Cart Button on Product Block: The admin can show/hide the “add to cart” button for the product listing pages with the help of this button.

O) Enable Notification List Feature: The button allows the admin to enable the notification listing features for the app users. If this option is disabled, the notification tab will not appear in the app.

P) Enable Sign In Login Popup: The admin can enable or disable the login/sign-up pop-up for the new customers with this option.

5.2 Settings for Push Notifications

The Google Primary Services for the Push Notification to Mobile Devices are used by the WooCommerce Mobile App Creator for Android and iOS to harness the power of push notifications. It provides this practical marketing tool to increase sales by grabbing users’ attention right away. With the help of your WooCommerce Mobile App, you can easily highlight your current specials and offers. WooCommerce Mobile App Maker offers both automated and customized notifications.

A) Service Account JSON: With the deprecation of the traditional Firebase push messaging API, it has been replaced by a Service Account JSON file. In this section, admins can configure the JSON file from their Firebase account. You can either set it up yourself, or we can provide the Service Account JSON file during the app creation process for your convenience.

B) Order Creation Notification Enable/Disable: Enable/Disable automated Push Notification sent to app users upon successful order creation.

–> Title and Message for Push Notification: To create an order successfully, enter the title and message in the push notification setting.

C) Order Status Changed Notification: Users of the app can choose whether to receive automated Push Notifications when their previous order’s delivery status changes.

-> Title and Message for Push Notification: Enter the title and message whenever the delivery status of an earlier order is updated on the push notification setting.

D) Enable/Disable Abandoned Cart Notification: Enable/Disable automated push notifications that are sent to users whose carts have been abandoned but no successful purchase has been made.

Enter the title and message for the push notification sent to app users who have abandoned their carts.

E) Time Interval: The amount of time (in hours) between which app users who have abandoned their carts without making a purchase will receive Push Notifications.

5.3 History of Push Notifications

This tab includes a history of each type of push notification that was sent to a user with relevant information. The retailer has access to all previously sent notifications. Additionally, a custom notification created in the backend can be sent to the users using this tab. Through manually sent notifications, you can easily inform customers about any information or discounts pertaining to the store.

Send Notification: You can choose to manually send a notification to app users using this option. According to the screenshot below, you can customize the notification’s title, message, landing page, image, etc.

a) Push Notification Title: This is the name of the manual Push Notification you will be sending to app users.

b) Push Notification Message: The text of your manual notification that needs to be sent to app users.

c) Device Type: You can specify which users on Android, iOS, or both platforms you want to receive your manual push notification.

d) Image Type: You are able to upload the banner or image you want to use to support your notification. The banner image can be used directly through a URL or uploaded.

e) Notification Image: The store administrator is given the opportunity to preview the notification image and assess how it will appear on users’ apps.

The actual URL of the notification image that will be sent to app users is listed under item f.

f) Redirection Activity: Here, you can select from the Home Screen, Any Category, or Any Product to redirect your notification. Your users will be directed to whatever you specify when they tap the push notification.

g) Choose the Category/Product: For your notification, you can select any relevant category/product screen.

h) Send Notification: After creating and previewing your notification, it’s time to send it to your apps.

5.4 Payment Procedures

All types of website payment methods are supported by the WooCommerce Mobile App Creator for Android & iOS apps. It also includes the option for COD payments and the flexibility to include additional Web-View payment methods.

In our mobile app, the only available payment option is cash on delivery by default. Disable the COD method from the module’s back end, though, if you want to add the same payment methods as on your WooCommerce store. All of the payment options that are available on your website will work as intended in your mobile apps after the COD method is disabled.

.

5.5.1 Home Page Design

The WooCommerce Mobile App Builder plugin’s ability to design and create multiple home screen layouts using different designing attributes and elements is one of its most amazing features. As can be seen in the screenshot below, this tab contains a list of home screen layout that has been previously configured using different themes & fonts:

The following elements are available in the back-end to configure the home page layouts:

  • Top categories
  • Square Banner
  • Horizontal Sliding Banner
  • Grid Banners
  • Countdown Banner
  • Grid Products
  • Horizontal Sliding Products
  • Recently Accessed Products
  • Add YouTube videos/upload videos on the home page layout.
  • Login/sign-up pop-up for the non-logged-in users.
  • Add custom banners with custom dimensions.

Any of these attributes can be set up by the store merchant and used to create and save multiple layouts. These layouts can be utilized based on the theme and specifications. Additionally, using just a drag and drop functionality, different elements’ positions can be changed.

Top Categories:

Top categories can be configured, including their image and landing categories or products, and are shown as small squares on the home screen. Maximum categories available through the WooCommerce Mobile App Maker are 8, with a minimum of 4 required.

Square Banner:

Top categories can be configured, including their image and landing categories or products, and are shown as small squares on the home screen. Maximum categories available through the WooCommerce Mobile App Maker are 8, with a minimum of 4 required.
In the recent updates, we have also provided the option to showcase different videos with the YouTube Video/Video Upload section added in the “Select Image Type” section.

Horizontal Sliding Banner:

These rectangular sliding doors are available and fully customizable from the backend. Like banner squares, the admin can also highlight the banner sliders by adding video elements. Furthermore, now the admin can get the option to enter the time that he wants to set for the automated banner sliding.

Grid Banners:

These are square-shaped banners that are listed in a grid format on the home screen. On the home screen, you can place as many banners as you like. You can also change the landing page’s image as needed.

Countdown Timer Banner:

A countdown timer is available on the banner provided by the WooCommerce Mobile App Builder. You can choose the landing page and banner image, as well as set a timer for when you want to display the banner. The banner will automatically disappear when the timer expires.

Square Products:

Regarding banners, the WooCommerce Mobile App Creator provides products to show as square listings on the home screen.

Horizontal Sliding Products

The products can be added as horizontal sliders. The products chosen may fall under any one particular category or may be highlighted as Best Sellers, Featured Products, etc.

Grid Products:

Grid listings of the products can also be added to the home screen. Any category can be used to select the goods.

Products Recently Viewed: The WooCommerce Mobile App Creator offers the recent tab element, which shows the most recent products the user has viewed. To display the element on your home screen, simply include it in your layout.

Sign-Up Pop-Up: Capturing visitors’ emails is a major challenge in eCommerce. To simplify this, the latest version of the Magento 2 Mobile App Builder includes a login/sign-up pop-up feature. Store admins can add a pop-up that appears for non-logged-in customers, making it easier to collect emails by offering simple login options and increasing the chances of email opt-ins.

Note: When designing a layout in the backend panel, the store administrator can add up to 20 elements.

6.0 Screens for Mobile Apps

6.1 Home Screen

Your WooCommerce Mobile App’s Home screen will be exactly how you want it to be. You have complete creative control over how to design and create a home screen with the WooCommerce Mobile App Maker. You can create user-friendly home screen layouts using a variety of banners (Square, Grid, Sliding), products (Square, Grid, Sliding), countdown timer banners, and recent products tabs in the backend.

 

Additionally, different design elements’ placements can be changed based on the situation.

1. Dynamic Layouts: You can create and save different layouts in the backend and reuse them for different events and festivals by using a variety of elements. Your app’s home screen can be created and customized dynamically.

2. Brand Logo: The WooCommerce Mobile App’s top header’s left-middle section displays your store’s logo. The logo can be enabled or disabled, as well as having its image changed, from the module backend.

3. Search: The search feature enables mobile app users to find what they’re looking for quickly and easily. The WooCommerce Mobile App offers two ways to search for products: On the WooCommerce Mobile App’s bottom tab bar layout, there is a search option.

–> Text: Users of your app can search for desired products by entering a few relevant keywords. The WooCommerce Mobile App will display results for that keyword that are pertinent.

4. Wishlist Bag: The wishlist bag, which contains all bookmarked products, is visible on the top header of your WooCommerce Mobile App. Users of the app can store their wishlist items in a bag for potential future purchases.

5. Shopping Cart: The Shopping Cart can be found on the app’s home screen in the top-right corner.

The users can get to know about the products added to their cart right from there.

6. WhatsApp:

A live seller-buyer chat option can be found at the bottom right of the home screen. Customers who use your mobile app can easily and directly message you with any questions, and you can answer them right away.

6.2.1 An Accordion Menu (Navigation Bar)

On the website, there are WooCommerce Mobile Apps for Android & iOS that have been developed with accurate product categorization. Mobile shoppers can browse a variety of products with ease. The Accordion Menu is also available for all CMS pages. It offers the following alternatives:

 

1. My Account

All user data, including personal details, shipping addresses, and order details, can be found on the My Account screen. The customers have access to all of their information and can update both their login credentials and personal information.

2. Categories

These categories match those on your website exactly. For easy browsing, you can map them appropriately and provide a 3-level categorization to app users.

3. CMS Pages

Here, a variety of CMS pages from your website, including About Us, Contact Us, Terms & Conditions, etc., are displayed. From the WooCommerce Mobile App Builder backend, you can select the one you want to be shown on the mobile app.

4. Language

Your users can view the WooCommerce Mobile app in their native language using the language selection option.

5. Currencies(s)

The WooCommerce Mobile App also shows all currencies that are offered on your e-commerce website. Customers can view and buy products for the price in the currency of their choice.

6. Sign in/Sign out

This option makes it simple for your users to log in and out of the WooCommerce Mobile App.

6.3 Category Screen:

Your WooCommerce Mobile App includes all of the associated categories, parent categories, and subcategories. The category screen is created with minimal clutter in

1.Two fundamental views:

Grid and List. In every listing, the product name, image, price, and discount are shown along with a button to add them to your wishlist bag. Layered navigation on mobile apps created with the WooCommerce Mobile App Builder makes finding products much easier. The category screens offer the following choices:


2. Sort:

Customers can choose the preferred order for sorting the category product pricing using this option. Your apps have two sorting options: Price: Low to High and Price: High to Low.

3. Filter:

The users can filter out the products using various selection options provided under the filter tab.

6.4 Product Screen:

Your WooCommerce Mobile App’s product screen is straightforward and interesting. Along with the name and price, various images of the same item are displayed. Depending on inventory status, the product availability is also indicated as “In Stock” or “Out Of Stock”. It includes the next additional items.

1. Options

Product Options: This screen shows all available options for the product, including size, color, and so forth. The product choices here match those on the website.

2. Brief Description

Users can quickly decide after reading the brief description of your product.

3. Product Details and Care

This page displays all of the product information that is listed on the website. Users of the app can access this page for detailed product information.

4. Add To Wishlist: By tapping “Add To Wishlist” on the left bottom of the product screen, users of the mobile app can directly bookmark the product.

5. Add To Cart: As the name implies, clicking the “Add To Cart” button adds the product directly to the shopping cart, allowing users to continue with the transaction.

6. Product Social Sharing

On this screen, you have the option to share your product on various social networks, including Bluetooth and email. Users of the app can invite many users to your app by sharing the products with their friends and family on various social media platforms.

6.6 Login Screen

The WooCommerce Mobile App Creator streamlines the sign-in/registration process and provides a variety of one-tap login options:

1. Login

Using their email addresses as sign-in credentials, app users can authenticate and access apps.

2. Register

The mobile app allows all new app users to register and create an account on the store. Only pertinent information is requested on the WooCommerce Mobile App sign-up form.

3. Use Phone Number to Log In

The easier and more reliable phone number login option that your mobile app offers makes it simpler for users to login and verify their OTP.

4. Use your fingerprint to log in

Additionally, your users have the option of using fingerprint authentication to sign in. Users can now quickly access apps thanks to this.

5. Login with Facebook

Users can access the app by logging in with their Facebook credentials.

6. Login with Google

The users can log in to the app using their GoogleAccount within no time.

7. Shopping Cart Screen:

All of the items in your shopping cart are displayed on the WooCommerce Mobile App’s shopping cart screen. The product’s name, quantity, total price, and shipping cost are all visible to app users.

1.Use Voucher

By entering active coupons and vouchers that are currently active on your website, this option enables users to receive discounts and offers.

2. The full product cost

Users can access this page to view the full cost of their shopping bag. It is automatically updated whenever there is a change in the quantity of a product or an addition.

3. Revision of Product Quantity

With the “Update Quantity” option, app users can even change the product quantity.

4. Remove the item

Users of the app can easily remove a product from their cart by selecting “Remove” from the menu.

6. Continue To Checkout

By selecting “Continue To Checkout,” front-end mobile app users can continue to the checkout & payment screens. On the checkout screen, they will receive a redirect.

6.8 Checkout Process

The checkout process in the WooCommerce mobile app Builder is made simple. In the mobile app’s checkout process, front-end users have the option to choose the shipping details, billing details, order numbers, order comments, and so forth.

Orders can be placed using just a few easy steps on the Android and iOS apps.

1. Customers can choose and add the desired item to their shopping carts. When the shopping bag is clicked, the user can also choose the desired product quantity. Users of the mobile front-end app can also view the total number of products and shipping costs.

At the bottom of the same page, the customer can also choose to use any coupon or coupon code.

2. The user can review the order and see several details after selecting the Continue to Checkout option. such as the cost of the product, the cost of shipping, the shipping address (which can be changed on the same page), the order summary (the number of products), the total cost, and so forth.

On the same page, the customer can also choose their preferred method of shipping. The order comment option that appears at the bottom of the screen allows the user to also include any special requests or requirements.

3. After selecting the option to “continue to checkout,” the user will be taken to the screen that asks for their payment method.

Users can choose from all of the website’s payment options on this screen. The shopping app includes a cash-on-delivery option as a standard form of payment.

The user will be taken to the order summary screen after completing the payment activity. where the customer can view the status, cost, and other information regarding their orders. Users of the front-end mobile apps will receive the order confirmation popup messages on their mobile phone screens as well.

6.9 My Account Screen

Users of the Android/iOS eCommerce app can view all account information, including a history of previous orders, on the My Account screen. The following options are available on the My Account screen:

  1. Order History

The users learn all the details of the earlier-placed order. The date the order was submitted, the order number, the price, and the delivery status are all visible to the users screen.

2. Update Profile:

Users can also update their previously saved profile information, such as their first or last name, phone number, and password.

3. Delivery Address (s)

Users of the app have access to the full list of saved shipping addresses. From here, you can also add a new shipping address.

4. Order Details:

The complete list of previously placed app orders is available to app users.

5. Reorder function

By selecting the “Reorder” button, you can directly reorder a product. By pressing a single button, all previous orders will be added to the cart.

6.10 Order Detail Screen

The WooCommerce eCommerce App’s order details screen shows every aspect of the order, including the shipping address, a summary of the products, the shipping and payment options, and the total cost. From this screen, users can even follow the delivery of previously placed orders.

7.0 Video Tutorials