Getting Started with Landing Pages

Build co-branded landing pages using Shopify metaobject page templates for scalable, creator-personalized experiences.

What You’ll Build

A dedicated landing page for each creator that dynamically displays:

• Creator’s name, photo, and bio
• Their curated product picks (drops)
• Exclusive discount callout
• Brand-consistent design with creator personalization

Why Metaobject Page Templates

CreatorCommerce stores creator data in Shopify metaobjects (type: creator). Using Shopify’s metaobject page templates gives you:

• Convenient data access — The metaobject variable is automatically available in the template
• Scalable templates — One template serves all creators
• Theme editor compatibility — Design and configure in Shopify’s visual editor
• Automatic URL generation — Each creator gets /pages/creators/[handle]

Prerequisites

• CreatorCommerce installed on your store
• At least one collab created with profile data populated
• Access to Shopify theme editor or theme code
• Creator metaobject type exists (CC creates this automatically)

Choose Your Build Path First

Path 1: Out-of-the-box (Fastest)

Use prebuilt CC sections in Theme Editor:

• App Blocks 101
• Quick Start: Out-of-the-Box Blocks

Best when you want to launch quickly and keep everything editable in Theme Editor.

Path 2: Code-first (Most control)

Use this guide to build/extend templates in code:

• copy baseline homepage sections from templates/index.json
• swap in CC sections where needed
• wire dynamic sources and creator-aware copy

Best when you want deep control over structure, cards, and custom logic.

Quick Start

1. Enable page generation for Creator metaobjects

   In Shopify Admin → Settings → Custom data → Metaobjects → Creator, enable “Generate pages” for the creator metaobject type. This creates a web page for every creator entry.

2. Create a metaobject page template

   In the Theme Editor, create a new template for the creator metaobject type. This is the layout all creator landing pages will use.

   You can create this as:

   • JSON template — templates/metaobject/creator.json (recommended, section-based)
   • Liquid template — templates/metaobject/creator.liquid (full custom control)
3. Bootstrap from homepage sections (code-first quick win)

   If you already like your homepage section structure, use it as the landing-page baseline:

   1. Open templates/index.json
   2. Copy the sections + order structure
   3. Paste into templates/metaobject/creator.json
   4. Replace homepage-specific hero/featured sections with CC sections

   This gets you a production-quality baseline fast without starting from a blank template.

4. Add CC sections to the template

   Add CC sections to your template:

   • CC Hero — Creator intro with name, photo, bio, and optional background
   • CC Product Grid / Drops — Their curated product recommendations
   • CC Banner — Discount callout or promotional messaging

   See App Blocks 101 and Quick Start: Out-of-the-Box Blocks for section-by-section references.

5. Preview the page

   Visit /pages/creators/[creator-handle] to see the live page. In the theme editor, you can preview by selecting any creator entry from the metaobject picker.

Accessing Creator Data on Landing Pages

On metaobject page templates, the creator data is available directly through the metaobject variable:

{% assign cc_creator = metaobject %}

{%- comment -%} Basic fields {%- endcomment -%}
{{ cc_creator['cc-creator-first-name'] }}
{{ cc_creator['cc-creator-shop-description'] }}
{{ cc_creator.handle }}

{%- comment -%} Nested data (images, drops, custom fields) {%- endcomment -%}
{{ cc_creator.data.value.cc-creator-profile-picture }}
{{ cc_creator.data.value.cc-creator-drops }}

{%- comment -%} Discount info {%- endcomment -%}
{{ cc_creator['cc-collab-discount-code'] }}
{{ cc_creator['cc-collab-discount-amount'] }}

Dynamic Sources and Copy Quick Wins

Once the template is in place, use Theme Editor dynamic sources for non-developers to iterate copy quickly:

• map heading/description settings to creator fields when possible
• keep fallback static text for creator-absent states
• use section settings for campaign-specific text while creator fields handle personalization

Example fallback pattern in a section/snippet:

{% liquid
  assign cc_creator = metaobject
  assign hero_heading = section.settings.heading

  if cc_creator and cc_creator['cc-creator-first-name'] != blank
    assign hero_heading = cc_creator['cc-creator-first-name'] | append: "'s Picks"
  endif
%}

<h1>{{ hero_heading }}</h1>

This gives quick wins: marketing can update section settings, while creator context still personalizes automatically.

Advanced: Looping Through Drops and Products

Display creator drops (curated product collections) with their products:

{% assign drops_json = metaobject.data.value['cc-creator-drops'] %}
{% assign drops_collections = metaobject['cc-creator-drops'].value %}

{% if drops_json and drops_json.size > 0 %}
  {% for json_drop in drops_json %}
    {% assign collection_id = json_drop['cc-creator-drop-collection-id'] %}

    {% comment %} Match JSON drop to Shopify collection {% endcomment %}
    {% for collection_drop in drops_collections %}
      {% if collection_drop.id | append: '' == collection_id %}
        <section class="creator-drop">
          <h2>{{ json_drop['cc-creator-drop-title'] | default: collection_drop.title }}</h2>

          {% if json_drop['cc-creator-drop-description'] %}
            <p class="drop-description">{{ json_drop['cc-creator-drop-description'] }}</p>
          {% endif %}

          <div class="product-grid">
            {% for product in collection_drop.products limit: 12 %}
              {%- render 'product-card', product: product -%}
            {% endfor %}
          </div>
        </section>
        {% break %}
      {% endif %}
    {% endfor %}
  {% endfor %}
{% endif %}

Always iterate the JSON drops first (data.value['cc-creator-drops']) and match to Shopify collections by ID. This preserves the creator’s intended display order.

Testing

1. Theme editor — Select a creator from the metaobject picker to preview
2. Live preview — Visit /pages/creators/[handle] directly
3. Cart attributes — On non-metaobject pages, verify cart attributes are set by checking:

fetch('/cart.js').then(r => r.json()).then(c => console.log(c.attributes))

Best Practices

• Use the metaobject page template for dedicated creator pages
• Add fallback content for creators with missing fields
• Test with creators who have varying amounts of data
• Use section settings for brand-controlled design elements
• Keep creator data powering the personalization, not the layout

Next Steps

App Blocks 101

Understand exactly which CC sections/snippets to add in Theme Editor

Quick Start: Out-of-the-Box Blocks

Fast-track setup using pre-built CC sections (no code)

Create Additional Templates

Build multiple template variations for different campaigns

Enable Tracking

Set up attribution tracking for creator funnels

Personalize Product Pages

Extend co-branding beyond the landing page

Destinations

Configure where affiliate traffic lands