Custom embedded Shopify app for B2B wholesale pricing and draft orders

Project overview

The client — a growing lifestyle and home goods brand we refer to here as a confidential merchant — runs a polished direct-to-consumer storefront on Shopify Plus while serving interior designers, boutique retailers, and contract buyers through a separate wholesale motion. Buyers expect net terms, volume breaks, and SKU mixes that differ from the public catalog. Shopify’s native price lists and customer tags helped, but the operations team still rebuilt quotes in spreadsheets, re-keyed line items into draft orders, and manually checked that the right discount landed on each account.

Web6 was engaged to build a custom Shopify app — not a public App Store product, but a private embedded application installed only on this merchant’s shop. The app lives inside Shopify admin, uses Polaris and App Bridge so reps feel at home, and persists pricing rules and quote state in an app-owned PostgreSQL database on Cloudflare-hosted infrastructure. Storefront touchpoints are deliberately narrow: authenticated B2B buyers see correct prices via customer context and metafields, while the heavy lifting stays in admin where sales ops already work.

The engagement ran twelve weeks from discovery through production hardening. We scoped one coherent problem — account-based wholesale pricing plus draft order creation for B2B buyers — rather than bolting on unrelated inventory or bundle logic. That focus let us go deep on OAuth, session tokens, webhook HMAC verification, GraphQL versus REST tradeoffs, and security patterns that survive Shopify API version upgrades. Theme UX improvements were secondary; we added a lightweight buyer portal link and cart validation script rather than redesigning the entire Online Store 2.0 theme.

Outcomes were measured in operations, not vanity revenue metrics. Order processing time dropped because reps stopped copying SKUs between systems. Pricing errors fell because tier rules compile to draft order line prices automatically. Adoption hit one hundred percent of the sales ops team within six weeks of launch because the app replaced a workflow they already hated — it did not ask them to learn a parallel CRM.

Engagements like this are delivered through Web6 custom Shopify app development .

Business and technical challenges

Wholesale pricing was fragmented. Some accounts inherited legacy percentage-off lists from a pre-Shopify ERP export; others negotiated flat rates per collection; a handful had SKU-level exceptions for hero products. Shopify customer segments and automatic discounts could approximate parts of this, but they could not express precedence rules (“use contract rate unless promotional override active”) or audit who changed a price and when. Reps trusted spreadsheets more than admin, which created drift between what buyers were quoted and what draft orders contained.

Draft order creation was the daily bottleneck. A typical rep flow required searching products in admin, mentally applying the buyer’s tier, adjusting line prices by hand, attaching internal notes, and pinging finance on Slack for approval. Multi-location inventory and pre-order SKUs added friction: reps needed to know which warehouse could fulfill without opening a second tool. Errors showed up as angry emails from buyers who received invoices that did not match approved quotes.

Security and compliance requirements were non-negotiable. The merchant handles buyer payment terms and contact data governed by Shopify’s protected customer data policies. Any custom app had to implement OAuth correctly, verify webhook signatures on every inbound request, rotate credentials safely, and avoid storing Shopify access tokens in browser local storage. Session tokens for embedded apps needed to work across admin navigation without forcing reps to re-authenticate hourly.

The team had been burned by a prior “quick script” integration that used a long-lived Admin API token pasted into a Google Sheet. It worked until Shopify rotated scopes, at which point orders silently stopped syncing. Leadership wanted an architecture aligned with Partner best practices — Remix template, explicit scopes, versioned GraphQL operations — so the next API release would not become an emergency.

• ✓ Account-specific price lists with precedence and audit history
• ✓ Rep-driven draft orders without manual line-item math
• ✓ Embedded admin UX that feels native to Shopify
• ✓ Webhook-driven sync when customers, products, or orders change
• ✓ Storefront price integrity for logged-in B2B buyers
• ✓ No dependency on unpublished or brittle REST endpoints

Goals and success criteria

Product goals centered on a single admin surface where sales ops selects a buyer account, sees eligible SKUs with computed wholesale prices, builds a cart-like draft order, and submits it for optional manager approval before sending the Shopify invoice link. Managers needed diff views when a rep overrode a tier price, with mandatory reason codes stored in the app database for later review.

