Turn your WooCommerce Store into an iPhone App

We’ve been slogging away lately working through the App Store submission process and we’ve got some good news! WooToApp is now available on the App Store so you can turn your WooCommerce store into an iPhone App.

It’s been the most highly requested feature so far. We’ve been working away on our iPhone app in private testing forever but now it’s official.

Download WooToApp Store for WooCommerce – iOS

How much does it cost to turn a WooCommerce Store into an iPhone app?

Whether you sell 10 products on your store or 10000, WooToApp has pricing plans to suit your business now and into the future. Loading your data into our demo app is free-forever and super easy. When you’re happy, sign up for a paid plan. The cheapest paid plan is $49/mo, which we think is a great price even for tiny businesses.

How hard is it?

It’ll take about 5 minutes of reading and about 5 minutes of work. You need to create a set of WooCommerce API keys, fill out a short form, and download the app (iPhone, Android). It’s even easier if you just install the plugin, simply allow us access to your API keys and it’s done..

From there, just upgrade to a paid plan and we’ll get started building and submitting your app to the stores.

What features does it have?

  • This is why we’ve been working so hard! There’s multiple payment gateways built in and other external integrations.
  • We’ve built a design configurator so you can skin your app in one sitting, choosing colours and schemes and updating in real time.
  • We’ve been testing with both enterprise grade and shared hosting providers to make sure the app is performant no matter what the back-end.
  • We’ve built a push notification platform so you can keep the relationship active with your users, telling them about your sales and reminding them to come back often.
  • We’re still actively working on WooToApp, releasing new builds on average every week. This means we’re on top of industry trends and your app will always be at the front of the field.

What are you waiting for? Turn your WooCommerce Store into an iPhone app.

Setting the color scheme of your mobile app

Once you’ve got WooToApp up and running, and the plugin installed, it’s time to set up the colors of your app.

There’s 22 customisable colors and counting – below is a detailed list.

1. Main Background Color
2. Main Fore Color
3. Inactive Background Color
4. Header Color
5. Control Background Color
6. Control Border Color
7. Control Color
8. Header Background Color
9. Header Fore Color
10. Subtle Fore Color
11. Bright Fore Color
12. Button Primary Background Color
13. Button Primary Color
14. Nav Background Color
15. Nav Active Foreground Color
16. Nav Inactive Foreground Color
17. Hyperlink
18. Drawer Auth Background Color
19. Drawer Auth Color
20. Drawer Background Color
21. Drawer Border Color
22. Drawer Color

Here’s some annotated screenshots that show the actual location inside the app of these colours:
(TBA)

Creating a Facebook App – Tutorial (for facebook signin)

WooToApp allows your users to sign in with facebook, to make checkout faster and easier. Ultimately, creating the Facebook App will lead to increased mobile sales.

Note: “Facebook App” is really just an identifier that facebook uses. It’s not a real app, and requires no work after this initial setup.

Note
#2:
If you get stuck on this step, email us at [email protected] and we’ll help out. We can do this for you.

 

Creating a Facebook App – Tutorial

Here’s a quick guide to creating a Facebook App so your users can sign in with their facebook account.

  1. Visit https://developers.facebook.com/apps/ and hit “Add a New App”.
    (Facebook may ask you to create a developer account first if you’ve never done this before)

    Choose "Add a new App"

  2. Name your app, and enter an appropriate contact email. Hit “Create App ID”

    Name your Facebook App

  3. Select “Facebook Login” to configure the facebook login parameters.

    Select "Facebook Login"

  4. (Take note of the Facebook App ID – we’ll need this!)

    (Take note of the App ID)

  5. Configure the app settings. This includes uploading a nice icon, linking your terms of service and
    privacy policy if you have them, and choosing a category. Your customers will see this icon when they
    attempt to sign in with Facebook. Your category is almost definitely shopping!

    Configure the app, including uploading a nice logo.

  6. Click “Add Platform” as highlighted in the screenshot above. First, Add iOS.
  7. The only configuration needed for iOS is to add “host.exp.Exponent” Bundle ID.

    Paste in the config value to configure iOS login

  8. Click “Add Platform” again and add Android.

    Paste in these two key hashes (don’t try to type them!):
    /CcbGHdvqoupxH/yOk6PusWWJnU=

    rRW++LUjmZZ+58EbN5DVhGAnkX4=

    Paste in these two keys to configure Android login

  9. That’s it! We’re done. Hit “Save Changes”. Don’t forget you need the Facebook App ID when you head back to the plugin to finish setup.
  10. If you’re setting this up for a WooToApp Facebook login, switch back to the WooToApp Settings now in your
    wp-admin dashboard and paste in your Facebook App ID. (Don’t have the plugin? get it here)

 

