playjing
2a478a8ff9
Three patterns discovered while populating the Shopify Knowledge Base App for JING (silent training football brand). Each pattern saved 30+ minutes of rediscovery; documenting so future agents on any Shopify store benefit. - README.md: when to use the harness for Shopify admin vs Storefront API / Admin API / Shopify CLI; auth notes; Polaris React vs Web Components detection. - embedded-apps.md: every Shopify app surfaces in an iframe at *-app.shopify.prod.shopifyapps.com. Use iframe_target() and pass target_id to js() calls. Known iframe slugs table (extend as discovered). - polaris-inputs.md: Polaris React text inputs reject the standard React-friendly synthetic value setter pattern — fields fill but Save button stays disabled. Working pattern is .focus() via JS + CDP-native keystrokes via type_text(). Includes full add-FAQ implementation + notes on Polaris's web-component migration (polaris-react archived Jan 2026). - knowledge-base.md: canonical automation for the Shopify Knowledge Base App (Winter '26 Edition). FAQ-pair flow, batch loop pattern, /pairs/<id> URL signal for save success, brand-voice guidance, query-log review cadence. App is currently English-only with no public API — browser automation is the only path until Shopify exposes endpoints. Tested with 19 successful FAQ saves on the JING store on 2026-04-29. Co-authored-by: Claude (JING build agent) <build@playjing.local>
shopify-admin
Browser-harness patterns for admin.shopify.com and embedded Shopify apps.
Files in this folder
embedded-apps.md— every Shopify app runs in an iframe; how to target itpolaris-inputs.md— Polaris React inputs reject synthetic value setters; use CDP type_textknowledge-base.md— automating the Shopify Knowledge Base App for FAQ entries
When to use these
You're driving Shopify admin and need to add / edit / configure something. The Shopify admin UI is large and many surfaces are embedded apps — first check whether what you need is in an embedded app (most apps under admin.shopify.com/store/<store>/apps/<app-slug>/... are).
When to skip
- If the operation is read-only product / inventory data → use the Storefront API (HTTP) instead, much faster
- If the store has a custom admin app with API token provisioned → use the Admin API (GraphQL or REST) instead, no UI scraping
- If you're editing theme code → use the Shopify CLI (
shopify theme push) — don't touch the theme editor UI
The browser is the right tool only when:
- The setting / app exposes no API
- The change is one-time or rare enough not to justify scripting
- You're discovering / exploring the admin (e.g., finding selectors for a future automation)
Authentication
Mike (or the human owner) must be logged into admin.shopify.com in the Chrome session that browser-harness attaches to. The harness does NOT log in — it inherits the human's session.
If you hit accounts.shopify.com redirect, stop and ask the human to log in. Don't type credentials.
Polaris is in transition (Jan 2026 onward)
Shopify is migrating its design system from React-based Polaris to Web-Components-based Polaris. Most legacy admin surfaces are still React. Newer surfaces (Catalog Mapping, parts of Settings) may be web components.
Screenshot first. If you see <s-text-field> or <s-button> web component tags → use the web component pattern. If you see [class*="Polaris-"] React class names → use the CDP keystrokes pattern in polaris-inputs.md.