Technical goals required a private custom Shopify app registered in the Partner Dashboard, installed via OAuth on the Plus shop, and embedded with App Bridge 4.x. All Admin API traffic would prefer GraphQL for reads and batched mutations; REST would remain only where GraphQL lacked a stable field we needed during the project window. Webhooks for customers/update, products/update, draft_orders/update, and app/uninstalled had to be verified with HMAC-SHA256 and processed idempotently through a queue.

We set explicit non-goals to protect timeline: no public App Store listing, no multi-tenant SaaS packaging, no replacement of the merchant’s accounting system, and no custom checkout extensibility in phase one. Storefront work would extend the existing theme with a B2B login prompt and price display component — not a full theme rebuild.

Success criteria were operational. Stakeholders wanted median draft order creation time under four minutes, fewer than two pricing corrections per hundred orders after thirty days, and full rep adoption measured by weekly active users in the embedded app. We did not promise revenue lift; wholesale volume was already growing, and leadership wanted confidence that fulfillment would scale without hiring another order-entry clerk.

Discovery and research

Discovery opened with shadowing three sales reps for two mornings. We recorded steps, not keystroke logs: how they looked up buyer tier, where they copied SKUs, how often they opened the Shopify product admin versus the wholesale spreadsheet. The spreadsheet contained twelve tabs and three hidden macros — a clear signal that Shopify native tools were failing the “single source of truth” test. We also interviewed finance on how draft orders converted to invoices and which fields had to be present for net-thirty terms.

We audited existing Shopify configuration: customer companies on Plus, metafield definitions on customers and products, existing price lists, and draft order templates. GraphQL introspection against a staging shop revealed which customer metafields could hold foreign keys to pricing tiers in our app database without exceeding size limits. We mapped each legacy spreadsheet column to either a Shopify native field, a metafield, or app-owned storage.

Competitive research covered marketplace wholesale apps and Shopify B2B features. Building private allowed custom approval flows and Zoho CRM hooks without per-seat SaaS fees. Week-one spikes validated encrypted OAuth token storage, session token exchange, GraphQL draft order mutations with custom line prices, and sub-second webhook HMAC verification on Cloudflare.

Application architecture

The system follows Shopify’s recommended embedded app shape: a Remix server on Node.js serves HTML and data loaders to the admin iframe, exchanges session tokens for offline access tokens per shop, and exposes a small set of JSON routes for AJAX actions from React components wrapped in Polaris. The app database — PostgreSQL via Prisma — stores pricing tiers, account-to-tier mappings, quote drafts in progress, approval audit rows, and webhook idempotency keys. Shopify remains the system of record for products, customers, inventory, and finalized draft orders; our database holds rules and workflow state Shopify does not model well.

OAuth installation begins at /auth/login, redirects to Shopify’s grant screen with scopes scoped to the minimum needed: read_customers, write_customers, read_products, write_draft_orders, read_draft_orders, read_orders, and read_inventory for the locations the merchant uses. After grant, Shopify redirects to /auth/callback where Remix validates HMAC on query parameters, exchanges the authorization code for an offline access token, and persists an encrypted session row keyed by shop domain. Online tokens power embedded session token validation; offline tokens power background webhook processing and scheduled tier recalculation jobs.

Session tokens are the embedded app’s front door. When a rep opens the app inside admin, App Bridge supplies a short-lived JWT. Our Remix authenticate.admin helper validates issuer, audience, and expiry, then loads the shop’s offline session for GraphQL clients. We never trust client-side JavaScript with Admin API tokens. Loaders run server-side; mutations POST to Remix actions that re-validate the session token on every request. This pattern eliminates the classic iframe cookie third-party blocking issues and aligns with Shopify’s current security baseline.

GraphQL Admin API is the default transport. Product catalog searches use productVariants query with cursor pagination; buyer context uses customer query with metafields for tier foreign keys. Draft order assembly calls draftOrderCalculate before create so tax and shipping hints match Shopify’s engine. We generated TypeScript types from saved operations using graphql-codegen to catch field deprecations at build time. REST Admin API appears only in a legacy inventory snapshot script scheduled to migrate — new code paths are GraphQL-only.

Webhooks arrive at a Cloudflare Worker endpoint that verifies X-Shopify-Hmac-Sha256 using the app’s shared secret, enqueues a normalized payload to a Postgres-backed job table, and returns 200 within Shopify’s timeout window. Remix workers poll the queue, dedupe by X-Shopify-Webhook-Id, and apply domain logic: customer update refreshes tier assignment cache; product update invalidates SKU price snapshots; draft_orders/update syncs status back to rep dashboards. Failed jobs retry with exponential backoff; poison messages surface in an admin “system health” panel.

