Building Custom Shopify Apps — Extending Your Store's Capabilities

When You Need a Custom Shopify App

The Shopify App Store has thousands of apps for common needs — email marketing, reviews, upselling, shipping calculators. But as stores grow and their requirements become more specific, off-the-shelf apps often fall short. They may not integrate with your existing systems, may lack the specific features you need, or may introduce performance overhead from loading unnecessary functionality.

A custom Shopify app gives you complete control. It does exactly what your business needs, integrates seamlessly with your existing tools, and can be optimized for performance. At StrikingWeb, we have built custom apps for inventory management, subscription billing, multi-warehouse fulfillment, and wholesale pricing — all tailored to the specific requirements of our clients' businesses.

Understanding Shopify App Types

Public Apps

Public apps are listed on the Shopify App Store and can be installed by any Shopify merchant. They go through Shopify's review process and must comply with their app design guidelines. Building a public app makes sense if you are creating a product that serves a broad market need.

Custom Apps

Custom apps are built for a specific merchant and are not listed on the App Store. They are installed directly through the Shopify admin and have a simpler authentication flow. Most of the apps we build at StrikingWeb are custom apps because they are designed for a single client's specific needs.

Private Apps (Legacy)

Private apps have been deprecated in favor of custom apps. If you have existing private apps, Shopify recommends migrating them to custom apps to take advantage of improved security and access to newer API features.

Setting Up Your Development Environment

Shopify provides excellent tooling for app development. The Shopify CLI streamlines project setup, local development, and deployment:

# Install the Shopify CLI
npm install -g @shopify/cli @shopify/app

# Create a new app project
shopify app init

# Start the development server
shopify app dev

The CLI generates a project with a Node.js backend (using Express or Koa) and a React frontend using Shopify Polaris components. It sets up ngrok tunneling for local development, so your app is accessible to Shopify's OAuth flow without deploying to a server.

Authentication with OAuth

Shopify uses OAuth 2.0 for app authentication. When a merchant installs your app, they are redirected to Shopify to grant permissions. After approval, Shopify redirects back to your app with an authorization code, which you exchange for an access token. This token is used for all subsequent API calls.

// Using the @shopify/shopify-api library
import { shopifyApi } from '@shopify/shopify-api';

const shopify = shopifyApi({
  apiKey: process.env.SHOPIFY_API_KEY,
  apiSecretKey: process.env.SHOPIFY_API_SECRET,
  scopes: ['read_products', 'write_orders', 'read_customers'],
  hostName: process.env.HOST,
});

// Handle the OAuth callback
app.get('/auth/callback', async (req, res) => {
  const session = await shopify.auth.callback({ rawRequest: req, rawResponse: res });
  // Store the session for future API calls
  await sessionStorage.store(session);
  res.redirect('/');
});

Be deliberate about the scopes you request. Only ask for the permissions your app actually needs. Requesting unnecessary scopes erodes merchant trust and may cause Shopify to reject your app if you submit it for review.

Working with the Shopify Admin API

The Admin API is your primary interface for reading and writing store data. Shopify offers both REST and GraphQL versions of the API. We strongly recommend using GraphQL for new development — it is more efficient (you request exactly the data you need) and more powerful (it supports operations that are not available in the REST API).

// GraphQL query to fetch products with their variants
const query = `{
  products(first: 10) {
    edges {
      node {
        id
        title
        handle
        variants(first: 5) {
          edges {
            node {
              id
              title
              price
              inventoryQuantity
            }
          }
        }
      }
    }
  }
}`;

const client = new shopify.clients.Graphql({ session });
const response = await client.query({ data: query });

API Rate Limits

Shopify enforces rate limits on API calls to ensure platform stability. For the REST API, you get a bucket of 40 requests that refills at 2 requests per second. The GraphQL API uses a cost-based system where each query has a calculated cost, and you have a budget of 1,000 points that refills at 50 points per second.

Design your app to handle rate limits gracefully. Implement exponential backoff for retries, batch operations where possible, and use webhooks instead of polling to stay informed about store changes.

Webhooks — Reacting to Store Events

Instead of repeatedly polling the API for changes, register webhooks to receive real-time notifications when events occur in the store. Common webhook topics include:

orders/create — Triggered when a new order is placed
products/update — Triggered when a product is modified
customers/create — Triggered when a new customer account is created
app/uninstalled — Triggered when a merchant uninstalls your app

// Register a webhook
await shopify.webhooks.addHandlers({
  ORDERS_CREATE: {
    deliveryMethod: DeliveryMethod.Http,
    callbackUrl: '/webhooks/orders/create',
    callback: async (topic, shop, body) => {
      const order = JSON.parse(body);
      // Process the new order
      await syncOrderToERP(order);
    },
  },
});

Always verify webhook signatures to ensure the request is genuinely from Shopify and not a malicious third party. The Shopify API library handles this verification automatically.

Building the UI with App Bridge and Polaris

Shopify App Bridge is a JavaScript library that allows your app to integrate seamlessly with the Shopify admin. It provides navigation, modals, toasts, and other UI patterns that make your app feel like a native part of the admin experience.

Polaris is Shopify's design system for building admin interfaces. It provides React components that match the look and feel of the Shopify admin, ensuring a consistent experience for merchants.

import { Page, Layout, Card, DataTable } from '@shopify/polaris';
import { TitleBar } from '@shopify/app-bridge-react';

function OrderDashboard({ orders }) {
  const rows = orders.map(order => [
    order.name,
    order.customer,
    order.total,
    order.fulfillmentStatus
  ]);

  return (
    <Page title="Order Dashboard">
      <TitleBar title="Order Dashboard" />
      <Layout>
        <Layout.Section>
          <Card>
            <DataTable
              columnContentTypes={['text', 'text', 'numeric', 'text']}
              headings={['Order', 'Customer', 'Total', 'Status']}
              rows={rows}
            />
          </Card>
        </Layout.Section>
      </Layout>
    </Page>
  );
}

Using Polaris is not just about aesthetics — it reduces development time significantly because you do not need to design and build common UI patterns from scratch. Buttons, forms, tables, modals, and navigation are all provided as ready-to-use components.

Deployment and Hosting

Shopify apps need to be hosted on your own infrastructure. Popular hosting options include:

Heroku: Simple deployment with git push, good for getting started quickly
AWS (ECS or Lambda): More control and better scaling for high-traffic apps
Google Cloud Run: Serverless containers that scale to zero when not in use
Vercel or Netlify: Excellent for apps built with Next.js or similar frameworks

Regardless of hosting choice, ensure your app has SSL enabled (required by Shopify), handles errors gracefully, and logs enough information to debug issues in production. Use environment variables for all sensitive configuration (API keys, secrets, database credentials) and never commit them to version control.

Testing Your App

Shopify provides development stores for testing. These are free stores with full Shopify features that you can use to install and test your app without affecting real merchants or incurring charges. Create development stores through your Shopify Partner account and populate them with test data using Shopify's generated data tools.

Write automated tests for your webhook handlers, API integration logic, and business rules. Mock the Shopify API in tests to avoid hitting rate limits and to test edge cases that are difficult to reproduce with a real store.

A well-built custom Shopify app does not just add features — it creates competitive advantage. When your operations are automated, your data flows seamlessly between systems, and your customer experience is uniquely tailored, you are building a moat that off-the-shelf apps cannot replicate.

Getting Started

If your Shopify store has outgrown the App Store or needs integration with your existing business systems, a custom app is the right investment. At StrikingWeb, we build custom Shopify apps that automate operations, connect systems, and create unique customer experiences. Reach out to discuss your requirements.

ShopifyE-CommerceApp Development