Hi guys Today we’re going to see, how
you can create an Online shopping app for your Ecommerce 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...
