Skip to main content
This is the practical build guide for custom creator dashboards.

​
Recommended Page Architecture

Use separate pages/modules instead of one giant account page:
  • Dashboard home
    • Entry cards/CTAs
    • Collection list
    • Share link tools
    • Informational panels
  • Manage products
    • Full product grid
    • Filter/sort/search
    • Add/remove product-to-drop assignment
  • Collection editor
    • Edit title/description/status
    • Reorder products
    • Add products
  • Storefront editor
    • Branding, hero/about content, social links
    • Custom-field save actions by section
This keeps flows easier to test and maintain.

​
Data Layer Pattern

​
1. Bootstrap identity from customer context

{% if customer.email %}
  <div data-customer-email="{{ customer.email }}" style="display:none;"></div>
{% endif %}

​
2. Resolve collab via proxy

Frontend calls your backend (/api/dashboard/collab?email=...) and gets normalized collab + drops + custom fields.

​
3. Normalize custom field access

Handle both top-level fields and customFields[] handles in one helper so your UI code is stable even if payload shape changes.

​
Core How-To Flows

​
A) Storefront Editor (Sectioned Form Saves)

Implementation pattern:
  1. Load collab once on page boot
  2. Populate section forms from field-handle map
  3. Save section-by-section (branding, social, hero, about)
  4. Send only changed values in each mutation payload
  5. Show deterministic toast on success/failure
Typical field map examples:
  • cc-company-logo
  • cc-website-url
  • cc-cc-instagram-url
  • cc-hero-banner
  • cc-hero-header-copy
  • cc-hero-subheader-copy
  • cc-about-section-title

​
B) Collection Editor (Existing + Net-New)

Implementation pattern:
  1. Read collabId (and optional dropId) from URL
  2. If dropId exists: load and edit existing drop
  3. If dropId missing: create net-new drop from form + selected products
  4. Persist title, description, status, and ordered product list
  5. Redirect to canonical edit URL after create

​
C) Product-to-Collection Assignment

Implementation pattern:
  1. Render product cards from Shopify Storefront API data
  2. Build checkbox/dropdown list from collab drops
  3. On toggle:
  • add flow -> add product to drop
  • remove flow -> update drop with remaining product IDs
  1. Refresh local collab cache after mutation

​
D) Product Enhancement Editing

Implementation pattern:
  1. Open modal/drawer edit UI from product card
  2. Support note + media upload + collection assignment
  3. Upload media to your upload service first
  4. Save enhancement payload via proxy endpoint
  5. Re-fetch drop data to reconcile local UI state

​
UX Patterns That Work Well

​
Loading + Empty States

  • Initial page-level skeleton/spinner
  • Section-level loaders for async areas (collections, products)
  • Explicit empty states with CTA

​
Optimistic Updates

  • For toggles and simple state flips, update UI immediately
  • Revert on failed mutation and show error toast
  • Desktop modal and mobile drawer for the same action
  • Shared save logic behind both UIs
  • Ensure body scroll locking and close-on-overlay behavior

​
Informational Panels (No API Needed)

  • Include utility blocks (share-link guidance, embed/email instructions, onboarding reminders)
  • Keep these outside your network dependency path so UX still feels useful during outages

​
Security Pattern: Proxy All Writes

Do not mutate CC data directly from client bundles. 
// Frontend
await fetch('/api/dashboard/update-drop', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ collabId, dropId, title, description, products })
});

// Backend (example)
app.post('/api/dashboard/update-drop', async (req, res) => {
  const customer = await requireAuthenticatedCustomer(req);
  await assertCustomerOwnsCollab(customer, req.body.collabId);
  const result = await creatorCommerce.updateDrop(req.body);
  res.json(result);
});