skills.rest
tomtoto757
tomtoto757COMMUNITY
Explore all skills by this author →
GitHub

shopify-app-development

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

3|1|Updated Mar 21, 2026
Search Tags:#oauth#GraphQL#Shopify#Remix#polaris#app bridge#embedded app
One-click install
npx skills add https://github.com/tomtoto757/ecomm-ai-team --skill shopify-app-development-tomtoto757
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shopify-app-development
Source: https://github.com/tomtoto757/ecomm-ai-team/tree/main/skills/platform-integrations-infrastructure/finsilabs/platform-shopify/shopify-app-development
Command: npx skills add https://github.com/tomtoto757/ecomm-ai-team --skill shopify-app-development-tomtoto757

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @shopify/cli, @shopify/shopify-app-remix, @shopify/shopify-app-session-storage-prisma, @shopify/polaris, @shopify/app-bridge-react, @prisma/client.

What problem does it solve? Building a Shopify app from scratch involves wiring up OAuth token exchange, session persistence, webhook registration, and an embedded Admin UI — a stack of boilerplate that is easy to get wrong. This Skill provides the complete modern Remix-based approach so you avoid legacy Express templates, broken iframe contexts, and App Store rejection issues. ## Core Features & Use Cases - App Scaffolding & OAuth: Initialize apps with Shopify CLI 3.x and the @shopify/shopify-app-remix package, including session storage via Prisma and automatic webhook registration after auth. - Embedded Admin UI: Build native-feeling merchant interfaces with Polaris components, App Bridge TitleBar, Toast notifications, and the Resource Picker for product selection. - Admin API & Compliance: Call the Admin GraphQL API from authenticated Remix loaders/actions and handle mandatory GDPR webhooks with HMAC validation. - Use Case: You need to ship a bulk product tagging app to the Shopify App Store. Use this Skill to scaffold the Remix app, protect routes with authenticate.admin, build the tagging page with Polaris and App Bridge, and implement the GDPR webhook handlers required for submission. ## Quick Start Ask the AI to scaffold a new embedded Shopify app using the Remix template with OAuth, Prisma session storage, and a Polaris-based products page.

Frequently Asked Questions about shopify-app-development

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

FAQPage Schema
How do I build a Shopify embedded app with Remix?▼

Run `shopify app init` with the Shopify CLI and choose the Remix template, which scaffolds OAuth, session storage, and App Bridge automatically. Then use `authenticate.admin(request)` in loaders and actions to call the Admin GraphQL API.

How to implement OAuth and session storage in a Shopify app?▼

The `@shopify/shopify-app-remix` package handles the OAuth flow via the `shopifyApp` configuration in `app/shopify.server.ts`. For production, use `PrismaSessionStorage` with PostgreSQL instead of the default SQLite storage, which fails across multiple server instances.

Remix vs Express template for Shopify app development?▼

The Remix template with `@shopify/shopify-app-remix` is the modern recommended approach, replacing the legacy Express/koa templates. It handles session storage, CSRF, token refresh, and frame-ancestor CSP headers automatically.

Why does my Shopify app show 'refused to display in frame' error?▼

This CSP error occurs when your server does not return `frame-ancestors https://*.myshopify.com https://admin.shopify.com` in the Content-Security-Policy header. Embedded apps run inside the Shopify Admin iframe and require this header.

What GDPR webhooks are required for Shopify App Store submission?▼

Shopify requires handlers for three mandatory topics: `customers/data_request`, `customers/redact`, and `shop/redact`, even if your app stores no personal data. You must also validate webhook HMAC signatures by reading the raw request body before any JSON parsing.

Why does useAppBridge return null in my Shopify app?▼

The `useAppBridge()` hook returns null when the Remix app root is not wrapped with `AppProvider` from `@shopify/shopify-app-remix/react`. Add the provider around your `<Outlet />` in `app/root.tsx` to initialize the App Bridge context.

Related Skills

Explore More Software Engineering Skills→
DatTran26DatTran26

ck:shopify

Plan and execute Shopify development tasks using CLI, APIs, and Liquid.

Community
Advanced
MicrockMicrock
322

shopify-app-dev

Guide building custom Shopify apps with CLI, OAuth, and deployment.

Community
Advanced
gounthargounthar

shopify-expert

Provides authoritative Shopify development guidance for APIs, themes, apps, and GraphQL/REST integrations.

Community
Advanced
enigmaicon-engenigmaicon-eng
1

shopify-expert

Implement Shopify themes, apps, and headless storefronts with Liquid, GraphQL, and Remix.

Community
Advanced