Deployment uses Cloudflare for the Remix app and webhook edge, managed PostgreSQL with nightly backups, and CI that runs typecheck, GraphQL codegen drift detection, and HMAC unit tests on every pull request.

• ✓ Remix loaders/actions — server-side Admin API only
• ✓ PostgreSQL + Prisma for tiers, approvals, idempotency
• ✓ Cloudflare Worker webhook edge with HMAC verification
• ✓ Offline tokens for webhooks; session tokens for embedded UI
• ✓ GraphQL-first; REST limited to legacy read paths
• ✓ Shopify as source of truth for commerce entities

Admin and storefront experience

Admin UX prioritizes speed for reps who live in Shopify all day. The home route is a buyer search field powered by Polaris Autocomplete, querying customers tagged wholesale with app metafields attached. Selecting a buyer loads a split view: left column shows tier summary, credit hold flags, and recent draft orders; right column is a line-item builder with SKU search, computed unit price, quantity, and running total. App Bridge title bar actions include “Save draft” and “Submit for approval” with toast feedback on success or validation errors.

Approval managers see a queue route filtered to drafts pending review. Overrides above a configurable percentage threshold highlight in yellow; approving requires a note. Polaris Badge components communicate sync state — “Synced to Shopify draft order #D1234” versus “Local only — finish in app.” We reused Shopify’s resource picker for products so reps pick variants through a familiar modal instead of a custom typeahead that would drift from catalog changes.

Storefront touchpoints stay intentionally light. Logged-out visitors see standard retail pricing. Customers tagged B2B who log in trigger a theme app extension script that reads tier metafields exposed via Liquid customer object and renders “Your price” on product cards where a wholesale rate exists. Cart validation uses a Shopify Function in phase two to block checkout if a B2B cart contains a SKU without an assigned tier price, preventing accidental retail checkout on wholesale accounts. We did not rebuild PDP templates; we injected a compact price component and linked to the rep-assisted quote flow for complex multi-SKU orders.

We recorded Loom walkthroughs in an in-app Help drawer and ensured approval screens work keyboard-only with Polaris focus defaults.

Delivery process

Weeks 1–2: discovery, Partner app setup, OAuth spike. Weeks 3–5: tier models and line builder UI. Weeks 6–8: draft order GraphQL, approvals, webhooks. Weeks 9–10: storefront price display and ops analytics. Weeks 11–12: load tests, API version rehearsal, phased rollout with three pilot reps.

Two-week sprints with Friday staging demos. Canary launch: pilot reps on real drafts while others kept spreadsheet fallback until error rates stabilized.

SEO and discoverability (merchant site)

This engagement was app-first; SEO was not the primary deliverable. We coordinated with marketing so B2B landing pages did not leak tier language into indexed copy. Product JSON-LD still validated after theme script injection.

Performance and reliability

Admin app routes target sub-200ms loader times for buyer search on a warm cache; cold GraphQL product searches paginate at fifty variants per request to avoid Admin API rate limit spikes. We implemented Shopify’s leaky bucket awareness with centralized throttling and jittered retries on 429 responses.

Webhook ingress on Cloudflare averages under forty milliseconds to acknowledge, deferring heavy work to async workers. During a simulated Cyber Week burst — five hundred product updates in ten minutes — the queue drained without duplicate draft order writes thanks to idempotency keys on X-Shopify-Webhook-Id.

Storefront script loads deferred async; Lighthouse lab tests on PDP showed less than three kilobytes added gzip, with no measurable LCP regression on the merchant’s baseline theme. Database queries use indexed lookups on shop domain and customer GID; tier resolution avoids N+1 by batching SKU price fetches.

Security model

Security was designed in, not audited afterward. OAuth HMAC validation on install and callback rejects tampered shop parameters. All webhook bodies are verified with timing-safe HMAC-SHA256 compares before parsing JSON — failures log minimally and return 401 without leaking secret hints.

Access tokens encrypt at rest using AES-256-GCM with keys from a secrets manager; decryption happens only in server memory during GraphQL calls. Scopes follow least privilege and are documented in the runbook for quarterly review. Session tokens from App Bridge never persist in cookies accessible to JavaScript; Remix session cookies are HttpOnly and Secure.

