How To Convert Your WordPress and WooCommerce Websites into a Mobile App (Super Easy)

welcome back party people my name is daryl wilson and today i'll be showing you guys how to turn your wordpress website into a mobile application that you can fully customize now i got to be honest i spent a few days testing out various plugins and services and i came across app my site as one of the most coolest sites for you to use to turn your site into a mobile application now before i kind of pitch you guys on the service let me just show you guys what i'm talking about here and you can be the judge and we'll we'll go from there so let's say for example you guys want to create an application right well without my site you can fully customize your app now you can customize the app icon you can customize the launch screen the login and sign up the color theme and so on and so forth so for example you know you ever seen like the launch screen where you press a button and the little thing pops up you know like oh you know welcome whatever you can customize that now you can add in your logo you can change the background you can change the fonts it's pretty everything's fully customizable so for example let's say you want to add an image to your background we can add in a beautiful image here and just in case the image might be too bright or you want it to be a different color you can always add in a specific overlay to that background to kind of enhance the text you can also add in your logo which is really cool and if you don't have a logo if you're just getting started out and you're not really sure where to go you can always just use plain text and you can customize that text you can customize the color the font and also the size is right here as well and they do have my font they have poppins yes you know it's finally it's about time you know a lot of websites don't have poppins and oh my it's a beautiful font also you can customize your login screen so here you can see i added in this background image and it's just a really sleek really nice design and of course you probably want to upload your logo here um but then again you can just upload the text if you just want to go that route so we have just welcome you know maybe a site or maybe the maybe your website address would be better or your company name not just welcome right but uh yeah that's that but you can customize the color the fonts the logo you can customize everything about your your login and sign up screen and then also here we have color theme so you can actually change the color theme within the app which is really cool you can also change the font to kind of match what you're trying to go for because you know if you have a site that uses comic sans you might want to stick with comic sans and then also you can change the color of the buttons and the text color and all these other settings and then here we have the home screen and the home screen essentially is just what you want displayed on it so you can have the main banner then you can also select specific pages so you can kind of go through and say you know what i want this available on the app i don't want this available so you can kind of you know pick and choose what you want on your mobile application which is really cool i really do like that for most of us we're probably just going to use the webview which is just like your websites from a mobile browser right now also what i really do like about this website that a lot of other websites are lacking is the add-ons now they do have add-ons here that will actually help you guys get your app onto the app store so when you make an app a lot of the times the developers make apps for you and they kind of leave you in the dark and there's a lot of other things that go into it so you need to actually upload it to the store you have to meet certain requirements and certifications and this website will do all of that for you so it's a very convenient site i really do like the process of it they do have a lot of add-ons that i'll talk about a little bit later in the end of the video that go through uh everything that you need to get your app onto the app store and for android and ios devices so there is a link in the description below to app my sites if you guys like what you saw so far or like what if you guys like what you saw so far i'll go ahead and walk you through how to set all this up and the pricing is really fair it's a great application now the great part also about app my site is that you can get started completely free so you can customize and build your app you can change the colors so you can kind of see how everything looks before you pay now before i show you guys how to actually build the app which is really simple i just want to quickly touch base on the pricing because a lot of people are like well daryl you just want me to pay for the most expensive print ever you know it's like that is not true in fact uh for 19 a month you can get your application um published on the ios and the android market and when you browse around other competitors they're gonna want fifty dollars to like two hundred dollars a month so at my site pricing is really really competitive if they do give me a coupon code i will put it in the description below but for now let's just go ahead and get started for free and test out uh this service and see how it works out for you so when you get to this part you'll just click on get started for free and you'll go ahead and walk through and sign up with this service now i'm already logged in i already have a paid plan but what i'll do is i'll go ahead and log out here all right so from here you can go ahead and build your app so right here you'll see build app just go ahead and click build app now don't worry about all this stuff you can change this all later in the customization section but they're just trying to get you set up right here now i'll just enter in my domain tutorialdomain.com and then right here we have the cms platform we are using wordpress now this part is actually very important when i first used this i was thinking to myself it doesn't matter but it actually does matter they'll actually kind of they'll actually propagate your app according to whatever plan that you pick so uh for now i'll just select cms pages which is just like my wordpress pages and then give my app a name i will go ahead and put uh i don't know paddy wack we'll do paddy wacky and paddy back for everything now of course if you guys are an ecommerce website with the blog you'd want to put ecommerce websites if you're just a blog go ahead and put just a blog and then you can kind of customize it and design it and you guys will see you guys will see i know you guys are you guys are smart you guys are yeah you guys are smart and so there we go all right so this is the app icon now it's going to prompt you in this kind of step-by-step guide which i really do like so on the right side you see we have paddy wack right now of course we have this blue background color which is really boring right so you can go ahead here and you can upload your own logo or your own app which you might want to design or you might want to use your brand so from here i'll go ahead and use an icon i think i use this one right here you guys can see all of my future videos don't tell anybody all right i got a lot of other videos i haven't published yet but i'm i'm working on you know uh here we go i'm going to crop this image [Music] all right cool so on the right side you can see we have this icon now and that looks really really nice i really do like that so here i'll just click on next all right and now we have the launch screen all right all right cool cool and i just showed you guys this before so you guys can kind of understand how to do this so here they have the background image and what i really do like is that they actually have this whole library that you can kind of pick and uh you know mess around with so um let's do something here we got we got all these beautiful beautiful women over here we got a chicken and we'll just use this one all right we'll just keep it basic all right and uh there we go so that's our you know our launch screen right and we can you know change this to something like white or you can add an overlay but uh for now i'll just keep it basic you know just keep it real just leave it like that you can add your logo here so here under upload you can upload your own logo they do also give you the dimension sizes so 500 by 233 pixels so just make sure it's around that or ask your photoshop guide to photoshop it for you but uh yeah let's go back here to launch screen i just clicked on cancel so here i'll do uh what was it we had the where was it where was it we had the there it is all right all right and then here we can go ahead and change the text or the color and here we have different fonts so you can see on the right side how the font is changing of course you'd want to use a font that represents your business some some way you know somewhere around that but i'll stick the pop-ins and we'll do 28 there we go all right so this is good you know i'll click on next and this is pretty simple right i mean this is a very simple process i really do like this it's simple for anybody to get started with an app i myself made an app before and it was a nightmare and it was really uh we made it for a social network the wp friends i made a long time ago and it was just really really hard and we had no guidance and i was like yelling i'm an app developer i'm like come on bro like how do we do this and he's like yeah man it's gonna take a lot of time and i was like all right you know but uh here we go the background image and this is actually the one like on the login screen so something very subtle right maybe like this ocean you know of course you'd want to use something that represents your business or your brand uh here i'll probably use this black and then i'll increase that there we go so people can see the ocean but they can also see my brand at the same time all right and then here we have color theme and all this stuff you guys can customize this and go crazy i'm not going to go through that because you guys already know what colors are right and fonts so all right and then we have the color theme and this is where they actually load your app up so when they load your app up you're going to have parts of the app that will display so we can see here android and ios so i think something like black is good for me and i do like the buttons also i think this looks a little more this looks a little bit more modern you know i do like the black look so you'll go ahead and you know go through that don't worry about all this guys so once you guys get your app up and running you guys can go ahead and change whatever you want all right so don't panic it's not like that show deal or no deal all right you can always you know come back and say well wait i got a counteroffer you know here we have the home screen now i think the optimal settings here is just taking these off and just leaving the web view so here we have the actual app like menu and stuff like that where they can customize their accounts and they can access their pages but the webview you must have all right because if you don't have this nothing will show up so you must have your webview up and then here you have other settings you guys can you know you guys can design those or go through those on your own time but uh just make sure you have webview one all right all right we got that i'll be green be green all right and then here we go so now that we've actually designed the application we need to connect this to our website of whatever website that you want to connect it with so let's go to my website all right so make sure you guys log into your wordpress dashboard and from here what we're going to do is that we're going to install a free plugin so under plugins we'll click on add new and the plugin that we need or you guys can actually just click on download plugin it's just called app my sites either way it'll redirect you to the plugin or you can just go ahead and just uh you know type in their app my site app my sites let's see here we go and this is the plugin that you need so app my sites and that's it so just go ahead and activate it now once you guys activate it you'll go back over here and you guys can actually click on verify and what it'll do is that it'll sync up with your websites and it'll pull the information from your site so right here i'll click on verify you guys can also go to take me there you know it'll take you right to the the plugin so let's see how this works we clicked on verify and let's see if that worked i think that worked yeah congratulations you've set up your app give it a spin all right and then from here you guys can test out the app you guys can see how it looks you guys can you know just use like a few test runs on it all right here we go so i'm going to launch the app there we go and here i'll just click on allow that's the default app my site brand that they use and here we go this is my current website now i'm using the buddy boss theme here so you guys can see what this looks like and this looks very similar to facebook and it looks great in fact it looks identical so this is my current website so you guys can see what it looks like from the actual um you know the actual mobile view and it looks identical so it looks the same everything looks really really good it's connected i am having a tutorial soon on buddy boss and i will have a comparison between buddy boss and peep so uh coming out a little bit later but this video is just gonna be focused more on the application obviously so it looks great everything looks perfect and uh once that's done you guys can go ahead and say all right you know you guys can download the app you guys can test it out now once you guys actually uh you know you're happy with this and you're you know you think that this is for you or not you guys can upgrade to their pro plan now i really want to go ahead and talk about the plan to choose i made the mistake of actually purchasing the middle plan so here we have monthly right you guys can purchase monthly but personally i would just do yearly you will get a lot more off you'll get a large discount in fact you'll probably save around what 33 if you purchase the yearly plan now with the yearly plan you want to go with the pro yearly because here you can get it for all platforms so you can get it for the android or the ios device and yeah you know you want to be in both markets you don't want to just say well you know i'm just an ios guy or i'm an android guy because you want to get both of those markets and yeah so you want to make sure that you do purchase the actual uh the pro yearly also with this you get the white label so with the white label you can take off the app my sites and you can just say you know you can just get rid of them or you can put your website or whatever you want to do there they do also have a lot of other integrations you know they have social media integrations uh google login integration so they have a lot of really cool stuff and i know this looks really easy on the back end but guys um working with developers this is a lot of work you know and developers you guys know that this is a lot of work but people just take it for granted it's like uh this the service is really really amazing actually now um once you guys decide to go with the plan i would go with the pro yearly personally because then you guys can go ahead and publish your app and you can get it distributed on the app store all right so here i'll go ahead and click on dashboard right now you guys can explore these other options you know they have um you know connectivity you know app settings they do have these other settings that you guys can check out you guys do want to probably check out the app settings where you can put in your social logins or your social profiles your pages um your app menu and also the general settings so yeah just feel free to go ahead and customize this and check this out on your own time now i also do really want to talk about the add-ons when i first saw them i was kind of like yeah they're a bunch of crappy upsells and no they're actually pretty helpful and so here you'll click on dashboard and when you click on dashboard you'll scroll down and here we have some featured add-ons so we have white labeling which will remove the app mark the app my site watermark however i do believe that if you purchase the high-end plan that you will not have to pay this i believe it is included in the package but this one i really like here so this this right here will upload it to the app stores and it is a very tedious process these people are really right it's a lot of work and it's tedious and if you don't know what you're doing you're gonna have a really hard time with it so these guys will do all that for you so you can really get your app live on the actual app store also here you have language supports and i know there's a lot of multilingual people that watch my channel so if you guys do speak another language you guys can get language support here and they can kind of work on translating your app into a language of your choice so they have you covered they really have you covered every single step of the way so i just want to go ahead and introduce you to those add-ons let's go over here to see all you know i got to be honest i've only seen a few here uh consent form and yeah i don't know about that maybe uh let's see app store optimization actually consent form i think actually there's already consent form people log into the app stores right i don't know about that but uh yeah so you guys can go ahead and check out these other apps prevent screenshots oh that's a good one you know maybe they can't take screenshots you know that's you know maybe if you're running some you know i don't know some 18 or oversight maybe you don't want screenshots i don't know everyone has a different business i don't you know i never judge anyone on what kind of website they're running it's like whatever you want to do is whatever your business so but again guys um uh you guys can use appleby sites it's a great service if you guys have any questions for me feel free to let me know i will try to get a coupon code for you guys um i always reach out to these companies and see if they can give me a discount code and if they do give it to me i will put it in the description below of this video but uh yeah i really do hope this uh i really do hope this helped you guys out and until then party people i will see all of you guys in the next video take care

Channel: Darrel Wilson

Views: 195,973

Keywords: wordpress mobile app, mobile app, how to make an app, wordpress mobile app tutorial, wordpress app, wordpress, woocommerce mobile app, woocommerce app, woocommerce app builder, how to convert woocommerce to mobile app, how to convert wordpress website to mobile app, woocommerce, wodpress website, wordpress to ap, woocommerce to app, wordpress app maker plugin

Id: BE3iqBZfMvc

Length: 16min 43sec (1003 seconds)

Published: Mon Apr 19 2021