Custom Shopify app bouwen — van idee tot App Store

Custom Shopify app bouwen — van idee tot App Store

Meer dan 10.000 apps staan er in de Shopify App Store. Toch kiezen steeds meer merchants voor een custom Shopify app — gebouwd op maat voor hun specifieke workflow. Want de perfecte app bestaat niet altijd. Soms bouw je hem zelf.

In dit artikel loop je door het volledige traject: van de keuze tussen app-types tot de technische stack, OAuth-flows, billing en het review-proces van de App Store. Met realistische tijdsinschattingen en kosten.

Public app of custom app — maak eerst de juiste keuze

Dit onderscheid bepaalt alles: de architectuur, de deployment en hoeveel werk je erin steekt.

Wij zien bij klanten dat ze met een custom app starten — om snel te valideren — en later omzetten naar een public app als er vraag vanuit de markt is. Dat is een zinnige aanpak.

De technische stack: Shopify CLI + Remix

Shopify heeft zijn voorkeurs-stack de afgelopen jaren duidelijk gemaakt: Remix als framework, Shopify CLI als tooling. Dat is geen toeval. Remix is gebouwd op web-standaarden en past goed bij Shopify's server-rendered aanpak.

Initialiseer een nieuwe app met:

npm init @shopify/app@latest

Tijdens het init-proces kies je:

• App type: Node (Remix) of Python (Flask/FastAPI)
• Hosting: Shopify managed (via Oxygen) of zelf hosten

De gegenereerde boilerplate bevat direct een werkende OAuth-flow, session storage en App Bridge-setup. Dat bespaart je al gauw een dag werk.

Structuur van een Remix Shopify app

/app
  routes/
    _index.jsx          # App home (embedded in admin)
    auth.$.jsx          # OAuth callback handler
    webhooks.jsx        # Webhook verwerking
  shopify.server.js     # Shopify sessie-config
/extensions
  /product-widget       # UI extension (optioneel)

De shopify.server.js configureert de sessie-opslag. Standaard werkt dit met SQLite (lokaal), maar voor productie gebruik je PostgreSQL of een KV-store als Redis.

OAuth en scopes: vraag alleen wat je nodig hebt

De OAuth-flow van Shopify werkt via een redirect-URL. Na installatie stuurt Shopify de merchant door naar jouw auth/callback-route met een tijdelijke code. Jij ruilt die in voor een access token.

Shops vertrouwen apps meer als de gevraagde scopes beperkt zijn. Vraag je write_products aan terwijl je alleen leest? Dan valt dat op tijdens de App Store review — en bij de merchant zelf.

Definieer scopes in shopify.app.toml:

[access_scopes]
scopes = "read_products,read_orders,write_metafields"

Reken erop dat een scope-uitbreiding na publicatie een re-authenticatie vereist van alle geïnstalleerde merchants. Dat heeft impact op je gebruikers. Denk dus vooraf goed na over welke rechten je echt nodig hebt — nu én over zes maanden.

App Bridge: de brug naar de Shopify admin

App Bridge is de JavaScript-bibliotheek die jouw app integreert in de Shopify admin UI. Embedded apps draaien in een iframe; App Bridge regelt de communicatie met de host-omgeving.

Zonder App Bridge zie je een losstaande pagina. Met App Bridge zie je een naadloze integratie: dezelfde navigatie, dezelfde modals, dezelfde tone als de rest van de admin.

In Remix installeer je het via:

npm install @shopify/app-bridge-react

Praktisch gebruik: gebruik useAppBridge() voor navigatie en Modal, Toast, en ResourcePicker voor UI-componenten die passen bij de Shopify look-and-feel. Polaris is de bijbehorende component library. Gebruik die altijd voor embedded apps — het is geen optie, het is een App Store-vereiste.

Billing API: zo monetiseer je jouw app

Public apps die betaald willen worden moeten de Shopify Billing API gebruiken. Shopify int het geld en keert aan jou uit. Ze houden doorgaans 20% commissie in.

Je hebt drie billing-modellen:

Een recurring charge aanmaken via de GraphQL Admin API:

mutation AppSubscriptionCreate {
  appSubscriptionCreate(
    name: "Pro Plan"
    returnUrl: "https://jouwapp.nl/billing/callback"
    lineItems: [{
      plan: {
        appRecurringPricingDetails: {
          price: { amount: 29.00, currencyCode: USD }
          interval: EVERY_30_DAYS
        }
      }
    }]
  ) {
    appSubscription { id }
    confirmationUrl
    userErrors { field message }
  }
}

Stuur de merchant door naar confirmationUrl. Na bevestiging redirect Shopify terug naar jouw returnUrl. Sla de subscription-id op — je hebt die nodig om de status te checken en om te cancellen.

Webhooks: reageer op events in real-time

Webhooks zijn de ruggengraat van veel app-functionaliteit. Shopify stuurt een POST-request naar jouw endpoint zodra er iets verandert in de store.

Veelgebruikte webhooks:

