Skip to main content
Fastest path to launch. This guide walks you through setting up a complete co-branded storefront using CreatorCommerce’s pre-built sections. Perfect for getting started quickly and testing your setup.

​
Prerequisites

Before you can build and test your storefront, you need:
  1. At least one collaboration synced — A creator partnership must exist in CreatorCommerce
  2. Test creator set up — Create a test creator to preview your build
  3. Test destination configured — Map a test tier to your creator template

​
Step 1: Create a Test Creator

Why: You need a creator with data to test your storefront. Building is possible without one, but testing requires real creator data. How to set up:
1

Create a test program/tier in your affiliate software

Set up a test tier (e.g., “Test Program” or “Development Tier”) in your affiliate platform (Shopify Collabs, Impact, etc.).
2

Add a test creator

Create a test creator with a John Doe-style profile:
  • Name: “Test Creator” or “John Doe”
  • Email: Your email (so you can access onboarding)
  • Assign to your test tier
3

Sync to CreatorCommerce

The creator should automatically sync to CreatorCommerce. Verify they appear in your CreatorCommerce dashboard.
4

Configure test destination

In CreatorCommerce, go to Settings → Destinations and create a test destination mapped to your test tier. This routes affiliate traffic to your creator template.
5

Complete test creator onboarding

Click on your test creator in CreatorCommerce, then click Copy onboarding link. Go through the onboarding flow to:
  • Add a profile photo
  • Write a bio
  • Create product collections (drops)
  • Add product reviews/notes
  • Upload UGC content
Why this matters: Your storefront will be much more interesting and realistic if your test creator has actual content, reviews, and product collections.
Don’t skip onboarding your test creator. A storefront with real content, reviews, and collections is much easier to design and test than an empty one.

​
Theme Setup

​
Step 1: Enable CreatorCommerce SDK

Location: Theme Editor → App Embeds Why: The SDK detects affiliate context and writes cart attributes (cc-creator-handle, cc-creator-id) that power all personalization. This is essential for full-funnel tracking and personalization.
1

Open Theme Editor

In Shopify Admin → Online Store → Themes → Customize
2

Open App Embeds

In the left sidebar, click App embeds
3

Enable CreatorCommerce SDK

Find “CreatorCommerce” in the list and toggle it on
4

Save

Click Save to apply the change
Do this first. Enabling the SDK early ensures tracking works from the start and you can test personalization immediately.

​
Step 2: Create Creator Template

Location: Theme Editor → Page Templates
1

Open Page Picker

In the Theme Editor, click Homepage to open the page picker menu
2

Navigate to Creator

Scroll down and click Creator (or search for “creator”)
3

Create Template

Click Create template. This creates your base CreatorCommerce template (templates/metaobject/creator.json)
What you have now: An empty creator page template. Next, we’ll populate it with sections.

​
Step 3: Copy Homepage Sections

Why: Starting with your homepage gives you a one-to-one copy to work from. Your creator page will have the same structure, but personalized for creators. Two methods: What you have now: A creator template that’s a duplicate of your homepage. Next, we’ll replace the hero section with a creator-specific hero.

​
Hero Section Setup

​
Replace Homepage Hero with Creator Hero

Why: Your homepage hero changes with seasonal offers and campaigns. Your creator hero should be consistent to the creator’s offer, which flexes with their content and discounts (all dynamic anyway).
1

Find your hero section

In your creator template, locate your homepage hero section
2

Remove the homepage hero

Click the section → Remove section
3

Add CC Hero section

Click Add section → Search for “CC” → You’ll see:
  • CC Hero - Equinox — Immersive, animated gradient hero with WebGL effects
  • CC Hero - Primavera — Clean, minimal hero with carousel support
For this guide, we’ll use CC Hero - Primavera
4

Select Primavera Hero

Click CC Hero - Primavera to add it
What you’ll see: Initially, the hero will look bland—just a background. Your fonts should be applied. This is normal. Now we’ll configure it.

​
Configure Primavera Hero Section

Click on the hero section to open its settings. Here’s what to configure:

​
Content & Copy

Eyebrow (Creator Badge Text):
  • Recommended: Recommended by [cc-creator-first-name]
  • This appears as a small badge at the top
Heading:
  • Replace the default lorem ipsum with something engaging
  • Examples:
    • Shop with [cc-creator-first-name]
    • Discover this new product line with [cc-creator-first-name]
    • Go nude with [cc-creator-first-name] (for a clothing brand called “Nudes”)
Description Text:
  • Make it digestible and value-focused
  • Example: Get [cc-collab-discount-amount]% off by shopping my curated collections. Also check out the new spring collection.
Trust Indicator:
  • Typically better for health/beauty brands
  • For apparel, you can clear this out
  • Example: Trusted by 10,000+ customers
CTA Button:
  • Button Text: Shop my curations (or similar)
  • Button Link: #drops-anchor (scrolls to curated collections section)

​
Collab Highlight

Show Collab Highlight:
  • Options:
    • Show first name — Displays creator’s first name
    • Show shop title — Displays creator’s shop title
    • Hide labels — Shows logo/photo without text
    • Hide component — Hides the entire collab highlight
Recommended: Show first name for most use cases Carousel Type:
  • Social Design — Instagram/TikTok-style story carousel
  • Inline Carousel — Traditional product carousel
Fallback Video:
  • If no UGC is uploaded by the creator, show a tasteful fallback video
  • Keeps the hero engaging even without creator content

​
Styling

