How to Create Shopify Apps with GraphQL & Node.js

As a Shopify store owner, you want tools that make your e-commerce business run smoothly, stand out, or save money.

A custom Shopify app is like a tailored suit, it’s designed just for your store’s needs, unlike off-the-shelf apps from Shopify’s App Store.

This guide explains how to build and test a custom app using GraphQL and Node.js in plain language, with analogies and examples to show how it can help your business.

Even without a technical background, you’ll understand the process, benefits, and where to get help from Shopify Experts.

What is a Custom Shopify App?

A Shopify app is a tool that adds features to your store, like automating inventory updates or offering personalized discounts.

A custom app is one you (or a developer) build to solve a specific problem unique to your business.

Analogy: Think of your Shopify store as a coffee shop. Apps from the Shopify App Store are like pre-made coffee machines they work well for common tasks. A custom app is like a custom built espresso machine designed to make your signature drink exactly how you want it.

Examples of Custom Apps

1. Low-Stock Alerts: Notify you when products (e.g., your best-selling T-shirts) are running low.

2. Unique Discounts: Offer a 10% discount to customers who’ve spent over $500.

3. Supplier Sync: Connect your store to a local supplier’s inventory system.

Benefits for Your Store

1. Solve Specific Problems: Address needs that existing apps don’t cover, like syncing with a niche supplier.

2. Save Money: Avoid monthly fees for multiple apps by combining features into one.

3. Stand Out: Add unique features, like a loyalty program tailored to your brand.

4. Full Control: Update or tweak the app whenever you need, without waiting for a third-party developer.

What Are GraphQL and Node.js?

GraphQL and Node.js are the tools used to build your app, and here’s what they do in simple terms:

GraphQL

GraphQL is how your app talks to Shopify to get or send data, like product details or customer orders.

It’s like a super-efficient waiter who brings only the exact items you order, not the whole menu. This makes your app faster and easier to use.

Example:

Want the names and prices of your top 5 products? GraphQL gets just that data, not your entire catalog.

Node.js

Node.js is the “engine” that runs your app’s code. Think of it as the kitchen staff who prepare your orders.

Node.js is fast and works well with Shopify, making it ideal for building apps.

Why Use GraphQL and Node.js Together?

GraphQL requests specific data from Shopify, and Node.js processes that data to enable your app to function, such as displaying low-stock alerts or applying discounts.

Why Build a Custom App for Your Store?

A custom app can save time, improve customer experience, or give you insights to grow your business.

For example, if you sell handmade candles, a custom app could:

• Alert you when wax supplies are low.

• Offer a “build-your-own-candle” feature at checkout.

• Sync orders with a local delivery service for faster shipping.

Let’s walk through how to build and test one, step by step.

Step-by-Step: Building Your Custom App

Here’s a beginner-friendly guide to creating a simple app, like one that lists your top 5 products by sales.

Step 1: Decide What Your App Will Do

Start by picking a problem to solve.

Examples

• Show your top-selling products on a dashboard.
• Email customers who abandon their carts.
• Sync orders with an external accounting tool.

Tip

Start with something simple to learn the process, like displaying top products.

Step 2: Set Up Your App in Shopify

You’ll create the app in your Shopify admin and set up a workspace on your computer.

In Shopify Admin

• Log in to your Shopify store.
• Go to Apps > Develop apps > Create an app.
• Give your app a name (e.g., “Top Products App”).
• Shopify will give you an API key and password (like a username and password) to let your app connect securely. You’ll also choose scopes (permissions, like accessing products or orders).

On Your Computer

• Install Node.js (free software) from nodejs.org. It’s like setting up a workbench to build your app.
• Use a code editor like Visual Studio Code (free) to write your app’s code.
• If coding feels overwhelming, you can hire a Shopify Expert to handle this part. Visit Shopify Experts to find a developer.

Analogy

This is like getting a key to Shopify’s data vault (API credentials) and setting up a workshop (Node.js) to build your tool.

Step 3: Write the App’s Code

Your app needs code to connect to Shopify and do its job.

Let’s create a simple app that lists your top 5 products by sales, using GraphQL to ask Shopify for data and Node.js to run the app.

Here’s a simplified, accurate code example using JavaScript (you’d share this with a developer or follow a tutorial):

// Import tools to build the app
const express = require('express');
const { ApolloClient, InMemoryCache, gql } = require('@apollo/client');
const fetch = require('node-fetch');

const app = express();

// Your Shopify store details (replace with your own)
const shopName = 'your-shop-name';
const apiPassword = 'your-api-password';

// Connect to Shopify’s GraphQL API
const client = new ApolloClient({
  uri: `https://${shopName}.myshopify.com/admin/api/2025-04/graphql.json`,
  cache: new InMemoryCache(),
  headers: {
    'X-Shopify-Access-Token': apiPassword,
  },
  fetch,
});

// Ask Shopify for the top 5 products
const GET_TOP_PRODUCTS = gql`
  query {
    products(first: 5, sortKey: TOTAL_SOLD) {
      edges {
        node {
          title
          totalInventory
        }
      }
    }
  }
`;