Rep actions enforce shop-scoped authorization — a session for shop A cannot mutate tiers loaded in shop B even if someone crafts URLs. Manager approval routes check a staff allowlist stored in app settings synced from Shopify staff GIDs. PII in logs is redacted; webhook payloads store only IDs needed for replay.

Dependency updates run weekly; GraphQL schema changes gate merges via codegen diff. We documented GDPR webhook handlers (customers/redact, shop/redact, customers/data_request) even though the app stores minimal buyer PII beyond tier mappings — compliance handlers delete app rows by customer GID on request.

Internal security checklists covered CSRF on Remix mutations, SSRF guards on outbound hooks, and CSP headers compatible with admin iframe embedding.

• ✓ OAuth HMAC on install/callback
• ✓ Webhook HMAC-SHA256 with timing-safe compare
• ✓ Encrypted offline tokens at rest
• ✓ Session token validation on every embedded request
• ✓ Least-privilege Admin API scopes
• ✓ GDPR mandatory webhooks implemented

Testing and quality assurance

Unit tests cover tier precedence edge cases and webhook HMAC with rotated secrets. Integration tests run against a development store: OAuth install, GraphQL draft order recordings, webhook replay files. UAT: five reps created ten drafts each; finance signed off on invoice PDFs.

Measured outcomes

Within thirty days of full rollout, median time to create and submit a wholesale draft order fell from approximately nine and a half minutes to just under four — a fifty-eight percent reduction measured from app analytics timestamps (first buyer selection to successful draftOrderCreate). Reps reported the largest savings on multi-line orders where manual price entry previously dominated.

Pricing errors — defined as draft orders requiring finance correction before invoice send — dropped seventy-four percent compared to the prior ninety-day baseline. Most remaining corrections involved deliberate manager-approved overrides, not arithmetic mistakes. Buyer complaints about invoice mismatches effectively stopped in the pilot cohort.

Adoption reached one hundred percent of sales ops within six weeks; weekly active users matched headcount every week after mandatory training ended. Leadership attributed adoption to embedding inside admin rather than asking reps to bookmark an external portal.

We did not publish revenue outcomes. Wholesale volume continued on its existing growth trajectory; the win was operational capacity and error reduction, not a fabricated ROI percentage.

Lessons learned

Scoping one coherent B2B problem — tier pricing plus draft orders — kept the architecture understandable and the app maintainable. Attempts to add bundle inventory sync during the same twelve weeks would have diluted webhook and GraphQL effort.

Session token first embedded auth saved weeks compared to cookie hacks that break when browsers tighten third-party rules. Investing early in Shopify’s Remix template and authenticate helpers paid off every sprint.

GraphQL’s upfront typing cost was worth it when Shopify deprecated REST fields mid-project; codegen failures caught breaks before staging deploys. Keeping REST only for non-critical legacy reads reduced migration risk.

Reps adopt tools that meet them in admin with Polaris patterns they already know. Fancy standalone dashboards would have failed the adoption metric regardless of backend quality.

Operational metrics — time, errors, adoption — earned stakeholder trust more than projected revenue slides would have.

“Our reps used to live in two worlds — a spreadsheet for prices and Shopify for orders. The custom app brought pricing and draft orders into one place inside admin. We did not hire extra order entry staff during our busiest wholesale season, and finance stopped chasing pricing corrections every week.”

Suggested project visuals

• High-level architecture: embedded Remix admin, app database for tier rules, GraphQL to Shopify, HMAC-verified webhooks at the edge.

  File: custom-shopify-app-wholesale-architecture-diagram.webp

  ALT: Architecture diagram of a private embedded Shopify app with Remix, PostgreSQL, and Cloudflare webhooks

• Sales reps compose draft orders inside Shopify admin with computed wholesale prices per buyer account.

  File: shopify-wholesale-pricing-admin-dashboard.webp

  ALT: Polaris admin screen showing B2B buyer search and tier-based line item builder

• Approval workflow surfaces price overrides above threshold before invoices send to buyers.

  File: shopify-draft-order-approval-queue.webp

  ALT: Manager approval queue for wholesale draft orders with override highlights

• Lightweight theme extension displays authenticated B2B pricing without exposing tiers to guest visitors.

  File: b2b-storefront-wholesale-price-display.webp

  ALT: Storefront product page showing logged-in buyer wholesale price hint