Background:
  • Set a background color
  • Optionally set a background image
  • Set text color (or use auto-contrast)
Auto Contrast:
  • Enabled: Text color automatically adjusts (white on dark backgrounds, black on light)
  • Disabled: Use manual text color
Additional Styling Options:
  • Badge background color
  • Badge border color
  • Button background color (override theme or use theme default)
  • Border widths
  • Border radius (for sharp corners)
  • Vertical padding (all devices)
  • Accent text size
  • Uppercase accent text toggle
  • Star adjustment (for trust indicators)
  • Left padding for desktop (when carousel is on left)
Custom CSS:
  • Apply custom CSS as needed for advanced styling

​
Product Sections

​
Choose Your Product Section

CreatorCommerce offers two main product section types:
Best for: Higher SKU stores (10+ products)
  • Great for apparel
  • Great for health & beauty
  • Creators can make multiple collections (drops)
  • Dropdown selector to switch between drops
  • “Add Bundle to Cart” functionality
When to use: Stores with many products where creators curate multiple themed collections
For this guide: We’ll focus on CC Products - Curated Lists (most common use case).

​
Add Curated Lists Section

1

Add Section

In your creator template, click Add section
2

Search for CC

Type “CC” in the search to filter CreatorCommerce sections
3

Select CC Products - Curated Lists

Click CC Products - Curated Lists to add it
What you get: A pre-built product grid section that:
  • Automatically pulls in creator drops
  • Shows a dropdown to switch between drops
  • Includes a pre-made product card
  • Supports “Add Bundle to Cart”

​
Customize Product Card

Option 1: Use Pre-Built Card (Default)
  • The section comes with a pre-made product card
  • Works out of the box
  • Good for quick launches
Option 2: Use Your Theme’s Product Card If you want to use your theme’s existing product card (with quick add, aspect ratio settings, etc.):
1

Find Your Theme's Product Card

In your theme files, search for product-card or card-product (usually in snippets/)Tip: Check your featured collection section or any product list section—they likely use your theme’s product card
2

Copy the Snippet

Open the product card snippet file and copy its contents
3

Paste into Curated Lists Section

In the Theme Editor:
  1. Click on your CC Products - Curated Lists section
  2. Find the Custom Product Card or Product Card Snippet setting
  3. Paste your snippet code
Alternative: If the section has a snippet selector, choose your theme’s product card snippet
Result: Your curated lists now use your theme’s product card with all its bells and whistles (quick add, aspect ratios, etc.).

​
Product Page Customization

​
Add Creator Quote Sections

When customers view products, show creator endorsements and quotes. CreatorCommerce offers two complementary sections:
What it is: A sticky banner that appears when a creator has a note or media for the productFeatures:
  • Shows creator avatar
  • Displays product quote/note
  • Shows UGC attached to product
  • Expandable to reveal full quote and media carousel
  • Sticky positioning options
Best for: Prominent, always-visible creator endorsement
Recommendation: Use both sections together. They show the same quote but in different formats—the badge is a sticky banner, the editorial is more integrated into the page flow.

​
Add Quote Sections to Product Template

1

Open Product Template

In Theme Editor, go to your product template (usually templates/product.json or the default product template)
2

Add Section

Click Add section → Search for “CC”
3

Add Quote Badge

Add CC Product - Quote Badge section
4

Add Quote Editorial

Add CC Product - Quote Editorial section
5

Configure Settings

For each section, configure:
  • Visibility settings
  • Position (for badge: fixed top, fixed bottom, or natural)
  • Styling (colors, fonts, spacing)
  • Behavior (expand on click, etc.)

​
Preview as Creator

How to test:
1

Select Preview as Creator

In the Theme Editor, find Preview as creator or Select preview as creator option
2

Switch Product

You’ll also need to switch the product preview to a product that has a review from the selected creator
3

View Sections

The quote badge and editorial sections will appear on the product page when:
  • Creator context is active (via cart attributes or metaobject page)
  • The creator has a product enhancement (note or media) for that product
Note: If a creator doesn’t have a note or media for a product, these sections won’t display (by design).

​
Testing Your Storefront

​
Final Checklist

Before publishing:
  • CreatorCommerce SDK is enabled (App Embeds)
  • Creator template created and populated
  • Hero section configured with creator content
  • Product section added (curated lists or bundles)
  • Product card customized (if desired)
  • Product page quote sections added
  • Test creator has content (photo, bio, drops, reviews)

​
Publish and Test

1

Publish Theme

In Theme Editor, click Publish to make your changes live
2

Get Affiliate Link

Click on your test creator in CreatorCommerce → Copy their affiliate link
3

Test the Experience

Open the affiliate link in a new browser (or incognito window) to see the full co-branded experience:
  • Creator landing page with personalized hero
  • Curated product collections
  • Product pages with creator quotes
  • Discount codes applied
What to verify:
  • Creator name and photo appear correctly
  • Product collections load
  • Creator quotes show on product pages
  • Discount codes work
  • Cart attributes are set (check in browser console)
  • Mobile experience works

​
Next Steps

Once your basic storefront is live:
  1. Add More Sections — Explore other CC sections (banners, testimonials, etc.)
  2. Customize Styling — Fine-tune colors, fonts, spacing to match your brand
  3. Test with Real Creators — Invite a real creator to test the experience
  4. Extend to Full Funnel — Add co-branding to cart, checkout, and post-purchase
  5. Enable Tracking — Set up analytics to measure performance