Empty products / blank page triage

Outcome: You know whether missing products are a connection, sync, CMS collection, or product binding issue, and the product page shows bound fields from the configured collection.

When to use

• Product page or shop grid is blank or CMS lists show no items despite Shopify having products.
• Agency console: connected but configuration reports cms_collection, cms_fields, or component_review failures, or no catalog sync recorded.
• Setup diagnostic reported LIMITED CHECK COMPLETE or no-blocker but the live page still looks empty.

Prerequisites

• Shop Canvas open in the same Framer project as the broken page.
• Live Shopify connection saved (not demo-only) unless you are intentionally triaging demo sections.
• Read-only checks only in this cookbook — do not apply binding repair previews.

Steps

1. Open setup diagnostic
   Store → Check my setup. Wait for Checking Shopify and Framer CMS… to finish.

2. Read the evidence card
   Note status: NEEDS REVIEW, CHECK INCOMPLETE, LIMITED CHECK COMPLETE, or DEMO SELECTED. Follow the primary next step button (connection, sync, etc.) if shown.

3. If diagnostic shows no blocking failure but pages are still empty
   On the same screen, scroll to Product bindings → Check product bindings.
   This is read-only inspection: collection sources, variant freshness, mismatches.
   Do not apply Repair preview — preview is for human review only; Shop Canvas has not auto-applied repairs in this path.

4. Verify the page source
   Open the product page in Framer. Confirm the product section uses the connected store domain, not demo source. Store → Assign your demo sections if legacy demo sections remain.

5. Re-run sync if bindings point to sync
   Store → Sync catalog → Preview product changes → Apply product sync when preview is acceptable.

6. Confirm in Preview
   Prefer Product details (title, price, variant options). Gallery/quantity paths may still be unverified in harness — a passing product details view is the success signal for this cookbook.

7. Optional: operator CLI parity
   Maintainers can run node bin/check-setup.mjs --project <kit-project> --session <framer-session> --bindings for the same binding logic; agencies normally stay in-plugin.

Success checklist

• Check my setup completed without a stuck error state.
• Any fail findings have a documented next action (connect, sync, import).
• Product bindings report explains collection/source alignment or variant staleness.
• Product page Preview shows bound product fields (title/price at minimum).
• No repair preview was applied without explicit human approval.

Known footguns

• no-blocker ≠ page fixed: Diagnostic can pass limited checks while bindings or page sources are still wrong — always run Product bindings when the page is empty.
• Repair preview: Preview only — the Repair preview screen does not write mapping changes; a separate Apply action is required. Mismatched collections can destroy curated CMS structure if applied without review.
• Gallery / quantity: Isolated harness coverage may lag; do not treat gallery-only success as full commerce proof.
• Published vs Preview: This cookbook targets editor Preview; publish/runtime checkout is Pre-publish checkout smoke.
• Console limits: Agency console does not store diagnostic JSON yet — evidence lives in the plugin session.

Human review (Typesafe-style)

If Repair preview proposes collection or field mapping changes, or Components → Review shows modified/stale files, escalate to a human before Apply/Replace. Uncertain mapping (not verified, nested usage unknown) → human review, not agent auto-fix.