// Create a webpage to show the products
app.get('/top-products', async (req, res) => {
  try {
    const result = await client.query({ query: GET_TOP_PRODUCTS });
    const products = result.data.products.edges.map(edge => edge.node);
    res.json(products); // Show the product list
  } catch (error) {
    res.status(500).send('Error: ' + error.message);
  }
});

// Start the app
app.listen(3000, () => {
  console.log('App running at http://localhost:3000/top-products');
});

What This Does:

• Connects to your Shopify store using GraphQL.
• Asks for the names and inventory of your top 5 products by sales.
• Shows the results when you visit http://localhost:3000/top-products (will show 404, it's just for an example) on your computer.

For Non-Technical Owners

You don’t need to write this code yourself. A developer can use this as a starting point. Find a trusted developer through Shopify Experts.

Benefit

You could use this data to create a dashboard for your team or trigger alerts when stock is low.

Step 4: Test Your App

Testing ensures your app works without causing problems, like taste-testing a recipe before serving it.

1. Run Locally: Start the app on your computer to see if it fetches the right data (e.g., the top 5 products).

2. Use a Development Store: Shopify offers free development stores to test apps without affecting your live store. Create one at Shopify’s developer portal.

3. Check Features: If your app shows product data, make sure it’s accurate. If it applies discounts, test it with sample orders.

4. Handle Errors: The code above includes basic error handling to prevent crashes.

Benefit

Testing keeps your store safe and ensures customers have a smooth experience.

Step 5: Make Your App Live

Once tested, you “deploy” the app (make it live) using a hosting service like Heroku or Vercel. Hosting is like renting a small computer online to run your app 24/7. Then, install the app in your Shopify store via the admin panel.

Tip

A Shopify Expert can handle deployment if it feels complex. Find one here.

Benefit

Your app now runs automatically, saving you time or delighting customers with new features.

Key Things to Know

1. Shopify’s API: This is how your app talks to your store. GraphQL is the modern, efficient way to do this.

2. Permissions (Scopes): Choose what your app can access (e.g., products, not customers) for security.

3. Security (OAuth): Shopify uses a secure “handshake” to ensure only your app can access your store’s data.

4. Tools: Libraries like apollo/client simplify GraphQL coding.

5. Testing Tools: Use Shopify’s GraphiQL app (available in your Shopify admin) to test GraphQL queries.

6. Hosting: Your app needs an online home, e.g., Heroku (link shared above), to run continuously.

7. Updates: Shopify updates its API every three months (e.g., version 2025-04). Your app may need tweaks to stay compatible.

How This Helps Your E-commerce Business

• Save Time: Automate tasks like inventory checks or order syncing.

• Boost Sales: Add features like personalized discounts to encourage purchases.

• Get Insights: Pull data (e.g., top products) to make better decisions.

• Grow Easily: Custom apps can scale with your business, unlike some rigid third-party apps.

• Connect Tools: Link Shopify to other systems (e.g., your CRM) that lack existing apps.

Example: For a pet store, a custom app could:

• Alert you when dog food stock is low.
• Offer a “pet birthday discount” to loyal customers.
• Sync orders with a local pet supply warehouse.

Challenges and Tips for Non-Technical Owners

Challenges

1. Learning Curve: Coding and APIs can feel tricky. You may need help or time to learn.

2. Time: Building and testing take effort, especially for complex apps.

3. Costs: Hosting or hiring a developer costs money, but it’s often cheaper than long-term app subscriptions.

4. Updates: Your app needs occasional maintenance to work with Shopify’s API.

Tips

1. Start Simple: Try a basic app, like listing top products, to learn the process.

2. Hire a Shopify Expert: Find reliable developers at Shopify Experts to build or guide you.

3. Learn with Resources: Check Shopify’s free tutorials at shopify.dev or YouTube videos (search “Shopify GraphQL tutorial”).

4. Test Safely: Use a development store to avoid issues with your live store.

5. Ask for Help: Join Shopify’s community forums or Reddit (r/shopify) for advice.

Example: Custom Discount App

Want to give a 10% discount to customers who’ve spent over $500?

Here’s a simple GraphQL query to check a customer’s total spending:

query {
customer(id: "gid://shopify/Customer/123456789") {
displayName
orders(first: 100) {
edges {
node {
totalPriceSet {
shopMoney {
amount
}
}
}
}
}
}
}

Your app could:

• Use this query to calculate a customer’s total spending.
• Apply a discount if they’ve spent over $500.
• Show the discount at checkout.

Benefit: This encourages repeat purchases, boosting loyalty.

Next Steps for You

1. Pick a Goal: What problem do you want to solve? (e.g., automate inventory or add a unique feature)

2. Explore Resources: Visit Shopify’s developer portal for tutorials or hire a developer from Shopify Experts.

3. Create a Test Store: Sign up for a free development store to experiment safely.

4. Build or Hire: Try coding a simple app or work with a Shopify Expert to bring your idea to life.

5. Test and Launch: Test thoroughly, deploy your app, and monitor its impact.

Where to Find Help

Building an app can feel daunting, but you don’t have to do it alone. Shopify Experts are vetted professionals who can build, test, or maintain your app. Find one at Shopify Expert Agency.

For free resources, check Shopify’s developer documentation or join the Shopify Community forums.