{"id":29139,"date":"2020-03-09T11:59:00","date_gmt":"2020-03-09T09:59:00","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=29139"},"modified":"2022-03-09T14:28:00","modified_gmt":"2022-03-09T14:28:00","slug":"woocommerce-app-builder","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/woocommerce-app-builder\/","title":{"rendered":"WooCommerce App Builder: How to Create an App for Your Store"},"content":{"rendered":"\n

These days, almost anyone can build a website and set up an online store thanks to platforms such as WordPress. However, creating a mobile or web application for eCommerce is still relatively intimidating. That’s where a WooCommerce app builder comes in.<\/p>\n\n\n\n

App builders enable you to take your online store and ‘repackage’ it for mobile devices. You can then reach a broader audience and take advantage of functionality such as push notifications, which can help drive sales.<\/p>\n\n\n\n

\n
\n

In this article, we’ll introduce you to the concept of WooCommerce app builders. Then, we’ll show you how to create an app for your store using AppMySite.<\/p>\n\n\n\n

Let’s dig in.<\/p>\n<\/div>\n\n\n\n

\n\t\t
<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tWant to create a mobile app for your #WooCommerce store? \ud83d\udcf2 Here's how to use an #app builder<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n\n

Introduction to app builders for WooCommerce<\/h2>\n\n\n\n

The way we interact with the internet has shifted dramatically during the past few years. Nowadays, over 50 percent of all traffic<\/a> on the web comes from mobile devices. <\/p>\n\n\n\n

On top of that, 25 percent of all eCommerce transactions<\/a> occur on mobile devices. If your online store is mobile-friendly<\/a>, that trend shouldn’t scare you. However, apps offer many features websites don’t, including push notifications<\/a>, touch ID purchasing, and much more.<\/p>\n\n\n\n

It’s important to note that some of these features are only available for platforms that qualify as ‘native apps’. They differ slightly from an alternative known progressive web apps (PWAs)<\/a>. <\/p>\n\n\n\n

In a nutshell, PWAs are applications that work like websites. They load in browsers and don’t require downloading. Although they tend to be cheaper and faster to build, they’re not as well suited as native apps to complex functionality such as eCommerce.<\/p>\n\n\n\n

Native apps, by and large, offer a much better user experience (UX)<\/a> than PWAs and traditional mobile websites. The problem is, developing one from scratch can cost thousands of dollars and take several months.<\/p>\n\n\n\n

If you can’t do the work yourself or afford to hire a mobile developer, your only other option is an ‘app builder<\/a>‘. Such platforms can take your website and repackage its content into a fully functioning native app.<\/p>\n\n\n\n

WooCommerce app builders are a relatively new concept, as eCommerce platforms<\/a> tend to be very complex and therefore difficult to accommodate. However, now that taking your online store mobile is a more attainable goal, it may be an opportunity worth considering.<\/p>\n\n\n\n

How to set up a store using a WooCommerce app builder (in 4 steps) <\/h2>\n\n\n\n

To understand the ins and outs of using an app builder for WooCommerce, it may be helpful to see one in action. Below, we’ve taken a fully-functioning WooCommerce site<\/a> using the Neve Shop<\/a> theme and turned it into a mobile platform with AppMySite<\/a>:<\/p>\n\n\n

\n
\"The<\/figure><\/div>\n\n\n

AppMySite enables you to generate test apps for WordPress and WooCommerce sites for free. However, to access all your app’s files, you do need to pay for a subscription. <\/p>\n\n\n\n

Subscription plans<\/a> start at $9 per month for an Android app or $19 per month for both Android and iOS, as well as some additional features.<\/p>\n\n\n\n

Here’s how to use it…<\/p>\n\n\n\n

Step 1: Create a new app project<\/h3>\n\n\n\n

Keep in mind, AppMySite only works with HTTPS-enabled websites, which makes sense for eCommerce apps. An SSL certificate<\/a> is a must for secure payments, so set up one now<\/a> if you haven’t already done so.<\/p>\n\n\n\n

Creating a free AppMySite account only takes a couple of minutes. Once you do, you’ll see a button that reads BUILD APP.<\/em> Go ahead and click on it:<\/p>\n\n\n

\n
\"Building<\/figure><\/div>\n\n\n

AppMySite will then ask you to provide your website’s URL<\/a>, what type of site it is, and a name for your new project:<\/p>\n\n\n

\n
\"Entering<\/figure><\/div>\n\n\n

Once you fill out the form, AppMySite will set up your project and you can move on to your app’s appearance.<\/p>\n\n\n\n

Step 2: Customize your app’s style<\/h3>\n\n\n\n

AppMySite guides you through the creation process step by step. The first thing it asks you to do is select or upload an icon and set its background color and text. This is how users will identify your app on their home screens, so consider these elements carefully:<\/p>\n\n\n

\n
\"Configuring<\/figure><\/div>\n\n\n

Next up, you’ll need to customize your store’s launch screen. As with your icon, you can upload an image or use a solid color with a text overlay:<\/p>\n\n\n

\n
\"Configuring<\/figure><\/div>\n\n\n

Then you can design your app’s login and signup screens using a similar set of options. Note that AppMySite also enables guest users:<\/p>\n\n\n

\n
\"Configuring<\/figure><\/div>\n\n\n

Up next, you get to play with your app’s top header and button options and design a dashboard for it. AppMySite enables you to re-arrange (but not customize) a few key elements including your store logo<\/a>, featured products, your shopping cart button, and more:<\/p>\n\n\n

\n
\"Arranging<\/figure><\/div>\n\n\n

You may notice that AppMySite doesn’t enable you to customize your product pages<\/a>. Instead, it pulls information from your site and applies default styling. That means your theme won’t shine through, but this may be a small price to pay for a low-cost eCommerce app.<\/p>\n\n\n\n

Once you’re done customizing your app, it’s time to connect it with your existing WooCommerce store.<\/p>\n\n\n\n

Step 3: Sync your app with your WooCommerce store<\/h3>\n\n\n\n

To connect your WooCommerce store with AppMySite, you’ll need to generate an API key for your website:<\/p>\n\n\n

\n
\"Validating<\/figure><\/div>\n\n\n

Head over to your WordPress dashboard. There, navigate to WooCommerce > Settings > Advanced <\/em>and select the REST API <\/em>option at the top of the screen. Click on the button that says Create an API key<\/em>:<\/p>\n\n\n

\n
\"Generating<\/figure><\/div>\n\n\n

WooCommerce will ask you for a description of the project you need the key for and which permissions it should provide. Set it to an admin account and <\/em>include both read and write permissions:<\/p>\n\n\n

\n
\"Setting<\/figure><\/div>\n\n\n

After you fill out that information, WooCommerce will generate Consumer <\/em>and Consumer secret <\/em>keys. Copy them over to AppMySite, then hit the SUBMIT <\/em>button.<\/p>\n\n\n\n

AppMySite will then ask you to install its official plugin<\/a> on your WordPress website, which it will use to sync your products. <\/p>\n\n\n\n

<\/div><\/div><\/div><\/div>\n\n