How To Create A Mobile App for Your E-commerce Website| simple
video for android
for WordPress
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 e-commerce website like this, and now you want to convert this entire site into a mobile app like this. How can you do that? 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. You don’t need to buy separate hosting or pay monthly fees for your mobile app. 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 added to your app; you just have all the controls in one place. And you need to maintain just one platform instead of making changes on multiple platforms. The app that we’re going to create is a native app, which means it is fast-loading and doesn't have the same delay time as a web browser. Okay, I'm Darshan from Darshan Blogs. And let’s create our mobile shopping app. First, let’s see the e-commerce site that we created. This is the site, which we created using this video. So to create a mobile app for this site, we’re going to do three things. 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 take two 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. So to install this plugin on our site, we need to do two things. The first step is to ‘get this plugin. So to get this plugin, we need to purchase it. 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 installed our plugin. Now to download the plugin, let’s click 'download. 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. 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 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,' then 'activate.' And the plugin has been installed. 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 that 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 got a mail about the plugin purchase. Now to get the code, let’s open this email, and as you can see, we have 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, click ‘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 ‘Try Casuals.
Once you have entered the app name, next you need to get these two details from your website and then enter them here. So to get these details, Let’s go back to our WordPress dashboard, then to Woo Commerce, 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 and write. Now if we click ‘generate API key, you can see that we have the details we need for creating our app. Once you have these details, simply copy and paste them into this field. 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 two 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 it 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. The splash image is the startup image that appears when opening our app. To add the ‘startup image’, first, we’re going to resize our logo to 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 that will let us resize our logo image. So to resize the image, just click ‘upload, 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 are shown here. Once you've done that, select auto-mode." And now, if you click ‘resize image, our image will be resized to the required dimensions. and we have 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, you can 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 for our app. So now, when we open our app, it will show this image. Okay, now that you’ve added these 2 images, you need to add your app’s icon. This is the icon that 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 and drop it here. And as you can see, our image has been added. 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, we first 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 now have the APK file. So now we have successfully created our mobile app file. 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 into 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 that we have copied this app file to our mobile, let’s open it. 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 device, 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 that 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, we'll go to our home screen. You can see that! We now have our app! Now if we open the app, you can see the splash image that we have added. And we have the same products that we have added to our website. They can use the same login details to make their purchase. If they don’t have an account, all they have to do is 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 that you added to your website. Now to order the product from your app, all they have to do is just select the payment method, enter the details, and click ‘place order. As you can see, we have now successfully placed the order from our app.
Now let’s click 'continue. Now, once a customer places their order from your app, how do you know that you have an order? Now, as soon as someone purchases a product, either from your app or from your website, you will receive an email in your inbox. Now if we go to the website admin’s inbox, you can see that we have gotten 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 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.
Now that 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, they can see the order that 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 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 five 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 and 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 a developer account in order to create an app.
So 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 publish our Android app on Google Play! 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. Try casuals Now here Choose an app or game. As we’re creating an app, let’s select 'App. Now here, you can either make your app 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. 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 that 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, click 'Save. Now click Next. And then click Submit. Okay! So now our app will be given a rating based on our answers.
. 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 and 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 some 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 the app file’ that we previously created. So to upload your apps,
apk file Let’s go to the 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, click ‘add countries, and then again click 'add. Now your app will be available in all of these countries.
Now upload your app file. Click Create New Releases. And click 'continue. Now drag the mobile app file that 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, then 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 the Play Store on mobile and search for 'Try Casuals, you can see that we now have our app here. So this means anyone can find your app and 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 now have a default image to which we can add an image. 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, 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, 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, click refresh, and you can see that our button has now been added.
Now if we go to our website on mobile and scroll down to the bottom, you can see that we have 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 your app on your website. That’s it.
Thanks for watching; see you in the next article; thank you.