Open the Shopify page that contains this section. The builder UI shows tabs on the left and a phone preview on the right.

• App title ≤ 25 chars (e.g., Vista Commerce).
• Purpose ≤ 2 lines.
• CTA text (e.g., Connect store).
• Brand hex: #0D384D; Accent hex: six-digit format.
• Optional: Blueprint preset (Commerce / Content / Loyalty).

• Name tabs to fit your product (e.g., Home, Catalog/Library, Schedule, Insights, Settings).
• Enable the blocks you plan to ship in v1 (Tips, Product Grid, Scheduler, KPI Tiles, Empty card).

• Paste Client ID from Shopify Partners (required).
• Select ≥ 1 scope (min: read_products; add write_products if you mutate).
• Note: Application URL and Redirects are locked to vistabylara.com.

• Company: Vista by Lara.
• Support email: support@vistabylara.com.
• Privacy URL: https://vistabylara.com/privacy.
• Support URL: https://vistabylara.com/support.
• Toggle Embedded and GDPR if needed.

• Open the Preview modal and review each file.
• Select Generate files to download.
• Optional: Create ZIP (server) to receive a zip link.

• Blueprint presets for Commerce/Content/Loyalty.
• Validation: title ≤ 25, short purpose, CTA required, hex colors.
• Profile: Starter (minimal Koa) or Production (OAuth-ready stubs).
• Live preview mapping of title/purpose/CTA/highlights/palette.

The builder composes files from <template> tags and replaces placeholders based on your inputs.

• [[APP_NAME]] → Design → App title (e.g., Vista Commerce)
• [[APP_HANDLE]] → Auto from title (kebab) (e.g., vista-commerce)
• [[CLIENT_ID]] → Shopify → Client ID
• [[APP_URL]] → Locked → https://vistabylara.com/
• [[SCOPES]] → Shopify → scopes (e.g., read_products, write_products)
• [[COMPANY]] → Settings → Company (e.g., Vista by Lara)
• [[SUPPORT_EMAIL]] → Settings → Support email (e.g., support@vistabylara.com)
• [[PRIVACY_URL]] → Settings → Privacy URL (https)
• [[SUPPORT_URL]] → Settings → Support URL (https)
• [[PURPOSE]] → Design → Purpose
• [[HIGHLIGHTS]] → Design → Highlights
• [[EMBEDDED_BLOCK]] → Settings → Embedded (e.g., [embedded]\nenabled = true or blank)
• [[GDPR_BLOCK]] → Settings → GDPR (webhook subscriptions or blank)
• [[GDPR_ROUTES]] → Settings → GDPR (adds Koa routes or blank)

• shopify.app.toml (with [auth], redirect_urls, access_scopes, optional [embedded], optional GDPR)
• .env.example
• package.json (Koa starter)
• server.js (Koa baseline + CSP + /health + sample /api/products + optional GDPR routes)
• README-commands.txt (dev commands + where to register in Partners)
• PRIVACY.md, SUPPORT.md, LISTING.md

Extra when Profile = Production: shopify.js (API placeholders), auth.js (OAuth route placeholders), session.js (session store placeholders).

• Title empty or longer than 25 characters
• Client ID empty
• Scopes list empty
• Brand/Accent not 6-digit hex (e.g., #0D384D)
• Support email present but invalid format
• Privacy/Support URL present but not HTTPS

If any fail, Preview/Generate/ZIP will refuse. Fix, then retry.

Every input change writes JSON to localStorage under a key for this section.

To factory reset, open console and run:
localStorage.removeItem('vbl-app-builder-<YOUR_SECTION_ID>')
location.reload()

From your app folder
npm i
$env:SHOPIFY_FLAG_STORE="your-store.myshopify.com"
npm run dev

What this does: installs deps from package.json, starts server.js (Koa) on port 3000, health at http://localhost:3000/health

From your app folder
npm i
export SHOPIFY_FLAG_STORE="your-store.myshopify.com"
npm run dev

What this does: installs deps, starts Koa (default 3000). Health: http://localhost:3000/health

Generate → Create ZIP (server) sends a POST and returns a zip link on success.

Payload includes: app_name, handle, client_id, app_url (https://vistabylara.com/), redirects (https://vistabylara.com/auth/callback and https://vistabylara.com/api/auth), scopes (read_products, write_products), template (koa-minimal | koa-prod), source (vbl-app-builder-pro-ultra).

On non-200, a clear error is shown in the blue box; check Network and server logs.

• Design: Title ≤ 25, CTA set, Purpose ≤ 2 lines, Highlights 3–6 items; hex valid; preview contrast good in Light/Dark.
• IA: Tabs match product; only necessary blocks enabled.
• Shopify: Client ID present; scopes deliberate (min read_products).
• Settings: Reachable support email; https privacy/support URLs; decide Embedded + GDPR.
• Generate: Preview modal checked, especially shopify.app.toml and server.js.

• “App title must be ≤ 25 characters.” → Shorten.
• “Client ID is required.” → Paste from Partners.
• “Select at least one scope.” → Choose read_products at minimum.
• “Brand/Accent color must be a 6-digit hex.” → Use #RRGGBB.
• Create ZIP shows 4xx/5xx → Inspect Network; check server logs.
• No download after Generate → Use per-file Download in Preview modal or try another browser.
• Phone preview empty → Enable Tips or Product Grid in IA.
• GDPR routes missing → Toggle GDPR in Settings.

• Keep shopify.js, auth.js, session.js in repo.
• Wire OAuth in auth.js; store sessions in session.js.
• Replace /api/products demo with real Admin API using shopify.js.
• Add rate-limit, input sanitization; tighten CSP if embedding custom scripts.

Power-User Tips: Presets are idempotent; arrow keys cycle tabs; theme toggle switches preview Light/Dark.

• Scopes: read_products only (expand later).
• Embedded: enabled.
• GDPR: enable stubs early.
• Listing copy: 45–60 char title; <160 char short description.
• Ensure live Support and Privacy pages on vistabylara.com.

• Title ≤ 25; Purpose/CTA/Highlights present.
• Brand & Accent hex valid; readable in Light/Dark.
• IA tabs clear; only necessary blocks enabled.
• Client ID set; ≥ 1 scope chosen.
• Company, support email, privacy/support URLs valid and https.
• Preview checked; TOML & server.js correct.
• ZIP (client/server) unzips cleanly.
• npm i → npm run dev works; /health returns { ok: true }.