Skip to main content

​
Pop-up Types and Timing

| Type | Trigger | Use Case | Avoid Showing | |------|---------|----------| | Welcome | Delay (5-12s) | Greet creator’s audience with context | Immediately on landing-page entry | | Exit intent | Mouse leaves / back intent | Remind of creator offer before bounce | More than once per session | | Email capture | Scroll depth or timed delay | Grow list with creator attribution | Before shopper sees value content | | Cart reminder | Idle on cart / drawer close | Nudge checkout with creator reassurance | During active checkout interaction |

​
Resolve Creator Context First

Use the same creator-resolution pattern before popup rendering: 
{% 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
%}
  • Use one primary CTA (Shop Now or Copy Code) and one quiet dismiss action.
  • Include creator profile photo in the header for instant recognition.
  • If available, add brand logo beside creator image (creator-avatar × brand-logo) for visual co-branding.
  • Frequency-cap by creator (once per session per creator).
  • Suppress generic popup campaigns while creator context is active.
  • Keep popup copy short and practical: offer, code, and next action.

​
Suppress Generic Pop-ups for Creator Traffic

When a customer arrives via creator link, suppress your standard pop-ups: 
// Check for creator context
if (localStorage.getItem('cc_creator_handle') || 
    document.cookie.includes('cc_creator')) {
  window.SUPPRESS_GENERIC_POPUP = true;
}

​
Creator-Aware Pop-up

{% if has_creator %}
  <aside class="cc-popup" id="cc-welcome" hidden>
    <div class="cc-popup__header">
      {% if cc_creator['cc-creator-profile-picture'] %}
        <img
          src="{{ cc_creator['cc-creator-profile-picture'] }}"
          alt="{{ cc_creator['cc-creator-first-name'] | escape }}"
          width="36"
          height="36"
          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 }}"
          height="14"
          loading="lazy"
        >
      {% endif %}
    </div>

    <h3>{{ 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>

    <a class="button" href="#drops-anchor">Shop Now</a>
    <button type="button" class="button button--tertiary" onclick="document.getElementById('cc-welcome').hidden = true;">
      Continue browsing
    </button>
  </aside>
{% endif %}

​
Frequency-Cap and Display Rules

const creatorHandle = window.CC_CREATOR_HANDLE || localStorage.getItem('cc_creator_handle');
const popupKey = creatorHandle ? `cc_popup_seen_${creatorHandle}` : null;

if (popupKey && !sessionStorage.getItem(popupKey)) {
  const isCreatorLandingPage = window.location.pathname.includes('/pages/creators/');

  // Don't interrupt immediately on the landing page itself.
  if (!isCreatorLandingPage) {
    window.setTimeout(() => {
      const popup = document.getElementById('cc-welcome');
      if (popup) {
        popup.hidden = false;
        sessionStorage.setItem(popupKey, '1');
      }
    }, 8000);
  }
}

​
Email Capture with Attribution

Ensure email signups include creator attribution: 
<form action="/contact" method="post">
  <input type="email" name="contact[email]" required />
  <input type="hidden" name="contact[tags]" value="cc-signup,cc-{{ cc_creator.handle }}" />
  <input type="hidden" name="contact[note][cc_creator_handle]" value="{{ cc_creator.handle }}">
  <input type="hidden" name="contact[note][cc_discount_code]" value="{{ cc_creator['cc-collab-discount-code'] }}">
  <button type="submit">Get {{ cc_creator['cc-collab-discount-amount'] }}% Off</button>
</form>