Skip to main content

​
Migration Approach

Don’t rebuild from scratch. Add creator awareness to existing sections. The goal is to enhance what you already have — your section works exactly the same when there’s no creator context, but personalizes dynamically when a creator is active.
Never modify original theme files directly. Always duplicate first. Create a cc- prefixed copy (e.g., cc-featured-collection.liquid) so you can roll back at any time.

​
Before You Start

​
File Naming Convention

Original:   sections/featured-collection.liquid
CC Version: sections/cc-featured-collection.liquid

​
Migration Checklist

  • Identify which sections to migrate (see Priority Sections below)
  • Duplicate each file with cc- prefix
  • Add creator resolution at the top
  • Identify personalizable elements in the HTML
  • Wrap those elements with conditionals
  • Add preview creator setting for theme editor
  • Test with and without creator context
  • Update your page templates to reference the CC version

​
Step-by-Step Process

​
1. Add Creator Resolution

Add the universal resolution block at the very top of the section, before any HTML or existing Liquid: 
{% liquid
  if metaobject
    assign cc_creator = metaobject
  elsif request.design_mode and section.settings.preview_creator_handle != blank
    assign cc_creator = metaobjects.creator[section.settings.preview_creator_handle]
  else
    assign cc_handle = cart.attributes['cc-creator-handle']
    assign cc_creator = metaobjects.creator[cc_handle]
  endif
  
  assign has_creator = cc_creator != blank
%}
This block handles three scenarios in priority order: metaobject page (direct access), theme editor preview (testing), and cart attribute resolution (all other pages). Order matters — metaobject check must come first.

​
2. Identify Personalizable Elements

Scan the section’s HTML for elements that could be personalized with creator data:
ElementWhat to PersonalizeCreator Field
HeadingsAdd creator name or use dynamic text tokenscc-creator-first-name
Hero imagesSwap for creator profile picture or featured mediacc-creator-profile-picture
Subheadings / body copyReplace with creator description or biocc-creator-shop-description
CTAsReference exclusive offer or discount codecc-collab-discount-code
Background colorsApply creator brand colorcc-creator-shop-theme-primary-color
Product gridsFilter to creator drops collectionscc-creator-drops

​
3. Wrap with Conditionals

For each personalizable element, wrap the output with a creator check. The else branch should always render the original content: 
{% if has_creator %}
  <h2>{{ cc_creator.cc-creator-first-name | escape }}'s Favorites</h2>
{% else %}
  <h2>{{ section.settings.heading }}</h2>
{% endif %}
For images: 
{% if has_creator and cc_creator.cc-creator-profile-picture %}
  <img 
    src="{{ cc_creator.cc-creator-profile-picture | image_url: width: 600 }}" 
    alt="{{ cc_creator.cc-creator-first-name | escape }}"
    loading="lazy"
  >
{% elsif section.settings.image %}
  <img 
    src="{{ section.settings.image | image_url: width: 600 }}" 
    alt="{{ section.settings.image.alt }}"
    loading="lazy"
  >
{% endif %}
For discount banners: 
{% if has_creator and cc_creator.cc-collab-discount-code %}
  <div class="discount-banner">
    Use code <strong>{{ cc_creator.cc-collab-discount-code | escape }}</strong>
    for {{ cc_creator.cc-collab-discount-amount | escape }}% off
  </div>
{% endif %}

​
4. Use Dynamic Text Tokens

For text settings that should personalize, use the cc-dynamic-text snippet so merchants can write text like “Shop [cc-creator-first-name]‘s picks” in the theme editor: 
<h1>
  {% render 'cc-dynamic-text', text: section.settings.heading, cc_creator: cc_creator %}
</h1>
See the Dynamic Content Snippet for full token reference.

​
5. Apply Creator Brand Colors

If the section has colored elements, apply creator brand colors via CSS variables: 
{% if has_creator and cc_creator.cc-creator-shop-theme-primary-color %}
  <style>
    #shopify-section-{{ section.id }} {
      --cc-primary-color: {{ cc_creator.cc-creator-shop-theme-primary-color | default: 'inherit' }};
    }
  </style>
{% endif %}
Then reference the variable in your existing CSS: 
.section-banner {
  background-color: var(--cc-primary-color, var(--color-background));
}

​
6. Add Preview Setting to Schema

Add a preview creator handle setting so merchants and developers can test the co-branded experience in the theme editor without needing cart attributes: 
{
  "type": "header",
  "content": "CreatorCommerce Preview"
},
{
  "type": "text",
  "id": "preview_creator_handle",
  "label": "Preview Creator Handle",
  "info": "Enter a creator handle to preview co-branded appearance in the editor. This does not affect the live site."
}

