How to Convert a WooCommerce website into mobile app ?
Looking forward to create a mobile app for WooCommerce? Confused about where to begin? Appmaker is a one stop solution to it all.
Appmaker.xyz is a B2B platform using which WooCommerce companies can convert an existing website into a native mobile app. The updates you make in the design, content and functionality using these simple tools will reflect automatically without updating the app itself. This eliminate the need for a full-time developer to build and maintain your app. This will also help you to distribute the app.
This is a simple tutorial that step by step explains the procedure to convert your WooCommerce website into an app that is designed as per your requirements using Appmaker.
Let’s begin here :
Link: https://appmaker.xyz
1. Sign Up/Login
2. Get Started
Click On Get Started.
Click on the Create Now icon in the WooCommerce section.
Note- You can either opt to DIY model or we have a team of App experts who will do everything for you ( This is Super fast and Quality Guaranteed). In Both ways, you can Book Demo with us here
3. Create
Browse the icon image and upload (make sure that the image resolution fits the one as mentioned below)
Enter your WooCommerce website URL in the box entitled ‘STORE URL’. Then click on Submit.
4. Installing Plugin And Downloading The App
As soon as you finish and submit, the very next step is to install the Appmaker WooCommerce plugin. (https://wordpress.org/plugins/appmaker-woocommerce-mobile-app-manager)
Click on the Click Here button and it will redirect you to the WooCommerce admin page.
Click on the Activate and correspondingly the status turns green and specifies “ Plugin Installed and configured”.
From the API credentials of your app on appmaker site copy the API key and API Secret.
Now fill in the WooCommerce site with API key details copied above and click on save changes.
Your app is ready to Download.
5. Update
The app you have just created is bound to the default styling and features. For detailed styling and adding specific features to make your app apt for your requirements, update your app.
Click on Manage on your app and then select Update from the left side bar.
5.1 Style
Change the fields with your desired colors. Make a note that with every alteration a corresponding change occurs in the demo view on the mobile screen image on the right end.
Corresponding changes are indicated here.
While changing to the desired color, you can also provide different color to both Android and iOS apps.
Click on the down arrow icon and it splits, providing you with separate options.
Here are the details of the changes you can make in styling.
5.2 MISC
Here are the details of the other changes you can make in styling.
5.3 Add-Ons
5.3.1 Enable Social Login
Enable social login using the toggle button and if you already have a Developer ID use it’s app ID, Else to get the Facebook App ID click on the link marked below.
You can enable additional features to increase the retention and engagement of users with the app, like Filter(allows the user to refine products based on various grounds like rating, latest first, price etc.), Push notification(A push notification is a message that pops up on a mobile device. App publishers can send them at any ie. time even if the user is inactive)and Analytics(This enables you to analyse the data regarding number of downloads, their usage and helps to identify the requirements). To enable just click once on the corresponding toggle button.
5.3.2 Fire-base Configuration
Link: https://firebase.google.com
From the API credentials of your App copy the Package Name and paste it as the iOS bundle ID of your firebase project, then click on REGISTER APP.
Download the .plist file by clicking on Download GoogleService-Info.plist.
Click on Add another app and then select Android.
Fill in the Android package name as mentioned above then click on REGISTER APP. download the .json file.
Browse both the .json file and .plist file and upload to Firebase config. of Android and iOS respectively.
Go to Cloud messaging in the project settings and copy the Server key.
copy the above mentioned Server key to the box entitled FCM SERVER KEY.
5.3.3 Zopim Enabling
Select check connections from your profile and then copy the Account Key.
Enable the Zopim chat (you need to have a zopim account)by clicking on the toggle button and then paste the Account Key copied above in the box entitled ZOPIM ACCOUNT KEY.
5.4 Settings
Change the specific features if your app requirements are different from the ordinary apps.For all the specific needs of your app, appmaker has a solution.
5.4.1 Open category in Home
Enable this if you want your app to open in a specific category page rather than the In-app page. Make sure that after enabling you fill in the box entitled HOME CATEGORY ID with the ID of that specific category.
5.4.2 Grocery Mode
Enabling this will provide the users to add the item and to specify the quantity to cart directly(below the item on the same page).
5.4.3 Product List Type (List/Grid)
This provides you with the option to specify the way the items should be displayed on the page.Select either list or grid as per your requirement.
5.4.4 Show Language Switcher
Enabling this will add an option for the customer to switch between your selected languages.
5.4.5 Responsive Image
Enabling this provides you with the facility to arrange images of each product according to their actual size rather than fixing it to a particular grid size.
5.4.6 Show Full Name
Enabling this feature will display the full product name even if it does not fit the fixed line size.
5.4.7 Display Invite Code In Registration
Enabling this feature will allow only the users with registration code to register in the app.
5.4.8 Enable RTL (Right To Left)
Enabling this feature aligns the content of the app from right to left.
5.4.9 Checkout Web view
This feature provides you an option to switch to the checkout model as provided in the web view rather than the default appmaker’s checkout model.
5.4.10 Force User Login
Enabling this feature will allow usage of the app only after the user logs in.
5.4.11 Hide Login
Enabling this feature eliminates the option and necessity of login.
5.4.12 Hide Cart
Enabling this feature will the cart feature from the app.This is recommended for all apps built with no intention of selling products.
5.4.13 Remove Register
Enabling this will eliminate the option to register using the app. The registration can only be done on the website.
5.4.14 Display Cart In Web view
This feature provides you an option to switch to the cart model as provided in the web view rather than the default appmaker’s cart model.
5.4.15 Hide Search
Enabling this will eliminate the option to search the product in the product list of the app.
5.4.16 Hide Wishlist
Enabling this feature will the wishlist feature from the app. Your customers can browse through your store but no longer add items to their account’s profile.
5.4.17 Display Mobile Number Field In Registration
Enabling this feature will add a new field that accepts mobile number on the registration page.
5.4.18 Payment Button On Uncompleted Orders
Enabling this feature will allow the users to complete the payment on their uncompleted orders.
5.4.19 Hide Promt Login
Enabling this feature will eliminate the option to login from cart during checkout.
5.4.20 Hide Search
Enabling this will eliminate the option to sort the products in the product list of the app on various grounds.
5.5 Language
Here there are options provided to select a list of languages that the app should support.More than one language can be selected and the language switcher option provided in settings will enable the user to switch between languages in this selected list.
It also has an additional feature to edit the specific words corresponding to default list list of words used in the app.
Your app is READY !!
Download it again.(in case of android download the .apk file and test on your mobile and in case of iOS preview it there itself).
Any doubts at any point feel free to use this help on the extreme right bottom end.
