README
Rock Paper Scissors Headless Storefront Headless Shopify storefront built with Next. js App Router. Imported Context Rock Paper Scissors Headl...
Rock Paper Scissors Headless Storefront Headless Shopify storefront built with Next. js App Router.
Rock Paper Scissors Headless Storefront
Headless Shopify storefront built with Next.js App Router.
Features
- Shopify catalog, collections, cart, and checkout handoff
- SSR-native product and collection cards across homepage and catalog surfaces
- Collection cards fallback to first product featured image when collection image is missing
- Product cards show explicit pricing (
$Xor$X–$Y) on listing surfaces - Judge.me-powered product ratings/reviews on PDPs + product cards, with in-store review submission form
- Store-wide review aggregate badge and dedicated
/reviewspage with recent customer feedback - Product-card UX aligned with Shopify storefront design patterns (without runtime web-component dependency)
- SSR homepage intro with taxonomy quick links derived from Shopify metafield-driven navigation
- Shopify-backed blog/article compatibility routes (pre-1020 bridge, enabled by default):
/blogs/blogs/[blog]/blogs/[blog]/[article]
- Shopify-driven branding (store name, logo, and square logo for metadata icons)
- Navigation and footer menus from Shopify menu handles
- Dawn-parity taxonomy navigation:
- desktop
Shop by ArtistandShop by Subjectmega groups - mobile taxonomy drawer sections
- shared featured collection tiles from collection metafields
- desktop
- Legacy Shopify URL parity routes (
/collections/*,/pages/*,/policies/*) - Taxonomy landing pages:
/shop-by-artist,/shop-by-subject - Customer Account API login/session scaffold (
/account) with profile, recent orders, and saved addresses - Quick add on product cards with variant picker support
- Homepage "New Arrivals" grid for resilient catalog visibility
- Tokenized design foundation (
--rps-*) and expanded style-guide coverage for nav, hero, filter/sidebar, CTA, blog, account, and footer modules - Google Merchant Center feed at
/api/feeds/google(full-catalog, variant-level) - Feature-flagged agent commerce API routes:
GET /api/agents/catalogPOST /api/agents/checkout
- JSON landing pages at
/landing/[slug] - LLM discovery endpoint at
/llms.txt - Extended LLM discovery endpoint at
/llms-full.txt - SEO/GEO automated audit command:
pnpm seo:audit <base-url> - Shopify-to-headless parity audit command:
pnpm parity:audit --base-url <base-url> - Feed-vs-PDP identifier parity audit command:
pnpm shopify:audit:identifier-parity -- --base-url <base-url> - Approval-gated Shopify metadata remediation apply command:
pnpm shopify:apply:metadata-remediation -- --plan <path> [--apply --approve APPLY_METADATA_REMEDIATION] - Dedicated SEO/GEO governance CI workflow (blocking technical checks + non-blocking catalog quality reporting)
Local Setup
- Copy
.env.exampleto.envand fill required values. - Install dependencies.
- Start the dev server.
pnpm install
pnpm dev
If you are working from a non-main Git worktree and update local env values, sync them back to the main checkout with:
pnpm env:sync
To inspect whether the current worktree and main checkout are drifting before you sync, run:
pnpm env:status
Canonical setup and bootstrap guidance lives in:
docs/development/environment-bootstrap-and-sync.mddocs/development/programmatic-growth-reporting.md
Required Environment Variables
Use .env.example as the tracked schema, .env as the live local values, and docs/development/environment-bootstrap-and-sync.md as the repo-owned bootstrap runbook.
SHOPIFY_STORE_DOMAINSHOPIFY_STOREFRONT_ACCESS_TOKENSHOPIFY_REVALIDATION_SECRETCOMPANY_NAMESITE_NAMESITE_DESCRIPTION
Optional:
SITE_URL(explicit canonical public origin; recommended for production and feed-channel cutovers)SHOPIFY_API_KEY(preferred Shopify Admin app credential for token exchange)SHOPIFY_API_SECRET(preferred Shopify Admin app credential for token exchange)SHOPIFY_ADMIN_ACCESS_TOKEN(optional legacy/manual Admin fallback; not the preferred primary path)SHOPIFY_CUSTOM_ARTWORK_PUBLICATIONS(optional comma-separated publication-name override for custom-artwork provisioning)SHOPIFY_HEADER_MENU_HANDLE(default:main-menu)SHOPIFY_FOOTER_MENU_HANDLE(default:footer)SHOPIFY_BLOGS_DISABLED(default:false; settrueonly to hide temporary Shopify-backed/blogs*compatibility routes)SHOPIFY_AGENTIC_ENABLED(default:false; enables/api/agents/*routes)SHOPIFY_AGENTIC_CATALOG_MODE(default:readonly; setcheckoutto enable checkout-prep endpoint)SHOPIFY_AGENTIC_ALLOWED_ORIGINS(comma-separated origin allowlist for agent API callers)SHOPIFY_AGENTIC_STOREFRONT_ACCESS_TOKEN(optional dedicated token for/api/agents/*; falls back toSHOPIFY_STOREFRONT_ACCESS_TOKEN)SHOPIFY_MENU_INTERNAL_HOSTS(comma-separated domains treated as internal links)SHOPIFY_TAXONOMY_NAMESPACE/SHOPIFY_TAXONOMY_*_KEY(defaults match Dawn collection metafields:is_nav,by_artist,by_subject,is_featured; optional ranking key:featured_rank)SHOPIFY_TAXONOMY_SHOW_ARTIST_MENU/SHOPIFY_TAXONOMY_SHOW_SUBJECT_MENU(default:true)SHOPIFY_TAXONOMY_ARTIST_TITLE/SHOPIFY_TAXONOMY_SUBJECT_TITLESHOPIFY_TAXONOMY_ARTIST_VIEW_ALL_LABEL/SHOPIFY_TAXONOMY_SUBJECT_VIEW_ALL_LABELSHOPIFY_TAXONOMY_ARTIST_VIEW_ALL_PATH/SHOPIFY_TAXONOMY_SUBJECT_VIEW_ALL_PATHSHOPIFY_MEGA_MENU_NAMESPACE/SHOPIFY_MEGA_MENU_*_KEYSHOPIFY_CUSTOMER_ACCOUNT_CLIENT_IDSHOPIFY_CUSTOMER_ACCOUNT_CLIENT_SECRETSHOPIFY_CUSTOMER_ACCOUNT_SHOP_DOMAIN(defaults toSHOPIFY_STORE_DOMAIN)SHOPIFY_CUSTOMER_ACCOUNT_ORIGIN(used for Customer Account API token/profile requests)SHOPIFY_CUSTOMER_ACCOUNT_SCOPES(default:openid email customer-account-api:full)SHOPIFY_CUSTOMER_ACCOUNT_REDIRECT_URISHOPIFY_CUSTOMER_ACCOUNT_LOGOUT_REDIRECT_URIVERCEL_AUTOMATION_BYPASS_SECRET(optional, enables protected-deployment audits/e2e)PLAYWRIGHT_BASE_URL(set to run e2e against an existing deployed URL instead of local dev server)NEXT_PUBLIC_GA_MEASUREMENT_IDJUDGEME_SHOP_DOMAIN(defaults toSHOPIFY_STORE_DOMAIN)JUDGEME_PUBLIC_TOKEN(required for review/rating display)JUDGEME_PRIVATE_TOKEN(required for review submission)GOOGLE_MERCHANT_DEFAULT_BRAND(optional fallback brand when Shopify product vendor is blank)GA4_PROPERTY_ID(required for the1085GA4 reporting runner)GSC_SITE_URL(required for the1085Search Console reporting runner)GOOGLE_APPLICATION_CREDENTIALS(absolute path to the recurring reporting service-account JSON)GOOGLE_OAUTH_CLIENT_CREDENTIALS(absolute path to the Desktop OAuth client JSON used for one-off human-admin Merchant registration flows)GOOGLE_CLOUD_PROJECT_ID(current reporting project:shopify-rps)GOOGLE_MERCHANT_ACCOUNT_ID(current child Merchant account:486364000)GOOGLE_MERCHANT_PARENT_ACCOUNT_ID(current parent Merchant MCA:459833598)GOOGLE_MERCHANT_DEVELOPER_EMAIL(current Merchant developer/admin email)SEO_AUDIT_MAX_SITEMAP_URLS(optional; default80)SEO_AUDIT_TIMEOUT_MS(optional; default20000)SEO_AUDIT_RETRIES(optional; default1)SEO_AUDIT_FAIL_ON_WARNINGS(optional; defaultfalse)
Useful Commands
pnpm build- production buildpnpm test- format + unit testspnpm test:unit- run Vitest unit suitepnpm test:coverage- run Vitest with enforced coverage thresholdspnpm test:ci- format + media-ledger drift check + coverage gate used by CI quality jobpnpm test:e2e- run Playwright e2e suitepnpm test:e2e:install- install Playwright Chromium dependenciespnpm test:all- format + unit + e2epnpm seo:audit <base-url>- SEO/GEO + structured-data auditpnpm seo:audit:fixture- strict SEO/GEO contract audit against a self-started local mock fixture (no Shopify secrets required)pnpm parity:audit --base-url <base-url>- Shopify catalog/page/policy parity + navigation auditpnpm shopify:audit:identifier-parity -- --base-url <base-url>- sample feed-vs-PDP identifier parity audit for live storefront URLspnpm agent:catalog:audit- Shopify catalog metadata quality audit for agentic commerce readinesspnpm shopify:plan:metadata-remediation -- --json <path>- dry-run remediation plan for strict Shopify metadata gapspnpm shopify:apply:metadata-remediation -- --plan <path>- dry-run safe-metadata apply preview (no Shopify writes)pnpm shopify:apply:metadata-remediation -- --plan <path> --apply --approve APPLY_METADATA_REMEDIATION- execute approval-gated safe-metadata apply mutationspnpm shopify:audit:handle-quality -- --json <path>- read-only product/collection handle-length quality baselinepnpm shopify:plan:handle-normalization -- --json <path>- deterministic product-handle normalization plan (no Shopify writes)pnpm shopify:apply:handle-normalization -- --plan <path>- dry-run handle-apply selection preview (no Shopify writes)pnpm shopify:apply:handle-normalization -- --plan <path> --apply --approve APPLY_HANDLE_NORMALIZATION- execute approval-gated product-handle updates withredirectNewHandlesafetypnpm shopify:media-ledger:build- rebuild the generated Shopify product-media change ledger from committed evidence artifactspnpm shopify:media-ledger:check- verify the generated Shopify product-media change ledger has not drifted from committed evidence artifactspnpm docs:links- docs link checkerpnpm docs:manifest- regenerate docs manifestpnpm growth:reports:stack-check- verify GA4, GSC, GA Admin, and Merchant reporting setuppnpm growth:reports:cycle -- --compare previous_period- run the full recurring1085reporting packetpnpm env:status- compare.envand.env.exampledrift between the active worktree and the main checkoutpnpm env:sync- sync.envand.env.examplebetween the active worktree and the main checkoutpnpm env:bootstrap- print the repo bootstrap summary from the tracked env-manager configpnpm env:sync-main-worktree- compatibility alias for the older sync command
Shopify Credential Model
SHOPIFY_STOREFRONT_ACCESS_TOKEN- storefront-only runtime access for customer-facing reads
SHOPIFY_API_KEY+SHOPIFY_API_SECRET- preferred Admin app auth for provisioning, uploads, and admin-side automation
SHOPIFY_ADMIN_ACCESS_TOKEN- optional fallback only; keep this separate from storefront credentials
Recommended auth order for admin operations:
SHOPIFY_API_KEY+SHOPIFY_API_SECRETSHOPIFY_ADMIN_ACCESS_TOKEN- legacy fallback behavior only when a private Admin-style token is still present in
SHOPIFY_STOREFRONT_ACCESS_TOKEN
Docs
- System docs index:
docs/README.md - Headless setup:
docs/HEADLESS_KICKOFF.md - Shopify runtime validation:
docs/development/shopify-validation.md - Environment/bootstrap runbook:
docs/development/environment-bootstrap-and-sync.md - Unified Google reporting/bootstrap runbook:
docs/development/programmatic-growth-reporting.md - SEO/GEO audit runbook:
docs/development/seo-geo-audit.md - SEO/GEO governance CI workflow:
.github/workflows/seo-geo-governance.yml
Project lifecycle folders:
docs/PROJECTS/active/- in progressdocs/PROJECTS/in-review/- implementation complete, awaiting walkthrough/sign-offdocs/PROJECTS/blocked/- waiting for user decisions/permissions/inputdocs/PROJECTS/completed/- delivered after walkthrough/sign-off
Provenance
- Source file:
README.md - Source URL: https://github.com/maggielerman/shopify-headless/blob/main/README.md