​
7. Converting Product Grids to Support Drops

If the section displays products, you can optionally filter to the creator’s drops: 
{% if has_creator and cc_creator.cc-creator-drops.value %}
  {% assign drops_data = cc_creator.data.value['cc-creator-drops'] %}
  {% assign drops_collections = cc_creator['cc-creator-drops'].value %}
  
  {% for json_drop in drops_data %}
    {% assign drop_collection_id = json_drop['cc-creator-drop-collection-id'] %}
    
    {% for collection_drop in drops_collections %}
      {% if collection_drop.id | append: '' == drop_collection_id %}
        {% for product in collection_drop.products limit: section.settings.products_per_row %}
          {% render 'product-card', product: product %}
        {% endfor %}
        {% break %}
      {% endif %}
    {% endfor %}
  {% endfor %}
{% else %}
  {% comment %} Original product rendering {% endcomment %}
  {% for product in section.settings.collection.products limit: section.settings.products_per_row %}
    {% render 'product-card', product: product %}
  {% endfor %}
{% endif %}
The | append: '' on collection_drop.id converts the integer ID to a string so it matches the string ID stored in the JSON drops data. This type conversion is critical — see ID Type Conversion.

​
Priority Sections

Migrate sections in this order based on impact:
PrioritySection TypeWhy First
1Hero / bannerFirst thing visitors see — creator name + photo = immediate personalization
2Featured collection / product gridShows creator drops — the core shopping experience
3Promotional bannerDisplay discount code prominently
4Testimonial / quote blockCreator endorsement and social proof
5Email signup / newsletterPersonalize opt-in messaging with creator context
6Footer / announcement barSubtle touches that reinforce the co-branded feel
Here’s a full before/after showing the migration of a typical featured collection section: Before (original featured-collection.liquid): 
<section class="featured-collection">
  <h2>{{ section.settings.heading }}</h2>
  <div class="product-grid">
    {% for product in section.settings.collection.products limit: 4 %}
      {% render 'product-card', product: product %}
    {% endfor %}
  </div>
</section>

{% schema %}
{
  "name": "Featured Collection",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Featured Products" },
    { "type": "collection", "id": "collection", "label": "Collection" }
  ]
}
{% endschema %}
After (new cc-featured-collection.liquid): 
{%- liquid
  if metaobject
    assign cc_creator = metaobject
  elsif request.design_mode and section.settings.preview_creator_handle != blank
    assign cc_creator = metaobjects.creator[section.settings.preview_creator_handle]
  else
    assign cc_handle = cart.attributes['cc-creator-handle']
    assign cc_creator = metaobjects.creator[cc_handle]
  endif
  
  assign has_creator = cc_creator != blank
  assign creator_name = cc_creator.cc-creator-first-name | default: '' | escape
-%}

<section class="featured-collection">
  <h2>
    {%- if has_creator -%}
      {% render 'cc-dynamic-text', text: section.settings.heading, cc_creator: cc_creator %}
    {%- else -%}
      {{ section.settings.heading }}
    {%- endif -%}
  </h2>
  
  <div class="product-grid">
    {%- if has_creator and cc_creator.cc-creator-drops.value -%}
      {%- assign drops_data = cc_creator.data.value['cc-creator-drops'] -%}
      {%- assign drops_collections = cc_creator['cc-creator-drops'].value -%}
      
      {%- for json_drop in drops_data limit: 1 -%}
        {%- assign drop_collection_id = json_drop['cc-creator-drop-collection-id'] -%}
        
        {%- for collection_drop in drops_collections -%}
          {%- if collection_drop.id | append: '' == drop_collection_id -%}
            {%- for product in collection_drop.products limit: 4 -%}
              {% render 'product-card', product: product %}
            {%- endfor -%}
            {%- break -%}
          {%- endif -%}
        {%- endfor -%}
      {%- endfor -%}
    {%- else -%}
      {%- for product in section.settings.collection.products limit: 4 -%}
        {% render 'product-card', product: product %}
      {%- endfor -%}
    {%- endif -%}
  </div>
</section>

{% schema %}
{
  "name": "CC Featured Collection",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Shop [cc-creator-first-name]'s Picks" },
    { "type": "collection", "id": "collection", "label": "Fallback Collection" },
    {
      "type": "header",
      "content": "CreatorCommerce Preview"
    },
    {
      "type": "text",
      "id": "preview_creator_handle",
      "label": "Preview Creator Handle",
      "info": "Enter a creator handle to preview co-branded appearance in the editor."
    }
  ],
  "presets": [{ "name": "CC Featured Collection" }]
}
{% endschema %}

​
Testing Checklist