Ionic Shop Advanced with Firebase v3

Ionic Shop Advanced with Firebase v3

Advanced Ecommerce Template with Stripe Payments and Admin




Member since 2014


iOS, Android  
4 years ago
3 years ago
amazon, webshop, ecommerce, admin, stripe, nodejs, market, shop, ionic, firebase, hosting, app, payments, stripe, payments, stripe, checkout, checkout, v3,

** Important Announcement - The most recent version of this product has been upgraded to support Firebase v3 **

The changelog is listed at the bottom


The Ionic Shop - Advanced Edition is the complete solution to start your own eCommerce app or webshop today. It contains everything you need to sell your products immediately and receive payments on your account. It also comes with a complete Admin Management part that can be used by non-developers to manage the content of the app.

The shop utilizes powerful tools and is crafted using best practices. It leverages on the speed of Google's Firebase ( for the database needs, and on the power of Stripe ( to process your payments to your account with no delay.

The package is split in two parts that work together but that can be also used individually. In this way the package remains flexible to multiple or alternative needs. Each part comes with an easy but extensive documentation to guide you through the setup.

Complete Setup Services for Non-Developers

If you are not a developer but would still like to use this package, then we also offer a Quick-Start Service. One of our developers will setup this package for you and guide you through the process. We also offer personal customizations (i.e. design and functionalities). If you are interested, feel free to reach out to us on [[email protected]](mailto:%[email protected]).

Try before you buy

You can try the Ionic-App Part by downloading Ionic View ( Then sign in and use the following app ID to fetch a preview of the app: 1377d683.

Part 1: Ionic App

The Ionic App is the client-side of your app which you can publish on the Apple's App Store or Androids Play Store.

Optimized for speed

The browsing is optimized by the so called denormalization technique. In this way users can quickly retrieve products in a matter of miliseconds, even when you host a large number of products in your app (+1000).

Advanced browsing, searching and sorting of products

Users can search for products by category, tag, author, title or by keywords. In addition, the users can sort the products by a couple of features: Price (H-L), Price (L-H), Number of comments, Rating average, Number of sales, Highest turnover, Date, Last updated.

Social proof and user interaction

Users can rate products (only when they have purchased an item) and add comments. In addition, every sale is recorded, allowing the platform to display the number of sales, the average rating and the number of comments. This is mostly used to enhance the social proof of product (a common marketing method used to triqqer the client to purchase a product easier).

(temporary) Discounts, inventory and limited offer

The seller (admin) can add a couple of features to trigger the user to purchase this product. The first includes inventory management, which will display a call for action "Only X products left!". The admin can also set a discount for a specific product, and optionally when the deal will end. This translated into a call for action "-X% discount" and "Deal ends on [DATE]". All three are powerful marketing tools.

Attributes (e.g. color, size, ...)

The admin can also set certain attributes for a product. For instance, if you are selling clothes your product might have the options: Color: [green, yellow] and Size: [S, M, L, XL]. The attributes are fully dynamic meaning that you can change the options for each product. You can also add or remove as many attributes as you like.

Additional buyer fees

The admin can also change the buyer fees, which are immediately reflected in the Ionic App. For instance, you may wish to add a certain VAT or other taxes to the purchase of the product. The admin can add as many fields necessary and any change is reflected in the Ionic App in real-time.

List of all functionalities:

  • Browse products by category (browsing is optimized by using noSQL and compound indices)
  • Sort products based on multiple assets (Price, turnover, nb comments)
  • Comment or rate products
  • Keep track of the sales
  • Keep track of the inventory
  • Discount management
  • Add or remove products to the Shopping Cart
  • Place an order for the current Cart
  • Pay with Creditcard for the items. Earnings are directly transfered to your Stripe Account
  • Validate Creditcard with Stripe Checkout
  • Easy customizable design with Ionic
  • Sign-up using E-mail or Password (social login is coming up in next update)
  • Manage your account
  • View past orders
  • Save items

For the developer:

  • Written in AngularJS
  • Front-end leverages on the powerful Ionic Framework
  • Database hosted on Firebase
  • Payments are processed through Stripe (includes also Server-Side code, see Part 2 of the package)

The design and components can be easily customized using Ionic directives. You can find all the info needed in the Ionic Documentation.

Part 2: Stripe Payment API and Noodlio Pay

To process your payments, we make use of the Stripe payment gateway to transfer your earnings with no delay. Since we are leveraging on the power of the Noodlio Pay API, you don't need to setup this part or host it on a costly VPS like Heroku or Cloud9. We have already taken care of this for you. By acquiring this template, you are also eligible to all updates of the payment API.

Essentially, Noodlio Pay replaces your server-side, saving you the time to learn a new server language, test, validate and so on the server-side for your payments. In other words, it's hassle-free payment!

Part 3: Admin Panel to Manage Products

The third part consists of an Admin Interface. The interface is designed such that anyone without coding experience can use it to manage the products that are displayed in the Ionic app.

Functionalities include:

  • Add or delete products
  • Manage the categories and products
  • Manage the buyer fees
  • Manage the call for action buttons (Discount, Inventory, Deal ends)
  • Upload and edit screenshots (customizable dimensions)
  • View past order details and sales
  • Changes are reflected in the Ionic App in real-time.

For the developer:

  • Written in AngularJS
  • Database hosted on Firebase


Read the latest documentation on this repository


If you have questions or remarks, please let me know by either typing a comment on this site, or by e-mailing me to: [[email protected]](mailto:%[email protected])

Have fun!


``` // v1.0 v1.0 Initial release of Ionic Shop

// v2.0 - Redesign - Rebuilt from Scratch - Added significant amount of functionalities

// v2.4 - Included security_rules.txt - Fixed bug with orders (keeps loading after purchase) - Fixed bug when no categories or fees are defined

// v3.0 - Replaced the node-server-side with Noodlio Pay: an effortless solution to accept payments with Stripe. - No need to host or setup your own server-side anymore. See the docs on how to update.

// v3.1 - Updated docs

// v4.0 - Firebase v3 support and bug fixes ```