skills.rest
webdevarif
webdevarifCOMMUNITY
Explore all skills by this author →
Website𝕏@webdevarifGitHub

neuro-shopify-app-bridge

Implements Shopify App Bridge 4 patterns for embedded app UI, authentication, and admin APIs.

Updated Apr 18, 2026
Search Tags:#web components#shopify#remix#app bridge#admin api#session tokens#embedded app
One-click install
npx skills add https://github.com/webdevarif/claude-skills --skill neuro-shopify-app-bridge-webdevarif
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: neuro-shopify-app-bridge
Source: https://github.com/webdevarif/claude-skills/tree/main/neuro-shopify-app-bridge
Command: npx skills add https://github.com/webdevarif/claude-skills --skill neuro-shopify-app-bridge-webdevarif

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @shopify/app-bridge-react, @shopify/app-bridge-types, @shopify/polaris, @shopify/shopify-app-remix, @getverdict/mock-bridge.

What problem does it solve? Building embedded Shopify apps requires correct use of App Bridge 4's auto-initialized global object, session tokens, web components, and direct API access, and mistakes like using cookies, v3 createApp patterns, or wrong fetch URLs break apps inside the Shopify admin. ## Core Features & Use Cases - App Bridge 4 Setup & APIs: Covers CDN loading, the shopify global object, and imperative APIs including Modal, Toast, ResourcePicker, SaveBar, Loading, Scanner, and Navigation. - Authentication & Direct API Access: Enforces session token authentication via shopify.idToken() and the shopify:admin/ protocol for authenticated GraphQL and REST calls. - React & Web Components: Provides patterns for useAppBridge, ui-modal, ui-nav-menu, ui-title-bar, ui-save-bar, inter-frame postMessage communication, and migration from App Bridge 3. - Use Case: When building a Remix-based embedded Shopify app, use this Skill to correctly wire up the navigation menu, open product pickers, show save bars on dirty forms, and call the Admin API without authentication errors. ## Quick Start Use the Shopify App Bridge skill to add a product resource picker and a save bar to my embedded Remix app's settings page.

Frequently Asked Questions about neuro-shopify-app-bridge

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Shopify App Bridge 4 in an embedded app?▼

Load the App Bridge CDN script in your HTML head and include a meta tag with name shopify-api-key containing your API key. App Bridge 4 auto-initializes, so no createApp call is needed, and the shopify global object becomes available immediately.

How do I call the Shopify Admin API from an embedded app?▼

Use fetch with the shopify:admin/api/ protocol instead of https URLs, which lets App Bridge attach authentication automatically. You must also enable direct_api_mode in the access section of your shopify.app.toml configuration file.

What is the difference between App Bridge 3 and App Bridge 4?▼

App Bridge 3 uses createApp and action dispatches like app.dispatch(Toast.show()), while App Bridge 4 auto-initializes a shopify global with direct method calls like shopify.toast.show(). Version 4 also replaces React providers with web components such as ui-nav-menu and ui-title-bar.

Why is shopify.toast not working inside my modal?▼

Toast and other App Bridge APIs are not directly available inside modals loaded with a src attribute because they run in a separate iframe. Use window.postMessage to communicate with the main app and trigger the toast from there, validating event.origin.

Can I use cookies for authentication in embedded Shopify apps?▼

No, Shopify blocks third-party cookies in embedded apps. Use session tokens obtained via shopify.idToken() and verify them server-side with authenticate.admin(request) in your Remix loaders and actions.

How do I test an embedded Shopify app locally without a real store?▼

Use the @getverdict/mock-bridge package to run a mock Shopify admin pointing at your local dev server. It supports modal, saveBar, toast, loading, idToken, config, environment, and user APIs, while resourcePicker and scanner return stub data.

Related Skills

Explore More Software Engineering Skills→
jangtrinhjangtrinh

ck:shopify

Scaffold Shopify apps, UI extensions, and themes via Shopify CLI.

Community
Intermediate
tomtoto757tomtoto757
14

shopify-app-development

Build embedded Shopify apps with OAuth, App Bridge, and Polaris UI.

Community
Advanced
silvarojasdiegoarturo91silvarojasdiegoarturo91

shopify-polaris-app-home

Create embedded Shopify admin interfaces with Polaris web components.

Community
Intermediate
EstomEstom

shopify-expert

Scaffold Shopify themes, headless storefronts, apps, and checkout extensions.

Community
Advanced