> ## Documentation Index > Fetch the complete documentation index at: https://beta-docs.replo.app/llms.txt > Use this file to discover all available pages before exploring further. # Build an Influencer Collab Page > Build a dedicated landing page for an influencer collection or brand partnership. export const Device = ({prompt, desktopImageSource, mobileImageSource, imageAlt = "Template preview", buttonCta = "Build in Replo"}) => { const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const [isMobile, setIsMobile] = useState(false); const [isDragging, setIsDragging] = useState(false); const [dragStart, setDragStart] = useState({ x: 0, y: 0 }); const [scrollStart, setScrollStart] = useState({ x: 0, y: 0 }); const [velocity, setVelocity] = useState({ x: 0, y: 0 }); const [lastPos, setLastPos] = useState({ x: 0, y: 0 }); const [lastTime, setLastTime] = useState(0); const [scrollContainer, setScrollContainer] = useState(null); const API_BASE = "https://api.replo.app"; const APP_SIGNUP_URL = "https://dashboard.replo.app/auth/signup"; const showToggle = desktopImageSource && mobileImageSource; const currentImage = showToggle && isMobile ? mobileImageSource : desktopImageSource; const handleMouseDown = (event, container) => { setIsDragging(true); setDragStart({ x: event.clientX, y: event.clientY }); setScrollStart({ x: container.scrollLeft, y: container.scrollTop }); setLastPos({ x: event.clientX, y: event.clientY }); setLastTime(Date.now()); setVelocity({ x: 0, y: 0 }); setScrollContainer(container); event.preventDefault(); }; const handleMouseMove = (event, container) => { if (!isDragging) return; const now = Date.now(); const elapsedMs = now - lastTime; if (elapsedMs > 0) { const deltaX = event.clientX - dragStart.x; const deltaY = event.clientY - dragStart.y; const velocityX = (event.clientX - lastPos.x) / elapsedMs; const velocityY = (event.clientY - lastPos.y) / elapsedMs; container.scrollLeft = scrollStart.x - deltaX; container.scrollTop = scrollStart.y - deltaY; setVelocity({ x: velocityX, y: velocityY }); setLastPos({ x: event.clientX, y: event.clientY }); setLastTime(now); } event.preventDefault(); }; const handleMouseUp = () => { setIsDragging(false); if (scrollContainer && (Math.abs(velocity.x) > 0.1 || Math.abs(velocity.y) > 0.1)) { startMomentumScroll(); } }; const startMomentumScroll = () => { let currentVelocity = { ...velocity }; const friction = 0.95; const minVelocity = 0.1; const animate = () => { if (!scrollContainer) return; scrollContainer.scrollLeft -= currentVelocity.x * 16; scrollContainer.scrollTop -= currentVelocity.y * 16; currentVelocity.x *= friction; currentVelocity.y *= friction; if (Math.abs(currentVelocity.x) > minVelocity || Math.abs(currentVelocity.y) > minVelocity) { requestAnimationFrame(animate); } }; requestAnimationFrame(animate); }; useEffect(() => { const handleGlobalMouseUp = () => { setIsDragging(false); }; window.addEventListener("mouseup", handleGlobalMouseUp); return () => { window.removeEventListener("mouseup", handleGlobalMouseUp); }; }, []); const LoaderIcon = ; const ChevronIcon = ; async function postJSON(url, body, headers = {}, timeoutMs = 120000) { const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), timeoutMs); try { const response = await fetch(url, { method: "POST", headers: { "Content-Type": "application/json", ...headers }, body: JSON.stringify(body ?? ({})), signal: controller.signal }); const responseText = await response.text(); if (!response.ok) throw new Error(`API Error: ${response.status}`); return responseText ? JSON.parse(responseText) : {}; } finally { clearTimeout(timeoutId); } } async function handleTryPrompt(event) { event.preventDefault(); event.stopPropagation(); setIsLoading(true); setError(null); try { const body = { prompt, file: null }; const {seed} = await postJSON(`${API_BASE}/api/v1/marketing/issue-marketing-site-jwt`, body); if (!seed) throw new Error("No seed returned from API"); const url = new URL(APP_SIGNUP_URL); url.hash = `seed=${encodeURIComponent(seed)}`; window.open(url.toString(), "_blank"); setIsLoading(false); } catch (caughtError) { console.error("Failed to generate prompt:", caughtError); const message = caughtError instanceof Error ? caughtError.message : null; setError(message ?? "Something went wrong. Please try again."); setIsLoading(false); } } return
{} {showToggle &&
} {}
{isMobile && mobileImageSource ?
{ handleMouseDown(event, event.currentTarget); }} onMouseMove={event => { handleMouseMove(event, event.currentTarget); }}> {imageAlt}
: desktopImageSource ?
{ handleMouseDown(event, event.currentTarget); }} onMouseMove={event => { handleMouseMove(event, event.currentTarget); }}> {imageAlt}
: null} {} {currentImage &&
}
{} {} {error &&
{error}
}
; }; ## Step 1: Start Your Collaboration Page with a Prompt ### Starter prompt The more specific you are about the collaboration details and visual direction, the better the output. ``` Recreate this collaboration page for me: https://www.warbyparker.com/emma-chamberlain-2024. Adapt it to my brand and collaboration details. Structure: - Hero section announcing the collaboration with large lifestyle image - Story section explaining the partnership and inspiration - Product showcase featuring 6-8 items from the collection - Editorial photo gallery showing the collection in use - Call-to-action sections driving to shop the full collection - Social proof or quote from the collaborator Use an editorial layout that feels premium. Mix lifestyle photography with clean product shots. Make the collaborator's name prominent throughout. ``` ## Step 2: Customize Your Content Replace the AI-generated content with your actual collaboration details, product lineup, and brand story. Replace placeholder content with your actual partnership information. ``` Update the collaboration details: Partner: [Influencer/Designer Name] Collection Name: [Brand] x [Partner Name] Launch Date: [Date] Story: [2-3 sentences about the inspiration and creative process] Hero Headline: [Main collaboration announcement] Subheadline: [Supporting text about the collection] ``` Collaboration pages convert best when they showcase the hero products immediately. Feature your highest-margin items and best sellers first. ``` Feature these products from the collection: Product 1: [Name] Image: [URL] Price: $[X] Product 2: [Name] Image: [URL] Price: $[X] Product 3: [Name] Image: [URL] Price: $[X] Continue for 6-8 products total. Show prices upfront, hiding pricing on collaboration pages typically lowers CVR by 30-40%. ``` Collaboration pages need strong visual storytelling. Use images of the collaborator wearing or using the products. ``` Replace the lifestyle images with: Hero image: [URL of main collaboration hero shot] Gallery image 1: [URL showing collaborator with products] Gallery image 2: [URL showing product details] Gallery image 3: [URL showing lifestyle context] Use high-resolution images (minimum 1920px wide) for the hero section. ``` If you don't have professional photoshoot assets yet, launch with product photography and lifestyle images from the influencer's existing content. You can update the page with campaign assets when they're ready. Including the collaborator's voice increases authenticity and can improve conversion by 15-25% for their audience. ``` Add this quote section: Quote: "[Actual quote from collaborator about the collection or partnership]" Attribution: [Collaborator Name] Or story section: [2-3 paragraphs about the creative process, inspiration, or what makes this collaboration unique] ``` ## Step 3: Personalize the Design The output will use your brand styles automatically. But collaboration pages often need a hybrid visual identity that represents both partners. Reference any URL to pull design inspiration, whether it's a competitor's collaboration page or your partner's brand aesthetic. **How to:** ``` Can you replicate the layout from [input URL] and apply it to my collaboration page? I like how it uses [large hero images, split-screen layouts, bold typography, editorial spacing]. ``` This works well when you want to match the visual sophistication of successful collaboration launches. Drop an image to show the exact visual direction you want. **How to:** ``` Can you apply the layout from this image to my collaboration page? I want the same [hero treatment, product grid, color scheme, typography hierarchy]. ``` This is especially useful when your collaborator has specific design preferences or brand guidelines you need to follow. Use natural language to describe the visual identity. Be specific about how you want to balance both brand aesthetics. **Example:** ``` I want this collaboration page to [blend our minimal aesthetic with the collaborator's bold, colorful style]. Use [our brand fonts and layout structure], but incorporate [their signature colors] in accents, CTAs, and product highlights. The hero section should feel [premium and editorial], while the product showcase should feel [energetic and approachable]. ``` For high-profile collaborations, consider creating a unique color palette or visual treatment that doesn't exist on either brand's main site. This signals exclusivity and can increase perceived value. ## Step 4: Set Up Your Links Use [select mode](/features/edit-mode) to select product cards and CTAs. Once selected: ``` This product card should link to [Product URL]. ``` Or to update all product links at once: ``` Update all product cards to link to their collection products: [Product 1] → [URL 1] [Product 2] → [URL 2] [Product 3] → [URL 3] ``` For collection CTAs: ``` This "Shop the Collection" button should link to [Collection URL or dedicated Shopify collection page]. ``` If your collaboration has limited inventory, link directly to product pages instead of collection pages. This reduces friction and prevents out-of-stock disappointment. ## Step 5: Publish Once your collaboration page is ready, click **Publish** in the top-right corner: 1. **Publish to your Replo domain**: every workspace gets a default domain (e.g. `yourshop.replosites.com`). Use this for testing or to share preview links with your collaborator for approval. 2. **Add a custom domain**: connect your own domain to publish under your brand's URL (e.g. `yourbrand.com/pages/collaboration-name`). [*Read more about Publishing and Custom Domains*](/publishing)*.* Click **Publish** again to make your collaboration page live. ## Collaboration Page Performance Tips Collaboration pages have short, intense traffic spikes. Optimize for that launch window: * **Launch timing matters**: coordinate your paid media push with when the collaborator posts to their audience. Simultaneous traffic from both sides drives the highest conversion. * **Track source-specific performance**: traffic from the collaborator's audience typically has higher CVR but lower AOV than your existing customers. Set different target CAC by source. * **Use urgency correctly**: "Limited edition" or "While supplies last" increases urgency without requiring actual inventory scarcity. But if you claim limited quantities, track inventory in real-time. * **Retarget immediately**: collaboration launches generate large awareness spikes. Set up retargeting campaigns in advance to capture interest from visitors who don't convert on first visit. * **Test collaborator prominence**: some brands see better performance when the influencer's name is dominant in the hero. Others convert better when the brand is primary. Test headline order: "\[Brand] x \[Influencer]" vs "\[Influencer] x \[Brand]". * **Email both lists**: if your collaborator has an email list, coordinate sends. Traffic from email typically converts 2-3x higher than cold social traffic. Don't launch a collaboration page without coordinating the publish time with your partner. Unsynced launches leave traffic on the table, if they announce before your page is live, or vice versa, you'll lose the momentum spike.