May 30, 2022

Low Code Shopify App Development using SmoothCode

We’ve all been there, knees deep into Shopify app development documentation with a million browser tabs open and struggling to make sense of what we’ve just read. Wondering if there’s an easy way to do this.

Prakhar Srivastava
Prakhar Srivastava
Low Code Shopify App Development using SmoothCode

We’ve all been there, knees deep into Shopify app development documentation with a million browser tabs open and struggling to make sense of what we’ve just read. Wondering if there’s an easy way to do this.

Well, Shopify App developers, there is an easy way to do this.

  • Why build the authentication for your app from scratch spending hours or sometimes weeks when you can do that in less than a minute?
  • Why devour the Shopify Billing documentation when you can set that up in minutes?
  • Why go through webhooks and access scopes documentation to see what access scopes you need for the webhooks you require when you can do this automatically?
  • Why keep looking at emails and partner dashboard to see who installed / unininstalled your app or upgraded / downgraded your plan when you can set that up in minutes?

Let’s dive deeper in the world of SmoothCoding where you can do all of this without writing a single piece of code.

Let’s create a Shopify app that would listen to a store’s order-create webhook and shows the list of all the orders for that stores

Here’s a list of things that will be handled by SmoothCode, our low code platform

  • Authentication: App installation from Shopify
  • Pricing: We will make it a paid app worth $10
  • Webhook Registration: We’ll register the order-create webhook
  • Access Scopes: In order to register order-create webhook, we need read_order permission
  • Slack Alerts: We’ll be notified about the installs and uninstalls on Slack

Here’s a list of things for which we will be writing the code

  • Show Order List from DB
  • Add Order to DB when an order is created

We will start with writing our application logic and then move on to setting up the app on SmoothCode

We’ll create this application using the following techstack:

  • NodeJS + Express
  • MongoDB
  • Ngrok

Let’s start with out application:

Create a new directory with the name of the app

mkdir low-code-order-dashboard

  • Start an npm Project and install few libraries

npm init # Fill the details
npm install dotenv # For loading environments
npm install express # For running Server
npm install mongoos # For interacting with Mongo DB
npm install smoothcode-client # For using SmoothCode helper methods

  • We’ll create an .env file


# SmoothCode Info - We'll fill it later

  • To insert Orders in our DB, We’ll create Order Table Schema
  • Create a new directory "app" and inside it create schema and create a new file order.js

mkdir app
mkdir app/schema
touch app/schema/order.js

  • Add the following code in order.js

const mongoose = require('mongoose')
const Schema = mongoose.Schema

