KitSync Shopify App

Embedded app scaffold ready for Next.js, App Bridge, and Vercel.

This starter keeps the repo at the root for Vercel, exposes the App Bridge metadata Shopify expects, and leaves the first real feature work for the next task.

Embedded context

Not present

Open through Shopify Admin or add ?shop=...&host=... after installation.

Environment setup

0/4 configured

Populate .env.local locally and matching env vars in Vercel before linking the Partner app.

Runbook

  1. 1. Copy .env.example to .env.local and replace the placeholder Shopify values.
  2. 2. Start the app with npm run dev.
  3. 3. When the Partner app exists, point its app URL and redirect URLs at http://localhost:3000.
  4. 4. Use npm run shopify:dev once Shopify CLI login and a Partner app are wired up.

Required environment variables

SHOPIFY_API_KEYplaceholder

Shopify app client ID from the Partner Dashboard.

(not set)

SHOPIFY_API_SECRETplaceholder

Shopify app client secret from the Partner Dashboard.

(not set)

SCOPESplaceholder

Comma-separated Admin API scopes requested by the app.

(not set)

HOSTplaceholder

Public app URL used for App Bridge metadata and redirects.

(not set)

Scaffold coverage

  • Next.js App Router project at the repository root.
  • Shopify App Bridge script and metadata injected in the layout.
  • Shopify API context initialized from env vars for future auth and webhooks.
  • Content Security Policy middleware suitable for embedded rendering.
  • Shopify CLI config files checked in for a later Partner app link step.

App Bridge preview

The App Bridge script is loaded globally. Once this page is opened inside Shopify Admin with valid shop and host parameters, the embedded test card appears here.