How to make an app for free without coding: Create Your Apps..

 

Hi there, and welcome to this App My Site  tutorial. In this video we'll show you   how to convert your WooCommerce website into  your very own mobile app in just a few minutes. Mobile apps are extremely useful for e-commerce  because they simplify  the shopping experience for  smartphone users. Unfortunately hiring a developer  to create one is time consuming and expensive.    That's where App My Site comes in. Our platform helps you turn any WordPress site into a mobile app via our visual app builder. Here's how it works. First you'll need to create an  App My Site account and login. Then click on create new app On the next screen include the  following details to create your app. Enter your website's domain name Select WordPress as your CMS  platform from the dropdown menu.   Choose one of the ecommerce options  as the website type And name your new app. This is the name that will  be listed on the app stores. Then, click on the build app button. Once you've covered the basics for the  type of site you're converting into an app,   you can work on designing your  app in the appearance module.  This module gives you many options for  customizing different elements of your mobile app,   while also showing you a live preview of  your progress first you'll design your apps  icon this is what users will see on their home  screens and tap to find your app. You can use   the color picker to choose a background color  for your icon that matches your brand colors, and select a font from the drop down menu. There are also settings that enable  you to input your icon's text   and specify the font's color and size. If you would rather use a pre-made design  with your brand's logo for your apps icon   click on the upload button and  select the file you wish to use. Crop it as needed. Once you're happy with your icon select the next  button to start designing  your app's launch screen.  This is the first thing users will see  when they launch your app on their phones.  The settings available here are very  similar to the options for your icon.  You can select a background color and  build your logo with font and text options, or use an image for the  background of your launch screen. Add or remove text over the image as you like. Crop and save it. And then click on next. Now you'll need to create your login  sign up and forgot password screens.  You'll find the same settings here  as for the icon and launch screen. However, after you've chosen your background image  you can also upload a second image as your logo.   It will be placed on top of  the background image so make sure it has a transparent background if necessary. You can use the options in the  color theme settings to change   the look of your text and buttons and  use the arrow buttons to the sides of   the preview to scroll through the page and  make sure everything looks nice together. Click on next when you're satisfied to  proceed to your app's color theme settings.   These options affect your app's theme so to speak. The changes you make here will  impact your blog posts, product pages and other parts of your app that aren't the  specific screens you've already designed. Use the color pickers to change the colors of the  header and footer bars as well as the font color. Click on next when you're  happy with your selections   Here we have your app's dashboard which is what  your app's users will see after the launch screen.  It's essentially the launchpad  of your app and enables users   to navigate to the content they're looking for. You can see a demo approximation of your existing dashboard to the right where you can click  on the arrow buttons to scroll up and down . Taking a quick look through here will give you an  idea of what areas might still need some tweaking. Then using the blue toggles you can turn  the features listed here on or off to add   or remove them from your dashboard. If you click  on settings next to an item's name it will expand more options for that particular feature. If you  wish you can also rename these section headers.   For instance you can modify the  top banner to match your branding  by choosing its background  color or uploading an image You can also customize the icons  for the featured product categories   by changing their colors sizes shapes and layouts. If your website has categories you'll  want to spend some time in this area   Depending on how many categories you  have you'll be able to choose how many   or how little of them you can show on the screen. You can also choose what shape they appear in. Once you've decided how the images look  you'll want to ensure you're showing your   best categories ahead of the others. You can  choose to show only your parent categories,   show the ones that have the most of your products,  or simply select the ones you want to show.   Or you can also sort them as needed . As usual click on the next button when  you're happy with your app's appearance   and are ready to move to the next step. Once you're done creating your  app's dashboard you're finally ready to connect it to your WooCommerce site.  First you'll need to validate your ownership   of it. Click on the take me there button and  you'll be directed to your WordPress dashboard. Then navigate to Woocommerce  -> Settings -> Advanced ->  RESTAPI and click on the add key button. Enter a description such as App My Site.  Select the email address of your  website's administrator from the user drop-down menu and set the permissions to  both read and write, then select generate API key. On the next screen copy the consumer key  and head back to your App My Site account. Paste this code into the  WooCommerce consumer key field.  Then repeat the process for the consumer secret. Once both codes are entered,  click on the submit button. Next you'll be instructed to install the   App My Site plugin on your WordPress site. This will add the necessary code to your site  so that you can connect it to our platform. You can click on the download now button  to access the zip file and upload it to  your WordPress site or select take me there to  install the plugin from your WordPress dashboard. Once the installation is  complete click on activate.  Once you've made sure the  plugin is installed return   to your App My Site account  and hit the verify button. Your app is now complete and ready to go. Let's take a look at a few other things you   may want to check out before you make  it available for users to download. First click on connectivity trouble shooting  in the menu to the left of the preview. On the next screen select the troubleshoot button to make sure everything is in  working order and ready for users. It may take a moment for your results to load. Your app's performance is  dependent on your website. If your website is slow you'll see a  note at the top. We strongly recommend   that you upgrade your web hosting  to avoid issues within the app. If everything checks out head  to the app settings general tab Here you can make sure all the information  you entered at the beginning of the process is  correct. Then add a business email address, phone  number, and link to your terms and conditions.   This information will be  made available in your app. Navigating to the app menu settings enables you  to choose which types of content should appear in  your app's main menu. You have two options  here. If you toggle the first blue switch, you can choose the content you want  to link to from your App My Site menu. Toggling on the second switch will enable you  to select an existing menu you've created in   WordPress. Just select the appropriate option  by clicking on the check box next to its name. Make sure to save your changes you'll see a  confirmation message when your app has been  updated. Next you can click on the users  tab to specify how users can access your   app's content. You can allow them to  log in, register or browse as guests. There's also an option to prompt  users who are not logged in to do so. If you want to enable the social login  feature you'll find that here too. In the products tab there are many settings you  might want to explore such as listing specific  discount percentages or a generic sale badge,  including an additional information section in  your product descriptions, displaying an out  of stock watermark on relevant product images,   using your WooCommerce image settings instead of  the original images uploaded to your WordPress   media gallery, creating a related product section,  enabling users to filter and sort products   and enabling product search functionality. You  can turn on as many of these settings as you like, just remember to save your changes. In the checkout tab there are two options for you  to consider. The first will bypass your payment   method screen and leave it until the last step in  the checkout process. The second enables shoppers   to update their billing and shipping information  during checkout every time they make a purchase. Next we have the pages tab where you can determine  how users can interact with your web pages within   your app. You have the option to enable or  disable web view layouts within your app. You can also allow inputs so that  customers can fill out forms which  is very important for making purchases or  asking questions about products. Finally   you can choose to enable or disable  links within the web pages on your app. In the social tab you can add links to your  brand's profiles. These will be incorporated   into your app so that users can easily find  you on the platforms where you're active. In the app preview section you can see how your  app will appear to users and interact with it   as they would. It's a smart idea to come here and  take a quick look through the pages to make sure   you didn't miss anything during the design stage  and that all the content from your WooCommerce   site was imported correctly. Once the app loads  you should see the login screen you created. As we mentioned earlier the dashboard is the  central hub of your app. It likely includes  various featured products and blog posts as  well as your app's navigation menu and logo. Scroll through to check it out and make  sure everything looks as you expected. If you click on product categories -> view all   you'll see the categories you've  included on your WooCommerce site. Opening a product page should  show you the item's description, images, price and any other information  you've included on your WordPress website. We also recommend that you test the checkout  process to the best of your ability in order  to avoid issues post-launch. You can use  the arrow button at the top of the screen   to navigate back to the dashboard and tap on the  hamburger icon in the top left corner to open the   navigation menu. This is another way for users  to browse your products on their mobile devices. Test out the drop down menus to  make sure they open properly. Again you can click on any product to  view its images price and description. Tapping on the product image  will open a quick view window   where customers can get a  closer look at your images. It's also important to take your checkout screen  for a test drive to make sure customers can   complete their purchases. Once you're happy  with your app and have corrected any issues   you discovered while previewing it you can  download it. Click on the download app tab   and select your preferred mobile app operating  system by clicking on its corresponding build   app button. You'll be asked to confirm that your  app is ready to make its debut and then App My Site will begin building your app. This process might  take a few minutes. When your app is ready  you'll   be provided with a bundle id for your reference. To make your app available for both operating   systems repeat the process for the other version.  Note that you'll be asked to provide a team id, distribution certificate, and provisioning profile for IOS which you  can obtain from your apple developer account. If you want to send users  push notifications you'll   need an additional certificate for that as well. When your apps are fully built you can click on   the download buttons to save  the files to your computer. You can then submit both versions of your app to  the apple and google play stores respectively. If you need assistance publishing your app  you can always refer to our help center. Finally be sure to check out the app add-ons tab  where you'll find extensions that enable you to do   more with your app. You can white label it find  blazing fast web hosting, have your app and app   store listing professionally designed, get expert  assistance with publishing your app and much more. Thanks for joining us for this App My Site  tutorial. Head over to app my site.com  to sign up and get started for free  and we'll see you in the next video.