How to Create a Dynamic Affiliate Landing Page for Multiple Countries

If you're working with affiliates and running your ecommerce shop on different domains per country, it's important to build a clean and conversion-optimized landing page that automatically adapts based on the affiliate referrer code.

In this short tutorial, we'll show how to create a minimal and responsive landing page for your affiliates that automatically passes the referral code (ref) to country-specific domains like:

• 🇺🇸 en.selldone.com
• 🇬🇧 uk.selldone.com
• 🇩🇰 da.selldone.com
• 🇫🇷 fr.selldone.com

This setup is ideal when you're using different country-specific stores and want to keep your affiliate links centralized.

🎯 What We’re Building

• A simple yet stylish landing page with:
• A heading: "Exalted Fashion"
• A subtitle: "Select your country to start shopping..."
• Four large country buttons, each with the country’s flag
• Automatic referral code handling from the URL

Here’s the final result (scroll down for the code):

✅ HTML + JS Code (Ready to Use)

You can copy-paste the following code into any .html file and host it on your server:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Selldone Fashion</title>
  <style>
    body {
      font-family: 'Inter', sans-serif;
      background-color: #f9f9f9;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      color: #222;
    }

    main {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem 1rem;
    }

    h1 {
      font-size: 2.5rem;
      margin-bottom: 0.5rem;
    }

    p.instruction {
      font-size: 1.1rem;
      margin-bottom: 2rem;
      color: #555;
    }

    .buttons {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      width: 100%;
      max-width: 400px;
    }

    .country-button {
      padding: 1.2rem;
      font-size: 1.25rem;
      background-color: #fff;
      border: 2px solid #ddd;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none;
      color: #222;
      text-align: center;
    }

    .country-button:hover {
      background-color: #eee;
      border-color: #ccc;
    }

    @media (min-width: 600px) {
      .buttons {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
      }

      .country-button {
        flex: 1 1 40%;
      }
    }

    footer {
      padding: 1rem;
      text-align: center;
      font-size: 0.9rem;
      color: #888;
      border-top: 1px solid #eee;
      background-color: #fafafa;
    }
  </style>
</head>
<body>

  <main>
    <h1>Selldone Fashion</h1>
    <p class="instruction">Select your country to start shopping...</p>

    <div class="buttons">
      <a id="btn-us" class="country-button">🇺🇸 United States</a>
      <a id="btn-de" class="country-button">🇩🇪 Germany</a>
      <a id="btn-dk" class="country-button">🇩🇰 Denmark</a>
      <a id="btn-fr" class="country-button">🇫🇷 France</a>
    </div>
  </main>

  <footer>
    © <span id="year"></span> Selldone. All rights reserved.
  </footer>

  <script>
    function getRefParam() {
      const params = new URLSearchParams(window.location.search);
      return params.get("ref") || "";
    }

    const ref = getRefParam();

    document.getElementById("btn-us").href = `https://en.selldone.com?ref=${ref}`;
    document.getElementById("btn-de").href = `https://de.selldone.com?ref=${ref}`;
    document.getElementById("btn-dk").href = `https://da.selldone.com?ref=${ref}`;
    document.getElementById("btn-fr").href = `https://fr.selldone.com?ref=${ref}`;

    // Set current year in footer
    document.getElementById("year").textContent = new Date().getFullYear();
  </script>

</body>
</html>

🔧 How It Works

• Referral Code Extraction: We use URLSearchParams to grab the ref parameter from the current URL.
• Dynamic Redirection: When a user clicks a button, the script redirects them to the appropriate country domain and passes the ref code automatically.
• Responsive Design: The layout is mobile-friendly with large, accessible buttons. It uses Flexbox for consistent sizing.

💡 Why This Is Useful

• One link for all affiliates: They just need to link to xyz.com/?ref=XXXX.
• Localized experience: Customers are redirected to the shop domain that matches their region.
• No backend needed: This is a static, fully client-side solution.

🧪 Example URL

Visiting:

https://xyz.com/?ref=AFF12345

Clicking the 🇩🇰 Denmark button redirects to:

https://da.selldone.com/?ref=AFF12345

🚀 Next Steps

1. Embed this page on your affiliate documentation.
2. Share the base link https://xyz.com/?ref=YOURCODE with your partners.
3. You can extend the button list with more countries later using the same format.

Customize Your Landing Page in ChatGPT

You can customize this page to your needs using ChatGPT at the following link:

ChatGPT - Selldone Fashion Landing Page

Shared via ChatGPT

ChatGPT

⚡ How to Deploy the Page

You have two easy options to publish your dynamic affiliate landing page:

Option 1. Deploy on Your Selldone Shop:

Log in to your Selldone dashboard, go to Pages > Static, and create a folder (e.g., affiliate). Upload your HTML file as index.html inside this folder. Then, head over to the Domains section, add a new domain or subdomain, and assign it to the new static page by setting the path to the affiliate folder.

Option 2. Deploy for Free on Cloudflare Pages (recommended):

You can also host your page for free using Cloudflare Pages. Simply create a new project, drag and drop your index.html file, and deploy it. Once it's live, assign a custom subdomain (or domain) in Cloudflare to make the page accessible on the web.

Free Website on Your Own Domain in Minutes? Yes! Here’s How to Use Cloudflare to Host a Static Page

Learn how to create and deploy a static website using Cloudflare Pages—completely free and lightning-fast! Set up your custom do

Selldone | Blog

Both methods allow you to share a branded, fast-loading affiliate page with referral tracking included.