Built for Shopify Guidelines This skill enforces Shopify's Built for Shopify (BFS) quality standards during development to ensure apps meet the highest quality bar for the Shopify App Store. Reference: https://shopify.dev/docs/apps/launch/built-for-shopify/requirements Quick Compliance Checklist Use this checklist when reviewing code or building features: BFS Compliance Review: - [ ] App is embedded in Shopify admin (App Bridge) - [ ] Uses session token authentication - [ ] Primary workflows stay within Shopify admin - [ ] No additional login/signup required - [ ] Uses theme app extensions (not Asset API for writes) - [ ] Meets Web Vitals targets (LCP ≤2.5s, CLS ≤0.1, INP ≤200ms) - [ ] Uses Polaris components matching admin styling - [ ] Mobile responsive design - [ ] Uses nav menu (s-app-nav) and contextual save bar - [ ] Error messages are red, contextual, and helpful - [ ] No dark patterns or pressure tactics - [ ] Premium features are disabled and labeled - [ ] Promotional content is dismissible 1. Integration Requirements Embedding (MANDATORY) Apps MUST be embedded in the Shopify admin:

< script src = " https://cdn.shopify.com/shopifycloud/app-bridge.js "

</ script

// Use session token authentication import { authenticate } from "@shopify/shopify-app-remix/server" ; export async function loader ( { request } ) { const { session } = await authenticate . admin ( request ) ; // ... } Primary Workflows All primary app workflows MUST be completable within the Shopify admin: No external website required for core functionality Third-party connection settings must be accessible in-app Simplified monitoring/reporting on app homepage Clean Installation For storefront apps, use theme app extensions instead of Asset API:

{% schema %} { "name": "My App Block", "target": "section", "settings": [] } {% endschema %} Do NOT use Asset API to create, modify, or delete theme files (reading is allowed). 2. Performance Requirements Web Vitals Targets (75th percentile) Metric Target Description LCP ≤ 2.5s Largest Contentful Paint CLS ≤ 0.1 Cumulative Layout Shift INP ≤ 200ms Interaction to Next Paint Optimization Strategies // Lazy load heavy components const HeavyChart = lazy ( ( ) => import ( './HeavyChart' ) ) ; // Use React.memo for expensive renders const ExpensiveList = memo ( ( { items } ) => ( // ... ) ) ; // Avoid layout shifts with skeleton loaders < Suspense fallback = { < SkeletonPage /

}

< AppContent /

< / Suspense

Storefront Performance Must not reduce Lighthouse score by more than 10 points Checkout requests: p95 ≤ 500ms, failure rate ≤ 0.1% 3. Design Requirements Familiar (Match Shopify Admin) Use Polaris web components to match admin styling:

< s-page

< s-title-bar title = " My Page "

< s-button slot = " primary-action "

Save </ s-button

</ s-title-bar

< s-layout

< s-layout-section

< s-card

< s-text

Content in cards </ s-text

</ s-card

</ s-layout-section

</ s-layout

</ s-page

Rejection reasons to avoid: Custom button colors (use Polaris defaults) Serif/script fonts Non-standard background colors Content not in card containers Poor contrast (must meet WCAG 2.1 AA) Navigation Use App Bridge nav menu: < s-app-nav

< s-nav-item href = " /dashboard " selected

Dashboard </ s-nav-item

< s-nav-item href = " /settings "

Settings </ s-nav-item

</ s-app-nav

