Skip to main content
New Customer Accounts are Shopify’s modern, extensible account system. You add functionality via app extensions, not theme code.

​
Implementation Model

Use account extensions as the UI shell and keep creator/collab writes proxy-backed.
Extension SurfacePurpose
Dashboard block/pageCreator status, CTAs, quick stats
Products management pageProduct assignment to drops
Collection editor pageDrop title/description/status/product order

​
Build Sequence

  1. Build extension UI shells for each page/module
  2. Add authenticated backend routes for collab/drop/product operations
  3. Resolve creator context by authenticated customer identity
  4. Bind section forms to cc-* field handles
  5. Add toasts/loading/empty states and mobile-safe interactions

​
Practical UX Patterns

  • Keep dashboard page lightweight: status + links to specialized editors
  • Use modal on larger screens and drawer on mobile for editing actions
  • Batch save in product editing flows where multiple drop assignments can change
  • Keep “informational only” panels in-account for guidance even when APIs are unavailable

​
Partner Resolution Pattern

import { useCustomer } from '@shopify/customer-account-ui-extensions';

function PartnerDashboard() {
  const customer = useCustomer();

  // Recommended: call your backend, not CC directly from extension
  const { data: collab } = useCollabByCustomer(customer.email);

  if (!collab) return null;
  return <DashboardEntry collab={collab} />;
}

​
Security Checklist

  • Backend validates customer ownership before each mutation
  • CC credentials remain server-side only
  • Write endpoints are rate-limited and logged
  • Mutation failures return structured errors for deterministic UI handling