Convert your WooCommerce Store to a mobile app for free

We’ve built WooToApp from the ground up to be a native app platform for eCommerce stores. We’re please to announce that you can easily convert your WooCommerce Store to a mobile app for free.

PS: Want the Super quick instructions? Scroll to the bottom.

You’re welcome to adjust, configure, send push notifications, and install the mobile app as often as you’d like – we’ll only ask you to pay once you want us to publish your app on the App and Play Stores.

We’ve published an article here about the difference between the free native app and the paid version.

What do I need before I can convert my woocommerce store to a mobile app

To connect securely to your store, we require from the start that your site use SSL. It’s an ecommerce store – if you’re not concerned about the lack of security, do it for the extra sales. Customers demand HTTPS when they are expected to enter payment details, and WooToApp is no different.

Your site must use WooCommerce as the eCommerce framework. WooToApp currently only supports WooCommerce. We’ve concentrated on just WooCommerce to get the experience just right in our native app.

You must be willing to share API keys with us. We connect to your store via API, and we’ll need API keys for that. It only takes the click of a button, it’s super easy.

Also, it goes without saying you’ll need a fairly recent (< 5 years old) Android or Apple device with a connection to the internet!

How to convert my woocommerce store to a mobile app for free

Once you’re ready to convert your store to a mobile app, visit the WooToApp homepage and click “Build My App”. You can do this from a mobile device or a desktop PC and it only takes a few minutes.

Showing the "Build My App" button on WooToApp homepage

Once you’re on the app builder page, it’s time to tackle the hardest step. Enter your email address, store name, and store URL. Double check you’ve entered these correctly, it’s super important that the store URL is correct. Also, remember we require https:// so we can connect securely.

Fill in the 3 fields and hit 'Continue'.

OK, hardest step done. Hit ‘Continue’, so we can wrap this up and see your store as a native app. We’ll send you to a special link to request API access. If you agree, click through to the thankyou page.

Connect to the API

That’s it! We’ll send you an email with a special link to download the customised app on your phone.

The link will send you to the App or Play Store to download WooToApp, and the final installed app will be customised to connect to your store API.

Finishing up – you’ve got your free WooCommerce mobile app!

If you’ve finished installing the app and spent some time viewing your categories, opening your products, and generally tapping around.. It might be time to install the WooToApp plugin.

The plugin allows you to configure colour schemes, set up the welcome screen, attach your paypal payments address, and all the other finishing touches you need for your demo app.

Once you’ve downloaded and installed the plugin, you can configure it by visiting WooCommerce > Settings > WooToApp. You’ll need to enter your Client ID and Secret Key that we email you during setup.

How do I share my free WooCommerce mobile app?

Having this great new branded mobile app is no good if you can’t test it on multiple devices, send it to your friends, and share it around the office for all to enjoy.

In the setup email we send you is a special link that can be re-used over and over to download and install the customised app. Make sure to share it around and get everyones opinion on your new native app.

This is also available inside the WooCommerce native app plugin.

Rolling out your WooCommerce mobile app worldwide

After you convert your WooCommerce store to a native app for free, you’re welcome to use the mobile app for as long as you like. We intend it to be useful while you decide if WooToApp is right for you, configure everything just right, and gather feedback from your team. However we won’t cut you off! Once you’re satisfied that WooToApp and your store are going to be a great combination, it’s time to bundle up your app properly and release it in the App Store and Google Play.

This step brings a whole bag of extra functionality to your mobile app that is missing or restricted in the demo app, such as:

  • Custom home screen icon and notification bar icon
  • Push notifications and scheduling
  • Detailed installation analytics and statistics
  • Deep Linking from your website to the mobile app
  • Regular security and maintenance app releases
  • Potential for additional custom development if required
  • Full, branded presence on the Apple App Store and Google Play Store

Once you’re ready, we have a pricing and signup page available where you can choose the right plan for your business starting from $49/month. Depending on your requirements, we offer varying levels of support, feature sets, and maximum allowed SKU’s. We’re a subscription service, so for a low fee every month we guarantee regular software updates, security updates, new features and great support.

 

TL;DR: How to convert your WooCommerce store to a mobile app for free:

  1. Hit the big purple button at top right “Build My App”.
  2. Enter your email, store name, store URL.
  3. Approve the use of your API keys.
  4. Open the email we send you on your mobile device
  5. Download the app from the email.

 

What’s the difference between the demo and a live WooToApp mobile app?

The WooToApp demo is a way to publish your WooCommerce store as a mobile app for free. You can fully configure the store and try the whole pipeline without any commitment.

