> ## 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.

# Integrating with Headless

> Use Replo alongside a headless commerce stack.

## What is Headless Commerce?

Headless commerce setups separates your product catalog and order management (your commerce "backend") from your customer-facing storefront (the "frontend"). This architecture lets development teams build custom storefronts using modern frameworks and content management systems while pulling product data from platforms like Shopify, WooCommerce, or custom commerce APIs.

If your brand uses a headless setup, you can use Replo to build high-converting experiences on a separate domain without touching your core commerce experience.

### Why Brands Originally Adopted Headless

During COVID, many brands moved to headless commerce to gain flexibility and control over their customer experience. Instead of being constrained by platform templates, development teams could build completely custom storefronts using frameworks like Next.js, Gatsby, or custom React applications.

Common reasons for going headless include full design control (no platform limitations), performance optimization (faster page loads improve conversion rates), multi-channel flexibility (one backend powering multiple storefronts), and unique customer experiences (custom configurators, checkout flows, and personalization).

### The Reality of Traditional Headless Setups

While headless offers flexibility, it comes with operational challenges most brands underestimate.

Every change needs developer resources. Update a hero image? Need a developer. Test a new offer? Need a developer. Your marketing team can't ship independently, creating constant competition for development bandwidth.

To manage content without developers, brands add a headless [CMS](/glossary#cms) like Contentful, Sanity, or Prismic. Now you're managing multiple systems, your commerce platform, CMS, and frontend framework, with each integration adding complexity. The problem is that no one has combined the visual side of content management with CMS power, until now.

What takes 10 minutes in a page builder takes days or weeks in traditional headless setups. By the time your team ships a campaign, the opportunity has passed. In performance marketing, speed is everything, delayed campaigns mean missed revenue.

Headless requires dedicated frontend developers, DevOps engineers, and CMS specialists. These roles cost \$100K-\$200K+ each. For most brands, the cost outweighs the benefits.

Your marketing team knows what converts. They understand [CAC](/glossary#cac), [LTV](/glossary#ltv), and which offers drive [ROAS](/glossary#roas). But in traditional headless setups, they can't execute on their ideas without developer resources. This dependency kills agility and testing velocity.

The promise of headless was flexibility. The reality is that most brands end up *less* flexible than they were on platforms like Shopify, just with higher costs and longer timelines.

This works when you have infinite developer resources. If your brand raises venture capital and can afford multiple full-time frontend engineers, headless can deliver on its promise. But in practice, almost all brands are bottlenecked by their development teams. Marketing has ideas. Engineering has a backlog. Campaigns get delayed. Revenue gets missed.

<Warning>
  Headless rebuilds are big projects: technical architecture planning, frontend development, CMS integration, and ongoing maintenance add up fast. For most brands, these implementations rarely deliver better campaign results, just higher bills and slower marketing execution than the performance improvements they were promised.
</Warning>

### How Replo Solves This

Replo is the best of both worlds. Your development team can focus on building your core commerce experience on your root domain, the custom features, advanced functionality, and brand experience that justify a headless architecture. Meanwhile, your marketing team operates independently on a separate subdomain (e.g., `shop.yourbrand.com`), shipping campaigns, landing pages, and promotional content without developer resources. Both teams work in parallel. Everyone minds their own business.

Replo gives you the performance and flexibility benefits of headless commerce without the operational overhead. Your marketing team can build and ship high-converting campaigns independently while integrating seamlessly with your existing commerce backend. No developers required for day-to-day campaigns.

Replo combines the visual side of content management (you see exactly what you're building) with the power and speed of AI, no need to understand data models, component mapping, or code. What used to take days or weeks with traditional headless setups now takes minutes. Your pages are also fast, optimized for performance to maximize conversion rates.

## How Replo Works with Headless Setups

<Tip>
  Replo does not integrate directly with your existing headless frontend codebase (Next.js, custom React applications, etc.). Instead, Replo lets you build complete experiences on a subdomain like `shop.yourbrand.com` that integrate with your backend commerce platform and order management system. This gives your marketing team a separate space to build campaigns, landing pages, and sales funnels without touching your core domain, while still pulling from the same product catalog and checkout process.
</Tip>

With Replo, your pages and sales funnels live on their own hosted domain or subdomain (such as `shop.yourbrand.com`). Replo integrates with your commerce platform's backend to pull product data, handle cart operations, and process orders through your existing checkout system.

### How this impacts your team

Your marketing team builds and ships pages in Replo without developer involvement. This works especially well for post-click direct response campaigns, paid social landing pages, email campaign destinations, seasonal promotions, where your content can live on a separate domain optimized purely for conversion. Your developers focus on your root domain and core product experience. Your marketing team owns the subdomain and campaign content. Both teams operate independently.

Customers browse products on your Replo pages, add items to cart, and check out through your existing commerce platform. All order data flows into your existing system for fulfillment. Your marketing team gets a functionally independent workspace for all their campaign content while maintaining full integration with your backend systems.

<Tabs>
  <Tab title="Headless Shopify">
    ## Headless Shopify Setup

    If you're using Shopify as your commerce backend but want to build different experiences without relying on your existing headless setup or engineering team, Replo provides a native integration that works independently from your main site.

    Replo connects to your Shopify admin through the [Shopify integration](/apps/integrations) and pulls your entire product catalog, including variants, selling plans, inventory levels, and pricing. When customers add products to cart on your Replo pages, they're added to your Shopify store's [headless cart](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/cart). Checkout happens through your Shopify Checkout, and orders appear in your Shopify admin for fulfillment.

    You must host Replo on a standalone domain (e.g., `shop.yourbrand.com`). This keeps your Replo pages separate from your existing headless deployment while maintaining full integration with your Shopify stack.

    <Note>
      If you already have automation set up in Shopify, such as abandoned cart emails, order confirmation flows, or customer segmentation, it will work automatically with your Replo pages since all cart and order data flows through your Shopify store.
    </Note>

    <Steps>
      <Step title="Connect your Shopify store">
        Connect your Shopify store from the [Integrations app](/apps/integrations).

        1. Open the **Integrations** app and choose **Shopify**
        2. Click **Connect** — you'll be sent to Shopify to install the Replo app
        3. Approve Replo's access in your Shopify admin
        4. You'll be redirected back to Replo with your store connected

        <Tip>
          Replo requests read access to your products, collections, inventory, and orders. It never modifies your existing Shopify data, it only syncs products into Replo so you can use them on landing pages.
        </Tip>
      </Step>

      <Step title="Products sync automatically">
        Once connected, Replo pulls your entire product catalog from your Shopify store. This might take a few minutes for large catalogs (500+ products).

        What syncs from your Shopify store:

        * Product title, description, and tags
        * Variants (sizes, colors, materials, etc.)
        * Selling plans (subscriptions via Shopify, Recharge, Skio, etc.)
        * Inventory levels and out of stock status
        * Pricing and compare-at pricing
        * Images, videos, and product media

        Product changes in your Shopify store sync to Replo within **5 minutes**. Prices and inventory are always updated in real-time in your cart, so customers never purchase with outdated information.
      </Step>

      <Step title="Set up your standalone domain">
        Configure your Replo pages to be hosted on a standalone domain (e.g., `shop.yourbrand.com`). Think of this as creating microsites or micro-experiences that branch off from your primary headless site while pulling from the same Shopify backend.

        Your Replo pages will live at URLs like:

        * `shop.yourbrand.com/serum-landing`
        * `shop.yourbrand.com/bfcm-sale`
        * `shop.yourbrand.com/bundles`

        To learn how to set up custom domains and subdomains, see [Custom Domains](/custom-domains).
      </Step>

      <Step title="Launch high-converting experiences">
        Build landing pages, sales funnels, and campaigns in Replo using your synced products from Shopify. Add products to your pages using product components (product cards, buy buttons, variant selectors, etc.). All your product data is available, no manual setup required.

        All pixels you've installed in your Shopify store (Meta, TikTok, Google, Klaviyo) automatically work on your Replo pages with full cross-domain tracking once you add the corresponding integrations in Replo. [Learn more about integrations](/integrations/introduction)
      </Step>

      <Step title="Cart and checkout flow">
        When customers add products to cart on your Replo pages, they're added to your Shopify store's headless cart. All cart events (add to cart, view cart, begin checkout) are tracked in your Shopify store for accurate analytics and attribution.

        When customers click checkout, they're sent to your [Shopify Checkout](https://www.shopify.com/checkout-kit) where your store handles payments, fulfillment, and order management. Orders appear in your Shopify admin exactly like orders from your main store.
      </Step>

      <Step title="Publish and drive traffic">
        Publish your Replo pages on your subdomain and start driving traffic from paid social, email campaigns, or organic channels. Your headless setup means you can iterate quickly without touching your main store.
      </Step>
    </Steps>

    ### Managing Products and Inventory

    All product management happens in your Shopify store, not Replo. Update product information, inventory levels, and pricing in your Shopify admin, and changes sync to Replo automatically within 5 minutes.

    ### Use Cases for Headless Shopify

    Think of your primary headless site as your main brand experience, and Replo as a way to branch off different microsites or micro-experiences for specific campaigns, channels, or audiences, all pulling from the same Shopify backend.

    <CardGroup cols={2}>
      <Card title="Paid Social Landing Pages" icon="bullseye-arrow" href="/use-cases/ecommerce/landing-pages">
        Build dedicated landing pages for each campaign on your standalone domain without affecting your main site's design or performance.
      </Card>

      <Card title="BFCM and Seasonal Campaigns" icon="gifts" href="/use-cases/bfcm">
        Ship aggressive promotional microsites while keeping your main store focused on full-price products and brand experience.
      </Card>

      <Card title="Advertorials and Listicles" icon="newspaper" href="/use-cases/advertorials">
        Create content-driven experiences on separate domains to build trust and SEO authority for specific product categories.
      </Card>

      <Card title="Subscription and Bundle Offers" icon="box" href="/use-cases/subscription">
        Test new subscription models, bundle offers, or pricing strategies on your Replo domain before rolling them out to your main store.
      </Card>
    </CardGroup>

    For more Shopify-specific details, see [Selling with Shopify](/commerce/shopify).
  </Tab>

  <Tab title="Headless 3rd Party Platforms">
    ## Headless 3rd Party Platforms

    If you're using a commerce platform other than Shopify (or using a custom commerce backend), you can still use Replo to build high-converting landing pages. Unlike our Shopify integration, product data and inventory don't sync automatically in real-time, so you'll manually configure products and link out to your existing checkout flow.

    You manually create product references in Replo that match your products in your commerce platform. When customers click "Buy Now" or "Add to Cart" on your Replo pages, they're redirected to your existing checkout or product pages to complete their purchase.

    Replo supports linking to any commerce platform, including:

    * [WooCommerce](/commerce/external/woocommerce)
    * [Gumroad](/commerce/external/gumroad)
    * [Stripe](/commerce/external/stripe)
    * [PayPal](/commerce/external/paypal)
    * Custom commerce backends

    <Steps>
      <Step title="Choose your commerce platform">
        Decide which commerce platform or custom backend you'll use to handle checkout and order management. You'll link from Replo to this platform when customers are ready to purchase.
      </Step>

      <Step title="Create product references in Replo">
        Manually add products to Replo by creating product components with images, descriptions, and pricing. These don't sync automatically, you'll need to update them manually if product information changes.
      </Step>

      <Step title="Configure checkout links">
        Set up buttons and links in Replo to redirect customers to your commerce platform's checkout or product pages. You can use URL parameters to pre-fill cart information if your platform supports it.
      </Step>

      <Step title="Track conversions">
        Use UTM parameters and pixel tracking to monitor which traffic from your Replo pages converts in your commerce platform. You'll need to ensure your pixels are properly configured on both Replo and your checkout pages for accurate attribution.
      </Step>
    </Steps>

    ### Platform-Specific Guides

    For detailed instructions on integrating specific platforms, see:

    * [WooCommerce](/commerce/external/woocommerce): WordPress-based ecommerce platform
    * [Gumroad](/commerce/external/gumroad): Digital products and memberships
    * [Stripe](/commerce/external/stripe): Custom checkout flows with Stripe
    * [PayPal](/commerce/external/paypal): PayPal payment buttons and links

    For a full list of supported platforms, see [External Commerce Platforms](/commerce/external/introduction).

    ### Pros and Cons of 3rd Party Headless Setups

    | Pros                                                                                                | Cons                                                                             |
    | --------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
    | **Complete flexibility**, Ship campaigns independently using Replo's AI without developer resources | **Manual product management**, Product data doesn't sync automatically           |
    | **Separate domain benefits**, Create distinct brand experiences for different audiences             | **Limited cart functionality**, Customers redirect to your platform for checkout |
    | **Cross-domain tracking**, Attribution works seamlessly with proper pixel configuration             | **No native checkout integration**, Can impact conversion rates                  |

    If you need automatic product syncing and seamless checkout, consider using [Shopify](/commerce/shopify) or [Headless Shopify](#headless-shopify) instead.
  </Tab>
</Tabs>

***

## Frequently Asked Questions

<AccordionGroup>
  <Accordion title="What are the advantages of using a standalone domain with my headless setup?">
    Running Replo on a separate domain (e.g., `shop.yourbrand.com`) gives you several strategic advantages. You can run aggressive promotional campaigns and direct response marketing without affecting your main store's brand positioning. You can exclude your Replo domain from search engines using robots.txt, which is useful for advertorials and paid acquisition pages that you don't want indexed. Your Replo domain can build independent authority with consumers, an advertorial site feels different from your core brand, which can actually improve trust for certain acquisition strategies. Plus, your marketing campaigns load independently and won't slow down your main headless site.
  </Accordion>

  <Accordion title="Why can't Replo integrate directly with my existing headless frontend code?">
    Headless codebases are complex and unique to each brand. Integrating directly with custom Next.js apps, React frontends, or other frameworks would require understanding your specific architecture, component library, and deployment pipeline. Instead, Replo lets you build complete experiences on a standalone domain while importing the important integrations, your products, inventory, checkout, and branding, so your Replo pages feel like part of the same brand without the complexity of code-level integration.
  </Accordion>

  <Accordion title="Do I need developers to manage my Replo pages in a headless setup?">
    No. Unlike traditional headless frontends that require developers for every change, Replo lets you build and ship pages using natural language. You can create landing pages, update content, test new offers, and launch campaigns without developer resources. This is one of the key advantages over traditional headless architectures that rely on engineering teams.
  </Accordion>

  <Accordion title="Can I run both a main headless site and Replo microsites?">
    Yes. This is the most common setup and the best of both worlds. Your development team builds and maintains your main headless site on your primary domain (e.g., `yourbrand.com`). Your marketing team builds and ships campaigns on your Replo standalone domain (e.g., `shop.yourbrand.com`). Both pull from the same Shopify backend, so products, inventory, and orders are synced across both storefronts. Both teams work in parallel without conflicts.
  </Accordion>

  <Accordion title="Do pixels track properly across my main store and Replo domain?">
    Yep, once you configure cross-domain tracking in Replo. Add your pixel integrations in Replo (Meta, TikTok, Google, etc.) under [Integrations](/integrations/introduction), and Replo will configure cross-domain tracking so pixels can follow customers from your Replo pages through your Shopify checkout.
  </Accordion>

  <Accordion title="What happens to CAC attribution if customers buy from my Replo domain?">
    Your Replo domain links automatically to your existing Shopify cart, so all attribution works the same as your main site. Use UTM parameters in your ad links to track which traffic came from specific campaigns. Your analytics platform (Google Analytics, Triple Whale, etc.) will attribute conversions based on UTM data and pixel tracking with cross-domain support once they are configured in [Integrations](/integrations/introduction).
  </Accordion>

  <Accordion title="Can I use different branding on my Replo domain vs. my main store?">
    Yes. You can create completely different brand experiences on your Replo domain. Common strategies include running aggressive discount promotions on your Replo domain while keeping your main store premium, or creating channel-specific experiences (e.g., TikTok-style landing pages) that match your ad creative.
  </Accordion>

  <Accordion title="Does a headless setup with separate domains affect SEO?">
    Google is smart enough to recognize that your subdomain and main domain are related, so SEO credibility remains similar across both. The main consideration is cross-linking between your domains to maintain site architecture. If you're using Replo primarily for paid acquisition (Meta ads, TikTok, Google Ads), SEO impact is minimal since most traffic comes from paid channels. If you're experiencing SEO issues with your setup, reach out to [support@replo.app](mailto:support@replo.app).
  </Accordion>
</AccordionGroup>

***

## Need Help?

Every headless setup is different. If you're setting up a headless commerce configuration and need assistance, reach out to [support@replo.app](mailto:support@replo.app) or [contact us](https://www.replo.app/contact). We'll help you architect the right setup for your brand.
