How To Create A Mobile App for Your E-commerce
Website
Hi guys Today we’re going to see, how you can create an Online shopping app for your E commerce website. Let’s say you have an eCommerce website like this, And now you want to convert this entire site into a mobile app like this How can you do that? So after watching this video, you will be able to create an online shopping app like this And anyone who is visiting your app will be able to add the product to the cart and then purchase it from your app. So all you need to have to follow this tutorial is an eCommerce website, Now if you don’t have an eCommerce website, you can easily create one, by clicking the link in the description. If you’re making your site for Indian customers, you can watch this video. If you’re from a different country, you can watch this video. Once you create an app for your eCommerce site, your store will be available both app & website, at the same time. and your customers will be able to order from any place of their choice. You don’t need to buy a separate hosting or pay monthly fees for your mobile app. It will be hosted on the same server, where your site is hosted right now. the orders you get from the app, can automatically be seen on your website. And you can process your orders from there. All the products you add to your site will be automatically be added to your app, you just have all the controls in 1 single place. And you need to maintain just 1 platform, instead of making changes on multiple platforms. The app which we’re going to create is a native app, which means it is fast loading & doesn't have the delay time like a web browser. It has a much better user experience, compared to browsing the same website on the mobile browser. okay I'm Bryan from Website Learners And let’s create, our mobile shopping app. First let’s see the eCommerce site which we created, Here it is This is the site, which we created using this video So to create a mobile app for this site We’re going to do 3 parts The first part is to ‘Set up your wordpress site, for creating the mobile app’. So to set up our site, we’re going to do 2 steps The first step is to ‘install a plugin on your site’ So to install the plugin Just click the link below this video And it will take you to this page. Now, this is the plugin which is going to help us turn our website into a mobile app. So to install this plugin on our site, We need to do 2 steps The first step is to ‘get this plugin’ So to get this plugin we need to purchase it. Now remember that this is a one time fee & you don't have to make any monthly payments. other products on the internet might ask for a monthly fee for creating an app, but using this tool, you need not pay any monthly fee. let’s click ‘buy now’ And now it will ask you to create an account So let’s fill up these details And click next Now to get the plugin select a payment method Enter your details And click ‘make payment’ So now we have successfully got our plugin. Now to download the plugin, Let’s click ‘download’ And the plugin will be downloaded to your computer. So now we can go to step 2 of installing the plugin, which is to ‘Get the zip file of the plugin’ So to get the plugin’s zip file Let’s open this And then right-click and select ‘extract all’ Then again click ‘extract’. And as you can see, we’ve got our extracted files… Now if you open it you can see the zip file of our plugin So once you’ve got the plugin zip, file, We can now install this plugin, on our website. So to install this plugin, Let’s go to our WordPress dashboard Now go to plugins And click ‘add new’ Now click ‘upload’ And then drag and drop your file like this and click ‘install now’ And then click ‘activate’ So now we have successfully installed the plugin on our site. Once you have installed the plugin We can go to step 2 of setting up our website which is to ‘install the redux plugin on your site’ This plugin will help you to control the app directly from your wordpress website. So to install the plugin Let’s click ‘add new’ And then search for a plugin called ‘redux’ And you will get this plugin So Let’s click ‘install’ And click ‘activate.’ And the plugin has been installed. Once you have installed these plugins, your site is now ready for creating the mobile app. So now we have successfully set up our site. Once you have set up your site We can now go to part 2 of this tutorial which is to ‘Create your mobile app's APK file’ So this is the file, which will be used to install your app, on any android phone. So to create your apk file Just click the link below this video And it will take you to this page So to create our app file, we need to do 3 steps The first step is to ‘get the purchase code of our plugin, and then enter it here’ So to get the purchase code Let’s go to our inbox Here you can see that, we have got a mail about the plugin purchase Now to get the code, let’s open this email And as you can see, here, we have Got our purchase code! So let’s copy this code now go back And then paste it here Okay! So now we’ve added our purchase code! Now once you have added this code. Next, here, you need to add, your website’s URL So let’s go to our website And then copy this URL And paste it here Now click ‘get started’ And you will get this page once you reach this page Now let’s go to the 2nd step of creating our app file, which is to ‘enter the details required for creating the app’ So first you need to enter a name for your app I’m going to enter my website name Which is ‘Trycasuals’ Once you have entered the app name Next, you need to get these 2 details from your website And then enter it here So to get these details Let’s go back to our wordpress dashboard And then to ‘woocommerce’ And click ‘settings’ Now go to ‘advanced’... And click ‘rest API’ Now to get these details Click ‘create API’ And then enter any name in this field I’m going to enter ‘Mobile app’ Then click here and select ‘read & write’ Now if we click ‘generate API key’ you can see that, we have got the details which we need for creating our app. Once you have got these details all you have to do is, just copy these details and paste it here So first let’s copy this one And then paste it here Next, let’s copy this one And then paste it here So once you have entered these 2 details. We can now go to step 3 of creating your app file, which is to ‘Add the logo of your App’ So to add the logo, Just drag the logo from your computer And drop it here And as you can see, our logo has been added. So now we have successfully added our logo Next, we need to add a ‘splash image’ for our app. Splash image is the startup image which appears, when opening our app. To add the ‘startup image’, First, we’re going to resize our logo, in this size. So to resize our logo Let’s go to a new tab and go to ‘resizeimage.net’ And it will take you to this page This is the page which will let us resize our logo image. So to resize the image Just click ‘upload’ And then select your logo and click open And the image will be added here Now to resize this image Just disable this option And then enter the dimensions, which is shown here Once you have entered this Choose “auto-mode” And now if you click ‘resize image’ our image will be resized to the required dimensions. and we have got the download option here Now if we click ‘download image’ And then open it, you can now see the resized image. Once you have resized the image to add this image to our app Let’s go here Now drag the image… and drop it here And as you can see our image has been added. So now we have successfully added the startup image of our app. So now when we open our app, it will show this image. Okay now once you’ve added these 2 images, Next, you need to add your app’s icon, This is the icon, which we will be clicking to open our app. So again, we’re going to add our logo here Before we add our logo , make sure to resize our logo to this size. And then drag the image & drop it here. And as you can see our image has been added. So now we have added all the details needed to create our app. Now to create our mobile app’s .apk file, let’s Click ‘save settings’. And click ‘Build Android’ And as you can see, we can now download our app. So now if we click ‘download’ You can see that, our app has been downloaded to our computer. Now in order to get your app’s .apk file, First, we need to extract this zip file So let’s open this file Now right-click on it and click ‘extract’ Now if we click ‘extract’. You can see that we’ve got this folder. And if we open it! you can see that, we have now got the APK file So now we have successfully created our mobile app file. And now we can start using this app, by installing it on our mobile phone. Next, let’s see how to install this app on our mobile So to install the app, we need to copy this file from our computer, to our mobile phone. So to copy this file, First, let’s Connect our phone to this computer So to connect it, Let’s plug a USB cable to our computer and then connect it to our mobile And now if you open your file explorer, you can see that, we’ve now got our mobile phone here. Now to copy this app file, to our mobile, Let’s open this. now go to any folder. And then drag this file And drop it here. Okay! So now we have successfully copied the app file to our mobile phone. Now to install this app on our mobile let’s disconnect the cable And then open the file manager, on our mobile phone. Now let’s go to ‘downloads’ And here you can see the app file which we copied from our computer. Now to install this app, just open it and press ‘install’ As you can see, our app has been installed. So now If we press ‘Done’ And go to our home screen. you can see that! we have now got our app! So this is how you can install the app on your mobile phone. Now if we open the app you can see that, splash image which we have added And we have got the same products which we have added to our website. And if we go to our website, you can see that, we have the same products, which we have here Now if we go here you can see that we also have the categories okay Now, let’s try buying a product from our app let’s say your customer wants to buy this product So all they have to do is Just click on the product And click ‘Add’ And the product will be added to cart Now if they click 'cart' And click ‘continue’ It will ask them to log in Now, if a customer has an account on your website, they can use the same login details and make their purchase If they don’t have an account All they have to do is, just click 'Register' then fill up these details Now if they click 'Register' ‘’ It will take them to this page Where they need to fill up the billing details and click 'continue' Now here, you will find the same payment methods, which you’ve added on your website. Now to order the product from your app, All they have to do is Just select the payment method And enter the details and click ‘place order’ as you can see we have now successfully placed the order from on our app. Now let’s click ‘continue’ Now once a customer places their order from your app How do you know, that you have got an order? Now as soon as someone purchases a product, either from your app or from your website. You will receive an email to your inbox Now if we go to the website admin’s inbox, You can see that, we have got a mail about the order. Now if we open this mail you can see the details about the order and where you need to ship the product. Now, You can also see the same order, on your wordpress website. And as you can see! So to see the order on wordpress, let’s go to our wordpress dashboard And now if you go to ‘woocommerce’ And click ‘orders’ You can see that, we have got the same order here. Now if we click here, you can again see the order details. So this is how you will receive new orders from your customers. and once you get an order like this, You can go ahead and deliver the product to your customer. Now if you want to learn how to deliver products to your customers You can watch this video. Now once you’ve shipped your order, you need to change your order status here. So let’s click 'Complete' and click 'update' So now you know, How to track your orders from your wordpress site. Next let’s see how your customers can see their order status, from their mobile app. So now if your customer goes to the app You can see that, here we have an ‘account’ section. So if we open that, and go to ‘orders’ Here, they can see the order, which they placed. And if they open it, they can get more details about the order. So now we have successfully seen how orders work on our mobile app. Now, as we saw before, we have installed this app, on our own personal mobile phone. Now what IF you want to publish this APP, on the google’s play store? So that anyone can download your app You can do that by following the next steps. Next, let’s go to the Final Part of this video, where we see, ‘how you can publish this app on the Play Store’ So to publish this app on the play store We’re going to do 5 steps The first step is to ‘Create an account on the google play console This is the site, where you can publish apps on the google play store. So to create the account Let’s go to our browser then type ‘google play console’ And press enter. Now click the first link And then sign in to your google account. Once you have signed in You need to create the developer account, in order to create an app. So to let’s fill up these details And click ‘create’ now here It will ask you to pay a one-time registration fee to create the developer account, And here you can see the registration fee So to make the payment, just enter your card details and click ‘buy’ So now we have successfully created our developer account. So let’s click ‘go to play console’ And now we can create our android app, on the google play store! So now We can go to Step 2 which is to “create your app on google” So to create it Click ‘create app’ And then fill up these details Here you need to enter the name of your app I’m going to enter Trycasuals Now here choose app or game As we’re creating an app let’s select ‘App’ Now here you can either make your app as ‘paid’ or ‘free’. I’m going to choose ‘free’. Now enable these options and click ‘create app’ And it will take you to this page now we can go to step 3 which is to ‘set up your app’ So to set it up, you need to provide details about your app. let’s click 'View tasks' And go to ‘app access’ I’m going to select this one And click ‘save’ Now let’s go back And then go to ‘ads’ Here you need to answer whether your app contains any ads or not If your app contains any ads Just select this option Since our app does not have any ads I’m going to select ‘no’ And then click ‘save’. Now click here to go back Next, we need to add our "content rating". so let's click here. And click ‘start questionnaire’ Now here, enter your email address And then we need to select our app’s category Now as our app is related to ‘shopping’ I’m going to select this category. And click ‘next’ Here You can see a list of questions Now answer these questions based on the items you’re selling on your app. You need to just answer ‘yes’ or ‘no’ to all of these questions I’m going to select these answers... Once you have answered these questions And Click ‘Save’ Now click ‘next’ And then click ‘submit’ Okay! So now our app will be given a rating, based on our answers. Once you got the rating Click here to go back Next, you need to select your audience So let’s go to ‘target audience’ And here select the age groups of your audience I’m going to select ‘18 and over’ And click ‘next’ Now here select ‘no’ And again click ‘next’ Now to save the changes click ‘save’ Next, let’s go back And go to ‘news app’ Here you need to choose whether your app is a news app or not I’m going to choose ‘no’ Now click ‘save’ And then go back Now scroll down click here And choose your app category Then scroll down And enter your contact details And click ‘save’ Now let’s go to the dashboard Here you need to set up the look of your app on google play So let’s click here And then fill up these details. These details will be visible on google play So let’s enter that. And here, you need to add your app’s icon. So let’s drag our logo & drop it here. And here you can see a preview of how your icon will look on the play store Once you have added the icon Let’s scroll down. Now ‘here’ we need to add an image, which will appear here, on your app. So let’s drag the image And drop it here And next, we need to add screenshots of our mobile app. So let’s take a screenshots of our app And then add it here And click ‘save’ So now we have successfully added the details of our app. Once you’ve added these details... We can now go to step 4 of publishing our app , which is to ‘Upload our app file’ which we created before. So to upload your app’s .apk file Let’s go to dashboard Now go to ‘publish your app’ and click ‘view tasks’ Here you can select which countries, your app, needs to be available in. So just click on it And click ‘add countries’ Now If you want to make your app available in a particular country, you can click here. And if you want to make your app available in all of these countries you can click here And click ‘add countries’ And then again click ‘add’ Now your app will be available in all these countries. Now to upload your app file Click ‘create new releases’ And click ‘continue’ Now drag the mobile app file which we created, and drop it here And as you can see, Our file has been added here Now to save this, let’s click ‘save’. So now we have successfully uploaded our app! once you’ve completed these steps, our app is now ready for publishing. Next, let’s go to the final step, which is to ‘submit our app for review. Once we submit your app for review, our app will be reviewed by google and then added to the play store, So to submit our app, Click ‘review release’ now click ‘start rollout to production’. Now if we click ‘rollout’ Our app will be successfully submitted, for review. so now if we go to 'All apps', you can see that… our app is under review So now Google will evaluate our app And it will be published on the play store in the next 48 hours. So After 48 hours, if we go back to this tab And click ‘Refresh’ You can see that, we do not see ‘in review’ here Which means our app is now live. So next, Let’s see how our app appears on the play store Now if we click here... And click ‘view on Google play’ You can see that, our app is now live on the play store. Next, let’s check it on our mobile So now if we open play store on mobile And search for 'Trycasuals' You can see that we now have our app, here So this means, anyone can find your app & then install it. Now to install this app, all they have to do is, just click here And then click install And the app is installed! Now if we click open... You can see that, we have now installed our app, from the play store. So this is how you can publish your app on the play store! Now you know how you can create your app... and then publish it, on the play store. Now how do you let your website visitors, know that you have a mobile app on your site. So next, let’s see how you can add a button like this, to your website. And if someone clicks on this button, It will take them, to your app So to add a button like this, to your website. Let’s go to our wordpress site Now go to ‘edit with elementor’. And click ‘footer’ And now you will be able to edit the footer of your website. Now, this is the place, where we are going to add our button. Okay Now to add the button, just drag this ‘image’ element and drop it where you want to add the button. as you can see we have got a default image now to add a image here Just click here then drag and drop the image of the button here you can find the link to this image, in the description. Now if we drop this image, you can see that The button has been added here Once you have added the button, to add the link to this button Let’s click here And select ‘custom URL’ Now to add our app’s play store link, go back to this tab And then copy this URL And come back and paste it here Okay! So now we’ve added the button... and it's link once you have added the link if we click ‘update’. And then go to our website And click refresh, you can see that, our button is now added. Now if we go to our website on mobile & scroll down to the bottom you can see that, we have got the same button here Now if we click on this button You can see that, it now takes us to our app on the play store So this is how you can mention about your app, on your website That’s it, guys. Now you know how to create your own mobile app for free. Now if you want to learn more about WordPress you can checkout our complete WordPress course by clicking the link in the description Now if your customers are from India, you can watch this video. Make sure you subscribe to website learners to get more videos like this one Thanks for watching, I will see you in the next video. Take care Bye - Bye...