How to Build an E-Commerce App with WooCommerce and Canvas

Mobile commerce is on the rise and all the major online retailers are responding to the trend with revamped mobile websites and their own mobile apps.

Studies reveal that in 2020, mobile commerce is expected to make up 45% of the total e-commerce sales amounting to $284 billion. Gartner reports that the revenue from mobile commerce will equal 50% of the total digital commerce in the United States by 2017.

Building an e-commerce mobile app enables online store owners to break into the mobile commerce space and cater to the growing mobile traffic. Mobile devices aren’t only portable but also track the user’s location which allows mobile commerce-based businesses to deliver an enhanced user experience to their customers.

Prime e-commerce targets have often had (multiple) mobile devices in their pockets and purses making it easier for them to access a mobile app for online shopping. Users’ retail habits are transforming with easy access to Internet-enabled mobile devices. Mobile commerce is more accessible now than ever before.

WordPress and E-Commerce

Nearly 26% of all websites are powered by the WordPress content management system which makes it the most widely used platform worldwide. WordPress has a lot to offer in the e-commerce space – especially if you’ve got the right combination of themes, plugins, and add-ons installed.

The open-source platform features the massively popular WooCommerce plugin which allows entrepreneurs to set up their online store in a matter of minutes. Although WordPress is essentially a blogging platform, WooCommerce has made progressive strides in the past few years allowing webmasters to dip their toes into the e-commerce waters without breaking the bank.

WooCommerce has been so successful that it now counts 30% of all ecommerce stores online. That’s quite an impressive result for a plugin that was first launched just five years ago!

For all these reasons – and much more – using WordPress for e-commerce just makes sense. Let’s take a look at some mobile-optimized e-commerce themes you can use to build a native app for your online store.

E-Commerce Theme Recommendations

Getting started with e-commerce can be quite overwhelming. That said, WordPress takes most of the heavy lifting out of it and, to help you out some more, we’ll run the rule over some e-commerce themes that you can use to start off with a step in the right direction.



WPtouch Pro’s MobileStore is a WooCommerce-based theme that is mobile-ready from the get-go. Its high-converting, speed-optimized design makes it a popular choice for all kinds of online stores.  One of the best features on offer with MobileStore is that it’s compatible with all of the major mobile platforms including iOS, Android, and BlackBerry.


  • Menu and mini-cart are accessible from all pages.
  • Multi-touch product pages for an improved shopping experience.
  • Intelligent checkout form elements with contextual keyboard switching.

MobileStore is an ideal theme for those of you who want to build a native mobile eCommerce app. In the following section, we’ll walk you through a tutorial for building an e-commerce app with MobiLoud Canvas using the MobileStore theme.



Shopkeeper is a premium WordPress theme that enables online store owners to sell both shippable and digital products and manage their store from within their site’s dashboard. The theme owes its popularity to its design quality; a fully customizable theme with a wide-range of layouts on offer allows users to transform their site into a professional-looking online store.


  • Fully customizable design with advanced theme options.
  • Dedicated support team, regular updates, and extensive theme documentation.
  • Built-in portfolio and slider functionality.



XStore is a popular e-commerce theme for WordPress sites that makes it incredibly easy to set up a full-on online store complete with product showcase, shopping cart, and tons of header styles. The developers behind XStore offer exceptional customer support with each license and are available around the clock to help you out in the case of any problems.


  • Ships with over 200 PSD files for easy design modifications.
  • Tons of product page options to customize showcases.
  • Unlimited cart icons to choose from.

How to Build an E-Commerce App With Canvas Using MobileStore

MobiLoud Canvas is a complete solution to transform your mobile website into a native app for both iOS and Android. From an e-commerce standpoint, Canvas gives you the option of using your existing WordPress theme for your mobile eCommerce app ensuring that your site’s design, branding and functionality remains consistent.

The MobiLoud team will take care of building and publishing for you, so there’s really no work or learning to do to get your app published.

MobiLoud Canvas
MobiLoud Canvas

The service is designed to help you deliver value to your customers with a native app that transitions between different pages at blazingly fast speeds.

Push notifications allow your viewership to stay up-to-date with your latest promotional offerings and deals. You can Get a Free Demo to see how it works for your WordPress website.

Canvas leverages your site’s theme (or a new/different theme you’ll pick for the app) which means that you don’t have to worry about re-designing your app’s layout. There’s practically nothing new for you to learn or build.

It works by adding a native layer to your mobile website that includes intuitive navigation tools for users like a native tab bar, push notifications inbox, control panel, rating widgets, and preloading main pages so your app loads fast and straight to your web app’s main screen.

It bridges the gap between the mobile web and mobile apps by incorporating an app store presence, icon on the user’s home screen, offline use, quick navigation UI elements and native animations, content caching, native mobile advertising options (immune to ad blockers), WordPress user login options, and much more.

With MobiLoud Canvas, you can publish your app on both the App Store and Google Play. Once your app is published, you get:

  • Complete control over your mobile app’s content.
  • Means to send push notifications to your app users.
  • Your branded mobile app on Google Play and the App Store.
  • Access to mobile advertising (for app monetization).
  • A place on your customer’s mobile for your app.

And your customers get a whole lot more…

Features on offer with MobiLoud Canvas.
Features on offer with MobiLoud Canvas.

Preview of the Final Result

Here’s a preview of what your e-commerce site running the MobileStore theme will look like once it’s published as an app with Canvas.

Preview of MobileStore on MobiLoud Canvas.

Wrapping It Up

MobiLoud Canvas makes it easy for non-techy online store owners to create a fully functional mobile app and start selling right away. We encourage you to experiment with the free demo on your own and see how well it works out for your e-commerce site.

App strategy handbook coverWant to learn all about building and launching mobile apps for your WordPress site? If you liked this article, you’ll love the Mobile App Strategy Handbook. Click here to download it for free.

Written by
Pietro Saccomani

Pietro is the founder of MobiLoud, where he helps site owners grow their audience on mobile with their own mobile apps.

View all articles
MobiLoud Blog