Skip to main content
The Headless API approach lets you build completely custom frontends while CC handles data, attribution, integrations, and infrastructure.

​
What You Build vs. What CC Provides

You BuildCC Provides
Custom React/Vue/etc. frontendCreator data API
Your own design systemAttribution engine
Custom user flowsOrder tracking
Unique animationsIntegration sync
Platform-specific featuresWebhook infrastructure

​
Architecture

┌─────────────────────────────────────────────────────────────────┐
│                     YOUR CUSTOM FRONTEND                         │
│  ┌───────────────┐  ┌───────────────┐  ┌───────────────┐       │
│  │  React App    │  │  Next.js SSR  │  │  Hydrogen     │       │
│  └───────┬───────┘  └───────┬───────┘  └───────┬───────┘       │
│          │                  │                  │                │
│          └──────────────────┼──────────────────┘                │
│                             │                                    │
├─────────────────────────────┼────────────────────────────────────┤
│                             ▼                                    │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │                    CC INFRASTRUCTURE                      │   │
│  │  ┌────────────┐  ┌────────────┐  ┌────────────┐         │   │
│  │  │  REST API  │  │  Webhooks  │  │  Metaobjects│         │   │
│  │  └────────────┘  └────────────┘  └────────────┘         │   │
│  │  ┌────────────┐  ┌────────────┐  ┌────────────┐         │   │
│  │  │ Attribution│  │ Integrations│  │   SDK      │         │   │
│  │  └────────────┘  └────────────┘  └────────────┘         │   │
│  └──────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────┘

​
API Endpoints

​
Read Creator Data

// Get creator collabs by email + channel
const collabs = await fetch(
  `https://unified-api.creatorcommerce.shop/creators/collabs?email=${encodeURIComponent(email)}&myshopify_domain=${encodeURIComponent(myshopifyDomain)}`,
  { headers: { 'x-channel-access-token': CHANNEL_TOKEN } }
).then(r => r.json());

// Generate a creator drop cart URL
const cartUrl = await fetch(
  `https://unified-api.creatorcommerce.shop/creators/${creatorId}/drops/${dropId}/cart`,
  { headers: { 'x-channel-access-token': CHANNEL_TOKEN } }
).then(r => r.json());

​
Read Attribution Metrics

// Read session metrics for a channel
const sessionMetrics = await fetch(
  `https://unified-api.creatorcommerce.shop/channels/${myshopifyDomain}/metrics/session?startDate=2026-02-01&endDate=2026-02-28`,
  { headers: { 'x-channel-access-token': CHANNEL_TOKEN } }
).then(r => r.json());

​
SDK Alternative

For client-side, use the CC SDK: 
import { CreatorCommerce } from '@creatorcommerce/sdk';

const cc = new CreatorCommerce({ shopDomain: 'your-store.myshopify.com' });

// Get creator context
const creator = await cc.getCreator('partner-handle');

// Track attribution
cc.trackPageView({ creatorHandle: 'partner-handle' });

// Get cart with creator discount
const cart = await cc.getCreatorCart(creatorId, dropId);

​
Common Patterns

​
Custom Landing Pages

Build React/Vue landing pages that fetch CC data: 
function CreatorLanding({ handle }) {
  const [creator, setCreator] = useState(null);
  
  useEffect(() => {
    cc.getCreator(handle).then(setCreator);
    cc.trackPageView({ creatorHandle: handle });
  }, [handle]);
  
  if (!creator) return <Loading />;
  
  return (
    <YourCustomLayout>
      <YourHeroComponent creator={creator} />
      <YourProductGrid products={creator.drops[0].products} />
      <YourDiscountBanner code={creator.discountCode} />
    </YourCustomLayout>
  );
}

​
Hydrogen Storefront

Integrate CC into Shopify Hydrogen: 
// app/routes/creator.$handle.jsx
import { cc } from '~/lib/creatorcommerce';

export async function loader({ params }) {
  const creator = await cc.getCreator(params.handle);
  return json({ creator });
}

export default function CreatorPage() {
  const { creator } = useLoaderData();
  
  return (
    <Layout>
      <CreatorHero creator={creator} />
      <ProductGrid drops={creator.drops} />
    </Layout>
  );
}

​
Custom Partner Portal

Build your own partner dashboard: 
function PartnerDashboard() {
  const [stats, setStats] = useState(null);
  
  useEffect(() => {
    // Fetch from CC API
    Promise.all([
      cc.getCreatorStats(creatorId),
      cc.getCreatorDrops(creatorId),
      cc.getCreatorOrders(creatorId)
    ]).then(([stats, drops, orders]) => {
      setStats({ stats, drops, orders });
    });
  }, []);
  
  return (
    <YourDashboardLayout>
      <YourStatsCards data={stats.stats} />
      <YourDropsManager drops={stats.drops} />
      <YourOrdersTable orders={stats.orders} />
    </YourDashboardLayout>
  );
}

​
What You Still Get

Even building headless, CC handles:
  • Attribution — Order tracking, partner credit
  • Integrations — Klaviyo, Flow, analytics sync
  • Data Storage — Shopify metaobjects
  • Webhooks — Event notifications
  • Rate Limiting — Managed API access

​
When to Use

Use Headless API when:
  • You need complete UI control
  • You’re building custom storefronts (Hydrogen, etc.)
  • You have frontend development resources
  • You want unique interactive experiences
Move to Full White-Label when:
  • You’re building a platform for others
  • You need complete infrastructure control
  • You want to resell/license the solution
  • You need multi-tenant architecture

​
Next Step

Building a platform product? Move to White-Label Platform.