Introduction to AppMySite
Hi there, and welcome to this AppMySite 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 AppMySite comes in.
Our platform helps you turn any WordPress site into a mobile app via our visual app builder. Here's how it works.
Creating Your App Project
First you'll need to create an AppMySite 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.
Designing the App Icon
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 app's 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 app's icon, click on the upload button and select the file you wish to use. Crop it as needed.
Designing the Launch Screen
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.
Designing Login & Authentication Screens
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.
Setting the Global Color Theme
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.
Configuring the App Dashboard
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.
Connecting to WooCommerce with API Keys
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 AppMySite. 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 AppMySite 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.
Installing the WordPress Plugin
Next you'll be instructed to install the AppMySite 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 AppMySite 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 troubleshooting 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.
Configuring General App Settings
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 AppMySite 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.
Managing User Access & Social Login
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.
Customizing Product Display Options
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.
Configuring Checkout and Page Behavior
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.
Previewing & Testing Your App
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.
Building & Downloading App Files
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 AppMySite 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.
Exploring App Add-ons & Next Steps
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 AppMySite tutorial. Head over to appmysite.com to sign up and get started for free and we'll see you in the next video.