• orders/create — nieuwe bestelling
• products/update — product gewijzigd
• app/uninstalled — verplicht te implementeren
• shop/redact — verplicht voor GDPR-compliance

De app/uninstalled webhook is niet optioneel. Shopify verifieert tijdens de review of je deze correct verwerkt. Verwijder sessiedata van de merchant zodra je dit event ontvangt.

Verifieer altijd de HMAC-signature van binnenkomende webhooks:

import { createHmac } from "crypto";

function verifyWebhook(body, hmacHeader, secret) {
  const digest = createHmac("sha256", secret)
    .update(body, "utf8")
    .digest("base64");
  return digest === hmacHeader;
}

Het review-proces van de App Store

De App Store review duurt doorgaans 1 tot 5 werkdagen voor een eerste inzending. Bij afkeuring begin je opnieuw. Wij zien dat apps die de checklist van Shopify niet goed doorlopen, meerdere rondes nodig hebben.

De belangrijkste vereisten:

• Polaris gebruiken voor alle embedded UI
• Correcte implementatie van app/uninstalled en GDPR-webhooks
• Privacy policy en terms of service URL's
• Werkende installatie-flow te demonstreren (Shopify testet handmatig)
• Geen externe login-screens — alles via OAuth

De listing zelf vereist screenshots, een duidelijke beschrijving en prijsinformatie. Investeer tijd in de listing. Een slechte listing betekent weinig installaties, ook als de app technisch solide is.

Kosten en doorlooptijd — realistische ranges

Een veelgestelde vraag: wat kost het om een custom Shopify app te bouwen? Dat hangt volledig af van de complexiteit.

Dit zijn ranges, geen vaste prijzen. Een app die diep integreert met externe systemen (ERP, PIM, logistiek) vereist meer werk aan datamodellering en foutafhandeling. Reken ook op ongoing kosten: hosting (Fly.io of Railway: doorgaans €20–100/maand voor kleine apps), monitoring, en regelmatige updates als Shopify de API versies depreceert.

Shopify depreceert API-versies elk kwartaal en je hebt 12 maanden om te migreren. Dit is ongoing onderhoud, geen eenmalige investering.

Wanneer bouw je GEEN custom Shopify app

Een custom app is niet altijd de juiste keuze. Soms is de bestaande App Store-oplossing goed genoeg — en goedkoper in totaal cost of ownership.

Bouw geen custom app als:

• De bestaande app €30/maand kost en 90% van je wensen dekt
• Je team geen tijd heeft voor ongoing onderhoud
• De app-logica volledig op de Shopify-checkout gericht is (dan zijn Checkout Extensions de betere route)

Wij adviseren bij Shopify projecten altijd eerst de App Store te scannen. Pas als er een duidelijke functionele gap is, of als de oplossing structureel sneller of goedkoper gebouwd kan worden, gaan we custom.

Shopify app vs. maatwerk in Laravel of een ander backend-systeem

Soms is de beste Shopify-integratie helemaal geen Shopify app, maar een externe backend die via de Admin API communiceert. Denk aan synchronisatie met een Laravel backend voor voorraad, pricing of klantdata.

Het verschil: een Shopify app draait als embedded interface in de admin en heeft een OAuth-installatie-flow. Een externe integratie via de API heeft geen storefront-UI en geen installatie-flow — je beheert de API-credentials zelf.

Voor interne tooling en B2B-omgevingen zien wij steeds vaker de combinatie: een slanke Shopify-app voor de merchant-UI, met een Laravel-backend die de zware businesslogica afhandelt. Dat geeft je de beste van beide werelden.

Veelgestelde vragen

Nee. Shopify ondersteunt ook Node (Express), Python (Flask/FastAPI) en andere stacks. Maar de officiële tooling en boilerplate zijn geoptimaliseerd voor Remix. Als je een greenfield project start, is Remix de snelste route naar een werkende app.

Doorgaans 1 tot 5 werkdagen voor een eerste inzending. Afkeuringen verlengen het proces. Een goed voorbereide inzending — met correcte GDPR-webhooks, Polaris UI en werkende installatie-flow — haalt de review vaker in één ronde.

Ja, maar het vereist aanpassingen. Je voegt een volledige OAuth-flow toe, implementeert de Billing API en doorloopt het review-proces. Plan dit van tevoren als je weet dat je later wilt schalen — sommige architectuurkeuzes zijn achteraf lastig terug te draaien.

Voor kleine tot middelgrote apps reken op €20 tot €100 per maand voor platforms als Fly.io, Railway of Render. Bij hogere traffic of specifieke compliance-eisen (zoals AVG-opslag in Europa) liggen de kosten hoger. Shopify Oxygen (managed hosting) is een optie voor Remix-apps, maar heeft beperkingen voor zware backend-workloads.

Wil je weten of een custom Shopify app de juiste keuze is voor jouw situatie? We kijken graag mee — zonder pitch, gewoon een technisch gesprek. Neem contact op.