To make the demo easy and fast to use, we have to cut out significant functionality.

Here’s a detailed breakdown of the features missing from the demo app:

  • The demo app loads your store data every time it’s opened.
    The production app has your store data embedded in the source code, cutting out a server roundtrip and increasing speed.
  • The demo app allows users to create/change the app to suit other WooCommerce stores.
    The production app does not have this functionality, making it 100% yours.
  • The demo app does not have fine grained analytics for you to review.
    The production app has detailed analytics.
  • The demo app will not appear on the Play Store, App Store, mobile device home screens with your logo and full branding.
    The production app will be fully branded to your business and does not mention WooToApp at all.
  • The demo app does not have any custom functionality or features.
    Production apps can have custom features added like third party payment gateways, integration of plugin functionality and custom code on your website.

  • The demo app cannot be distributed to your users.
    The production app is available on both major app stores, and the WooToApp plugin on your website will let your users know there’s an app available to use!

  • Push notifications are restricted in the demo app.
    The production app has a full push notification dashboard built in, ready to market to your customers at any time. Push notifications have your logo, message (including emojis!) and link to the page in the mobile app you need.

Installing the WooToApp plugin on your WooCommerce Store

You need to install the WooToApp plugin on your WooCommerce Store so the mobile app can communicate with your store correctly.

Follow the instructions below to get WooToApp installed.

  1. In your WordPress Admin panel, visit ‘Plugins’, and ‘Add New’.
  2. Search for ‘WooToApp’, install and activate the plugin.
  3. The plugin is now installed and active!

Now we need to start configuring your store.

  1. Click “WooCommerce” on the wordpress navigation bar and navigate to “Settings”
  2. Visit the “WooToApp” tab in the tabstrip in the main window.
  3. Fill out the short setup screen (name, email address, API keys)
  4. Hit “Save Changes”. We’ll email you a special link to install your new native app straight away.
  5. Work through the tabs in WooToApp settings and start configuring your app.
  6. To see the changes in your mobile app, open the sidebar and hit ‘Home’. This will force a refresh of store data.

 

Having problems? Email [email protected] and we’ll personally help you get up and running.

WooToApp Welcome Screen Banner Specifications

Your WooCommerce mobile app will make the best impression if the initial banners are crystal clear for customers.

Here’s the banner sizing details that WooToApp was designed to accept:

1080 px wide by 600 tall, PNG format.

Pass this PSD banner template on to your design team or partner to help them create perfect banners, ready to drop into your app.

 

(Don’t forget to download the banner template above to format your mobile app banners correctly).

Sharing your personalised WooToApp mobile app demo with others

The WooToApp Demo is a fully configurable mobile app that allows you to see your own eCommerce store on the app platform.

From the WooToApp plugin, you can configure your instance of the demo app completely, including colours, additional pages, homepage features, etc.

Once you’ve got the demo app looking just right, you should share it with other members of your team to gather feedback and any next steps. Here’s how:

  1. Sign in to your WooCommerce admin panel. Visit  “WooCommerce” > “Settings” > “WooToApp”.
  2. On the front page of the WooToApp Settings panel is a link you can share with your team.
    This link will pre-install WooToApp and load your ecommerce store, ready for testing.
  3. Your WooToApp Demo app will reload using the live configuration you’ve used to set up your store — including colours, additional pages, homepage features, etc.
  4. Once you’re ready to publish your app as a stand-alone, completely branded mobile app, sign up for a plan on our Pricing page. We’ll get to work bundling your WooCommerce store up as a native iOS app and a mobile Android app, ready for publishing on the app stores!

How to add custom pages to your mobile app

This article assumes you are using the WooToApp platform to serve your WooCommerce store as a mobile app.

Adding and removing custom pages to your mobile app is a task anyone in your business may need to do from time to time.

If you’re the type of person who likes to sort this out themselves, you’re in luck! WooToApp is a self service platform for adding, editing and removing content pages from your mobile app.

Adding content pages from WooCommerce to your mobile app

Here’s an image of the end result (we added a page named “Returns Policy” to our demo app)

WooToApp content page loaded from WooCommerce
WooToApp content page with menu overlayed loaded from WooCommerce
  1. Create the page in WooCommerce that will appear in your app. Use the title you’d like to see in your app. Feel free to format the page as necessary, including colours, images, and fonts.
  2. Sign in to your WooCommerce admin panel and visit the “WooToApp” plugin settings.
  3. Add the page to “Sidebar Pages” and save.
  4. On your mobile device, close and re-open your store dedicated mobile app to see the updated page appear from WooCommerce. Too easy!