E-commerce app development | How do I make an eCommerce mobile app?

Post Highlights [Table of Content]

     Hi guys today we’re going to see,  how you can create an online shopping app for your eCommerce website and In this article, I will teach you E-commerce app development.  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? So after watching this article,  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.

    E-commerce app development

     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 article. If you want to Recover files from formatted Compact Flash card.

     If you’re from a different country,  you can watch this article.  Once you create an app for your eCommerce site,  your store will be available on 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 LearnersAnd 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 article 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’. If you want How to protect your computer from hackers and viruses.

     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 article And it will take you to this page. Now,  this is the plugin that 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 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's to get the plugin’s zip fileLet’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 plugins once you’ve got the plugin zip,  file, We can now install this plugin,  on our website. If you want Microsoft Teams: With this new capability, your video meetings will be even more expansive.

    Person Looking at Phone and at Macbook Pro

     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 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 app file just click the link below this article 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 inboxHere you can see that, we have got a mail about the plugin purchase Now to get the code, let’s open this email as you can see,  here,  we have Got our purchase code! So let’s copy this code now goes 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 let’s go to our website and then copy this URL And paste it hereNow click ‘get started and you will get this page once you reach this pageNow 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 nameNext,  you need to get these 2 details from your website And then enter it here So to get these details to let's go back to our WordPress dashboard And then to ‘woo-commerce and click ‘settings now go to ‘advanced’. If you want Windows 10 has six advantages over previous operating systems.

     And click ‘rest API’Now to get these details to 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 them here first let’s copy this one and then paste it here next,  let’s copy this one and then paste it here 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 that appears when opening our app. If you want How to become a computer genius/hacker in 2021.

    Black and Gray Laptop Computer

     To add the ‘startup image’, First,  we’re going to resize our logo,  in this size. So to resize our logoLet’s go to a new tab and go to ‘resize the image. 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 the 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 appLet’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. If you want Microsoft President cautions Orwell's '1984' reality 'could happen in 2024.

     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 apps. 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 apps. 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 lets 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 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 categoriesokayNow,  let’s try buying a product from our applet’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 the cart Now if they click 'cart' And click ‘continue 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' Nowhere,  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 isJust select the payment method and enter the details and click ‘place order's you can see we have now successfully placed the order form on our app.  If you want How to screenshot on hp laptop.

     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.

    Woman Coding on Computer

     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 email 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 now if you go to ‘woo-commerce 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 article. If you want Read WhatsApp messages without appearing online.

     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 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 article,  where we see, ‘how you can publish this app on the Play Store’So to publish this app on the play store were 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 that's going 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 a developer account,  in order to create an app.

     So to let’s fill up these details And click ’ create’ nowhere 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 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 enterTrycasualsNow here choose app or game As we’re creating an applet’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. If you want How to secure android phone from hackers.

     let’s Click 'View tasks' And go to ‘app access I'm going to select this one And click ‘SaveNow let’s go back And then go to ‘ads’ Here you need to answer whether the app contains any ads or notIf 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 nowhere,  enter your email address And then we need to select our app’s category now as our app is related to ‘shopping's been 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 the 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 where you need to choose whether your app is a news app or not I'm going to choose ‘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 ‘SaveNow let’s go to the dashboard Here you need to set up the look of your app on google player 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 screenshot of our app And then add it here And click ‘save 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 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 And click ‘add countries’ And then again click ‘add’ Now your app will be available in all these countries. If you want End-to-end encryption is now available in Android's Messages app. Make sure it's turned on.

     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.

    Man in Red Polo Shirt and Beige Pants Sitting on Chair Holding Smartphone

     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 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 'Trycasuals'You can see that we now have our app,  here 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 elementary. 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 an 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. If you want You may now use Google Pay to pay in cryptocurrency by adding a Coinbase card.

     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 links once you have added the link if we click ‘update’. And then go to our website And click refresh, you can see that, our the 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 websiteThat’s it,  guys. Now you know-how to create your own mobile app for free.

     YouTube Video

     If you likable this article and it wasn't too problematical, believability pluvious to get it with your friends.

     

     

     

     

    Comments Section