Do NOT: Create custom navigation menus Use emojis in nav items Have separate "Home" link (app name should link to home) Contextual Save Bar Use for all form inputs: import { useAppBridge } from "@shopify/app-bridge-react" ; import { SaveBar } from "@shopify/app-bridge/actions" ; function SettingsForm ( ) { const app = useAppBridge ( ) ; const showSaveBar = ( ) => { const saveBar = SaveBar . create ( app , { saveAction : { disabled : false , loading : false } , discardAction : { disabled : false , loading : false } , } ) ; saveBar . dispatch ( SaveBar . Action . SHOW ) ; } ; // ... } Modals Use s-modal with proper slots: < s-modal heading = " Confirm Action "

< p

Modal content here </ p

< s-button slot = " secondary-action "

Cancel </ s-button

< s-button slot = " primary-action " variant = " primary "

Confirm </ s-button

</ s-modal

Mobile Responsiveness No horizontal scrolling on mobile Content must wrap/stack appropriately All content accessible (no hidden without expand mechanism) 4. Helpful UX Requirements Onboarding Concise, guiding merchants to completion Dismissible after completion No requirement to install additional apps Justify any merchant information requests Homepage Must include: Theme block/embed status (if applicable) Relevant metrics/analytics Dynamic content (not just static links) Error Messages

< s-text-field label = " Email " error = " Please enter a valid email address " />

1. User-Friendly Requirements (No Dark Patterns) Prohibited Practices Don't Why Countdown timers for upgrades Pressures merchants "No thanks, I prefer less sales" Guilt/shame language Auto-appearing modals/popovers Distracts merchants Guarantee outcomes ("increase sales 18%") False claims Review incentives ("5-star for Pro") Manipulative Non-dismissible promotions Overwhelms merchants Shopify-like icons/colors Impersonation Premium Features

< s-card

< s-text variant = " headingMd "

Advanced Analytics </ s-text

< s-badge tone = " info "

Pro Plan </ s-badge

< s-button disabled

View Analytics </ s-button

< s-link url = " /upgrade "

Upgrade to unlock </ s-link

</ s-card

Shopify Plus-only features must be hidden (not just disabled) for non-Plus merchants 6. Category-Specific Requirements If Building: Ads/Analytics/Affiliate Apps // MUST use Web Pixel extensions, NOT script tags // extensions/web-pixel/src/index.ts import { register } from "@shopify/web-pixels-extension" ; register ( ( { analytics } ) => { analytics . subscribe ( "page_viewed" , ( event ) => { // Track event } ) ; } ) ; If Building: Email/SMS Marketing Apps Sync customer data to/from Shopify Use Shopify segments via customer segment action extension Use visitors API for identifying store visitors If Building: Discount Apps

Use discount functions or native APIs

Do NOT use draft orders for custom discounts

Use discountRedeemCodeBulkAdd for multiple codes

mutation { discountRedeemCodeBulkAdd ( discountId : " gid://shopify/DiscountCodeNode/123 " codes : [ { code : "CODE1" } , { code : "CODE2" } ] ) { bulkCreation { id } } } If Building: Subscription Apps Use Selling Plan API, Subscription Contract API, Customer Payment Method API Use theme app blocks for product pages Display subscription info clearly (name, price, savings) Use Customer Account UI extensions for subscription management If Building: Fulfillment Apps Wait for merchant fulfillment requests before fulfilling Respond to fulfillment requests within 4 hours Respond to cancellation requests within 1 hour Add tracking info within 1 hour of fulfillment creation 99% completion rate, 99.9% callback success rate If Building: Returns Apps Sync all return lifecycle events: returnCreate, reverseDeliveryCreateWithShipping reverseFulfillmentOrderDispose, returnLineItemRemoveFromReturn returnCancel, returnClose, refundCreate Code Review Checklist When reviewing Shopify app code for BFS compliance: Technical: - [ ] App Bridge script in <head> - [ ] Session token auth (no cookie auth) - [ ] Theme app extensions (no Asset API writes) - [ ] Web Pixel extensions (no script tags for tracking) - [ ] Proper API usage for app category UI/UX: - [ ] Polaris components throughout - [ ] s-app-nav for navigation - [ ] Contextual save bar for forms - [ ] s-modal with proper slots - [ ] Responsive design - [ ] WCAG 2.1 AA contrast Content: - [ ] No outcome guarantees - [ ] No pressure tactics - [ ] Dismissible promotional content - [ ] Disabled + labeled premium features - [ ] Clear error messages (red, contextual) - [ ] Helpful onboarding - [ ] Dynamic homepage content Resources BFS Requirements App Bridge Polaris Web Components Theme App Extensions Web Pixels