The Full Funnel
Landing Page → Collection → Product → Cart → Checkout → Post-Purchase
↓ ↓ ↓ ↓ ↓ ↓
Creator Creator Creator Creator Discount Thank You
Hero Context Quote Banner Applied Message
Touchpoints to Personalize
| Page | Personalization | Impact |
|---|
| Landing pages | Full creator showcase | Entry point — highest impact |
| Navigation/Headers | ”Shopping with [Creator]” banner | Persistent reminder |
| Collections | Creator’s picks highlighted | Discovery |
| Pop-ups | Co-branded content | Marketing Opt-in |
| Product pages | Creator quote, UGC, discounted price | Consideration |
| Cart drawers | Discount reminder, savings display | Conversion moment |
| Checkouts | Auto-applied discount code | Purchase |
| Thank you pages | Creator thank-you message | Post-purchase |
| Emails | Co-branded content | Retention |
Implementation Strategy
1. Resolve Creator Everywhere
Add to theme.liquid or a shared snippet rendered on every page:
{% liquid
if metaobject
assign cc_creator = metaobject
else
assign cc_handle = cart.attributes['cc-creator-handle']
assign cc_creator = metaobjects.creator[cc_handle]
endif
assign has_creator = cc_creator != blank
%}
cc_creator when a shopper is in a creator’s context.
Show a persistent banner when shopping through a creator, including the visual creator-avatar × brand-logo lockup:
{% if has_creator %}
<div class="cc-shopping-banner">
<div class="cc-shopping-banner__lockup">
{% if cc_creator['cc-creator-profile-picture'] %}
<img
src="{{ cc_creator['cc-creator-profile-picture'] }}"
alt="{{ cc_creator['cc-creator-first-name'] | escape }}"
loading="lazy"
>
{% endif %}
<span aria-hidden="true">×</span>
{% if cc_creator['cc-channel-brandkit-primary-logo'] %}
<img
src="{{ cc_creator['cc-channel-brandkit-primary-logo'] }}"
alt="{{ cc_creator['cc-channel-brandkit-title'] | default: shop.name | escape }}"
loading="lazy"
>
{% endif %}
</div>
<span>
Shopping with {{ cc_creator['cc-creator-first-name'] | escape }}
{% if cc_creator['cc-collab-discount-amount'] %}
· {{ cc_creator['cc-collab-discount-amount'] }}% Off
{% endif %}
</span>
{% if cc_creator['cc-collab-affiliate-link'] %}
<a href="{{ cc_creator['cc-collab-affiliate-link'] }}">
View Shop →
</a>
{% endif %}
</div>
{% endif %}
{% if cc_creator %}
<div class="cc-footer-cta">
<p>You're shopping {{ cc_creator['cc-creator-first-name'] | escape }}'s recommendations</p>
<a href="{{ cc_creator['cc-collab-affiliate-link'] }}" class="btn">
Back to {{ cc_creator['cc-creator-first-name'] | escape }}'s Shop
</a>
</div>
{% endif %}
4. Show More Creator Products
On any page, surface the creator’s recommended products:
{% if cc_creator and cc_creator['cc-creator-drops'].value %}
<section class="cc-creator-picks">
<h2>More from {{ cc_creator['cc-creator-first-name'] | escape }}</h2>
{% assign first_collection = cc_creator['cc-creator-drops'].value | first %}
{% if first_collection %}
<div class="product-grid">
{% for product in first_collection.products limit: 4 %}
{%- render 'product-card', product: product -%}
{% endfor %}
</div>
{% endif %}
</section>
{% endif %}
5. Creator-Aware Pop-ups
Show a welcome pop-up or discount reminder only for creator traffic:
{% if cc_creator %}
<div class="cc-popup" id="cc-creator-popup" style="display:none;">
<div class="cc-popup__content">
<h3>Welcome! {{ cc_creator['cc-creator-first-name'] | escape }} sent you</h3>
<p>Use code <strong>{{ cc_creator['cc-collab-discount-code'] }}</strong> for {{ cc_creator['cc-collab-discount-amount'] }}% off</p>
<button onclick="document.getElementById('cc-creator-popup').style.display='none'">Start Shopping</button>
</div>
</div>
{% endif %}
Minimize pop-ups on creator pages. The landing page itself should convey the discount. Reserve pop-ups for when the shopper navigates away from the landing page to browse the rest of the site.
6. Conditional Blocks in Any Section
Wrap creator content in conditionals within existing sections:
{% if cc_creator %}
<!-- Co-branded version -->
<div class="section-header">
<h2>{{ cc_creator['cc-creator-first-name'] | escape }}'s Picks</h2>
</div>
{% else %}
<!-- Standard version -->
<div class="section-header">
<h2>{{ section.settings.heading }}</h2>
</div>
{% endif %}
7. Brand Color Theming
Apply creator or channel brand colors as CSS variables:
{% if cc_creator and cc_creator['cc-creator-shop-theme-primary-color'] %}
<style>
:root {
--cc-creator-color: {{ cc_creator['cc-creator-shop-theme-primary-color'] | default: '#000000' }};
--cc-channel-color: {{ cc_creator['channel-brandkit-primary-color'] | default: '#000000' }};
}
</style>
{% endif %}
Maintain Context Across the Session
Cart attributes set by the CC SDK persist through the entire shopping session — from landing page through checkout. The SDK sets these attributes when the shopper first arrives:
cc-creator-handlecc-creator-idcc-campaign-id
As long as these attributes are in the cart, every page renders with creator context.
Priority Order
Start with highest-impact touchpoints:
- Landing page — Entry point, sets the tone
- Cart drawer/page — Conversion moment, show savings
- Product pages — Browse experience, creator endorsements
- Pop-ups — Disable or tether to affiliate discount
- Header/nav — Persistent reminder of creator context
- Collection pages — Discovery, highlight creator’s picks
- Footer — Link back to creator’s shop
Use Cases Beyond Basic Co-branding
- Influencer directory — Build a page listing all active creators with storefronts
- Re-skinned homepage — Swap homepage hero and content based on creator context
- Category-specific recommendations — Show creator’s picks for the current collection
- Post-purchase upsell — Recommend more products from the creator’s drops after checkout