const OrderSchema = new Schema({
    shopifyId: String,
    name: String,
    email: String,
    currency: String,
    amount: {type: Schema.Types.Decimal128},
    amountUSD: {type: Schema.Types.Decimal128},
    store: String,
    createdAt: Date

const Order = mongoose.model('Order', OrderSchema)

module.exports = Order

  • To show the list of orders, We’ll create our Order Listing Page now
  • Create a new directory views in app directory and create a new file getOrderList.js

mkdir app/views
touch app/views/getOrderList.js

  • We are using bootstrap to make the table look presentable, add the following code in getOrderList.js

const getTable = (orders) => {
    return => {
        return (`

const getOrderList = (orders) => {
    return (`
            <title>Order List</title>

        <table class="table table-dark">
                <th scope="col">
                <th scope="col">
                    Order ID
                <th scope="col">
                    Order Title
                <th scope="col">
                    Order Amount
                <th scope="col">
                <th scope="col">
                    Created At

module.exports = getOrderList

  • Let’s create our helper methods to Insert Order to DB and Get Orders from DB
  • Create a directory services in app and create files getAllOrders.js and insertOrder.js

mkdir app/services
touch app/services/getAllOrders.js
touch app/services/insertOrder.js

  • Let’s add the following code in insertOrder.js

const Order = require("../schema/order");

const insertOrder = async (webhookData, shop) => {
        currency: webhookData.currency,
        amount: parseFloat(webhookData.current_total_price),
        amountUSD: parseFloat(webhookData.total_price_usd),
        store: shop,
        createdAt: new Date(webhookData.created_at)
    }, (err, order) => {
        console.log(`Successfully created order with id: ${order.shopifyId}`)

module.exports = insertOrder

  • Let’s add the following code in getAllOrders.js

const getOrderList = require("../views/getOrderList")
const Order = require("../schema/order");

const getAllOrders = async (shop) => {
    const orders = await Order.find({store: shop})
    return getOrderList(orders)

module.exports = getAllOrders

  • Finally we’ll create our routes and index file
  • Create a new file index.js at the root of the project
  • Require all the packages

require('dotenv').config() // to configure our env variables

const express = require('express') // load express
const mongoose = require('mongoose') // load mongoose (MongoDB ODM)
const smoothcode = require('smoothcode-client') // load smoothcode-client

  • Require all the required methods

const getAllOrders = require("./app/services/getAllOrders")
const insertOrder = require("./app/services/insertOrder");

  • Intialize app using express and use express.json() to parse JSON POST data

const app = express()


  • Let’s start server and connect to mongo

// Starting Server
const server = app.listen(8081, () => {
    const host = server.address().address
    const port = server.address().port

    console.log(`Example app listening at http://${host}:${port}`)

// Connecting to MongoDB
    {useNewUrlParser: true, useUnifiedTopology: true},
    (err) => {
        if (err) throw err
        console.log('Successfully connected!')
    console.log.bind(console, 'Mongo Connection Error!')

  • Let’s add our routes in the same index.js

// Home Route
app.get('/', (req, resp) => {
        '<h1>Welcome to Low Code Order Dashboard</h1>'

// Page to Show Order listing
app.get('/order-listing', async (req, res) => {
    // This method validates that
    // the request is coming from SmoothCode for Dashboard
    const hmac = req.query.hmac
    const clientSecret = process.env.SMOOTHCODE_CLIENT_SECRET
    const shop =
    if(!smoothcode.isDashboardRequest(hmac, clientSecret, shop)){
        res.status(400).send('Bad Request')
    } else {
        // If the request is valid
        // Show the list of orders for the given Shop!
        const orderList = await getAllOrders(

// POST request for newly created orders'/order-create-webhook', (req, res) => {
    // This method validates
    // that the webhook is coming from SmoothCode
    const auth = req.headerss.authorization
    const clientSecret = process.env.SMOOTHCODE_CLIENT_SECRET
    const data = req.body
    if(!smoothcode.isWebhookRequest(auth, clientSecret, data)){
        res.status(400).send('Bad Request')
    } else {
        // If the request is valid
        // Insert the order to our DB
        res.send('Order Webhook Received!')

And that is it! We’re done with the app!

Now we'll:

  • Start Mongo Server

docker run -p 27017:27017 mongo

  • Start Node Server

node index.js

  • Open ngrok tunnel to port 8081
  • For this article we'll assume the domain to be

Let's move onto setting up our App on SmoothCode

  • Once we are signed up. Let’s create a new App by clicking the + button
  • Enter the name for your app and press “Continue”. We’ll name it “Low Code Order Dashboard”
  • Create an app on the Partner Dashboard and copy the Shopify Credentials into SmoothCode
  • Click on “Start Building” and That is it. Your application is setup now. Let’s add a Pricing for our App now.
  • Add your order-listing URL with domain in the “App Dashboard”
  • Navigate to “App Pricing” and click on “Add Pricing Plan”
  • Add in your Pricing Details as per your requirements like this and click on “Save”
  • Navigate to “Webhooks” and click on “Add Webhooks”
  • Select order/create and add order-create-webhook URL with Domain
  • Navigate to “Access Scopes” and Read Order scope should automatically be selected since it is needed to register Order Create Webhook
  • Navigate to “Slack Alerts” and click on “Add Slack Alert”.
  • Add alerts for Installs and Uninstalls by adding Slack Webhook URLs

Now our app on SmoothCode is also setup. Let’s link our application with SmoothCode

  • Navigate to “App Settings” at the Top Right
  • Copy “Project ID”, “SmoothCode client ID” and “SmoothCode client secret”
  • Paste them in our .env file and restart the server

SMOOTHCODE_CLIENT_ID={"SmoothCode client ID"}
SMOOTHCODE_CLIENT_SECRET={"SmoothCode client secret"}

  • Navigate to “Test Stores” and add your Test Stores so that you’re not charged for the payment

And our app is completed!

Let’s Test this app

  • Install it on a dev store.
  • Select a Dev store from the List. You will be redirected to the Permissions Page.
  • Scroll to the bottom of the page to see that the app is asking for “Read Orders” permission. Install the app by clicking “Install unlisted app”
  • You’ll be redirected to the “Payments” Page. The plan details should match the plan created on SmoothCode. Click on “Approve”
  • You’ll receive a Notification on Slack about the Install
  • Place an Order on the Store and You will be able to see the order on Ap

That is it! No need to write code for authentication, pricing, slack alerts, webhooks into your application. Leave all of that to SmoothCode. Focus on your application.

It is that easy to build an app using SmoothCode

Signup on SmoothCode today and start building Shopify app at lightening pace and without needing to keep up with Shopify changes.

You can reach out to us on LinkedIn, Twitter or

Looking to build a Shopify App? Sign Up and start building now