Voltar ao app
Documentação

Shopify App — Go-Live Setup

The Shopify integration code is complete (OAuth install, encrypted token storage, Admin API client, webhooks, connect UI). To make it actually install into a real store, wire the external pieces below. Shopify will not call localhost, so a public HTTPS URL is required.

1. Create the Partner app

Note: the product brand is now Splitlify; the Shopify Partner app keeps its existing name (Shoplify) while the theme-file access exemption review is pending.

  1. Sign in at partners.shopify.com → Apps → Create app → Create app manually.
  2. Copy the Client ID (SHOPIFY_API_KEY) and Client secret (SHOPIFY_API_SECRET).
  3. Create a development store (Stores → Add store → Development store) to test installs.

2. Public tunnel (dev)

Shopify must reach your dev server over HTTPS:

# pick one
ngrok http 3100
# or
cloudflared tunnel --url http://localhost:3100

Copy the public URL (e.g. https://xxxx.ngrok-free.app).

3. Configure .env

SHOPIFY_API_KEY="<client id>"
SHOPIFY_API_SECRET="<client secret>"
SHOPIFY_SCOPES="read_products,write_products,read_orders,write_themes"
SHOPIFY_APP_URL="https://xxxx.ngrok-free.app"   # the tunnel URL, NOT localhost
ENCRYPTION_KEY="<a strong random string>"

Restart npm run dev after editing .env.

4. App URLs in the Partner dashboard

  • App URL: https://xxxx.ngrok-free.app/ds/stores
  • Allowed redirection URL(s): https://xxxx.ngrok-free.app/api/shopify/callback
  • Compliance webhooks (mandatory): the app registers app/uninstalled, customers/data_request, customers/redact, shop/redact automatically after install; you can also set the endpoint to https://xxxx.ngrok-free.app/api/webhooks/shopify in the dashboard.

5. Install

  1. In Splitlify, open Lojas (/ds/stores), enter your dev store domain (my-store.myshopify.com), click Conectar via Shopify.
  2. Approve the scopes on Shopify → you're redirected back with the store connected.
  3. On a product, open the Publicar tab → Publicar como rascunho → the product appears as a draft in the store's admin (Products).

How it appears in the store

  • This is a custom/private-style app installed via OAuth; it shows under the store's Settings → Apps and sales channels once installed.
  • To make it embedded inside the Shopify admin (rendered in an iframe with App Bridge) or listed on the Shopify App Store, additional work is needed: App Bridge in the shell, an embedded app layout, and App Store review submission. That's a follow-up (see roadmap); the current build is a fully functional connected app driven from Splitlify.

Security notes

  • Access tokens are stored encrypted (AES-256-GCM via ENCRYPTION_KEY) in ShopifyStore.encryptedToken.
  • OAuth callback verifies the HMAC and a signed state (CSRF); webhooks verify the base64 HMAC over the raw body.
  • Disconnect in the UI forgets the token locally; a merchant uninstalling from Shopify triggers app/uninstalled which marks the store UNINSTALLED.