Related

Share

How to Create a Dynamic Affiliate Landing Page for Multiple Countries

 Pajuhaan
Written by Pajuhaan
Posted on April 10, 2025

    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.

    AI Created Landing Page with Dynamic Affiliate Links
    AI Created Landing Page with Dynamic Affiliate Links

    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:

    %7B%22html%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%20lang%3D%5C%22en%5C%22%3E%5Cn%3Chead%3E%5Cn%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%20%2F%3E%5Cn%20%20%3Cmeta%20name%3D%5C%22viewport%5C%22%20content%3D%5C%22width%3Ddevice-width%2C%20initial-scale%3D1.0%5C%22%2F%3E%5Cn%20%20%3Ctitle%3ESelldone%20Fashion%3C%2Ftitle%3E%5Cn%20%20%3Cstyle%3E%5Cn%20%20%20%20body%20%7B%5Cn%20%20%20%20%20%20font-family%3A%20'Inter'%2C%20sans-serif%3B%5Cn%20%20%20%20%20%20background-color%3A%20%23f9f9f9%3B%5Cn%20%20%20%20%20%20margin%3A%200%3B%5Cn%20%20%20%20%20%20padding%3A%200%3B%5Cn%20%20%20%20%20%20display%3A%20flex%3B%5Cn%20%20%20%20%20%20flex-direction%3A%20column%3B%5Cn%20%20%20%20%20%20min-height%3A%20100vh%3B%5Cn%20%20%20%20%20%20color%3A%20%23222%3B%5Cn%20%20%20%20%7D%5Cn%5Cn%20%20%20%20main%20%7B%5Cn%20%20%20%20%20%20flex%3A%201%3B%5Cn%20%20%20%20%20%20display%3A%20flex%3B%5Cn%20%20%20%20%20%20flex-direction%3A%20column%3B%5Cn%20%20%20%20%20%20align-items%3A%20center%3B%5Cn%20%20%20%20%20%20justify-content%3A%20center%3B%5Cn%20%20%20%20%20%20padding%3A%202rem%201rem%3B%5Cn%20%20%20%20%7D%5Cn%5Cn%20%20%20%20h1%20%7B%5Cn%20%20%20%20%20%20font-size%3A%202.5rem%3B%5Cn%20%20%20%20%20%20margin-bottom%3A%200.5rem%3B%5Cn%20%20%20%20%7D%5Cn%5Cn%20%20%20%20p.instruction%20%7B%5Cn%20%20%20%20%20%20font-size%3A%201.1rem%3B%5Cn%20%20%20%20%20%20margin-bottom%3A%202rem%3B%5Cn%20%20%20%20%20%20color%3A%20%23555%3B%5Cn%20%20%20%20%7D%5Cn%5Cn%20%20%20%20.buttons%20%7B%5Cn%20%20%20%20%20%20display%3A%20flex%3B%5Cn%20%20%20%20%20%20flex-direction%3A%20column%3B%5Cn%20%20%20%20%20%20gap%3A%201rem%3B%5Cn%20%20%20%20%20%20width%3A%20100%25%3B%5Cn%20%20%20%20%20%20max-width%3A%20400px%3B%5Cn%20%20%20%20%7D%5Cn%5Cn%20%20%20%20.country-button%20%7B%5Cn%20%20%20%20%20%20padding%3A%201.2rem%3B%5Cn%20%20%20%20%20%20font-size%3A%201.25rem%3B%5Cn%20%20%20%20%20%20background-color%3A%20%23fff%3B%5Cn%20%20%20%20%20%20border%3A%202px%20solid%20%23ddd%3B%5Cn%20%20%20%20%20%20border-radius%3A%2012px%3B%5Cn%20%20%20%20%20%20cursor%3A%20pointer%3B%5Cn%20%20%20%20%20%20transition%3A%20all%200.2s%20ease%3B%5Cn%20%20%20%20%20%20text-decoration%3A%20none%3B%5Cn%20%20%20%20%20%20color%3A%20%23222%3B%5Cn%20%20%20%20%20%20text-align%3A%20center%3B%5Cn%20%20%20%20%7D%5Cn%5Cn%20%20%20%20.country-button%3Ahover%20%7B%5Cn%20%20%20%20%20%20background-color%3A%20%23eee%3B%5Cn%20%20%20%20%20%20border-color%3A%20%23ccc%3B%5Cn%20%20%20%20%7D%5Cn%5Cn%20%20%20%20%40media%20(min-width%3A%20600px)%20%7B%5Cn%20%20%20%20%20%20.buttons%20%7B%5Cn%20%20%20%20%20%20%20%20flex-direction%3A%20row%3B%5Cn%20%20%20%20%20%20%20%20flex-wrap%3A%20wrap%3B%5Cn%20%20%20%20%20%20%20%20justify-content%3A%20center%3B%5Cn%20%20%20%20%20%20%7D%5Cn%5Cn%20%20%20%20%20%20.country-button%20%7B%5Cn%20%20%20%20%20%20%20%20flex%3A%201%201%2040%25%3B%5Cn%20%20%20%20%20%20%7D%5Cn%20%20%20%20%7D%5Cn%5Cn%20%20%20%20footer%20%7B%5Cn%20%20%20%20%20%20padding%3A%201rem%3B%5Cn%20%20%20%20%20%20text-align%3A%20center%3B%5Cn%20%20%20%20%20%20font-size%3A%200.9rem%3B%5Cn%20%20%20%20%20%20color%3A%20%23888%3B%5Cn%20%20%20%20%20%20border-top%3A%201px%20solid%20%23eee%3B%5Cn%20%20%20%20%20%20background-color%3A%20%23fafafa%3B%5Cn%20%20%20%20%7D%5Cn%20%20%3C%2Fstyle%3E%5Cn%3C%2Fhead%3E%5Cn%3Cbody%3E%5Cn%5Cn%20%20%3Cmain%3E%5Cn%20%20%20%20%3Ch1%3ESelldone%20Fashion%3C%2Fh1%3E%5Cn%20%20%20%20%3Cp%20class%3D%5C%22instruction%5C%22%3ESelect%20your%20country%20to%20start%20shopping...%3C%2Fp%3E%5Cn%5Cn%20%20%20%20%3Cdiv%20class%3D%5C%22buttons%5C%22%3E%5Cn%20%20%20%20%20%20%3Ca%20id%3D%5C%22btn-us%5C%22%20class%3D%5C%22country-button%5C%22%3E%F0%9F%87%BA%F0%9F%87%B8%20United%20States%3C%2Fa%3E%5Cn%20%20%20%20%20%20%3Ca%20id%3D%5C%22btn-de%5C%22%20class%3D%5C%22country-button%5C%22%3E%F0%9F%87%A9%F0%9F%87%AA%20Germany%3C%2Fa%3E%5Cn%20%20%20%20%20%20%3Ca%20id%3D%5C%22btn-dk%5C%22%20class%3D%5C%22country-button%5C%22%3E%F0%9F%87%A9%F0%9F%87%B0%20Denmark%3C%2Fa%3E%5Cn%20%20%20%20%20%20%3Ca%20id%3D%5C%22btn-fr%5C%22%20class%3D%5C%22country-button%5C%22%3E%F0%9F%87%AB%F0%9F%87%B7%20France%3C%2Fa%3E%5Cn%20%20%20%20%3C%2Fdiv%3E%5Cn%20%20%3C%2Fmain%3E%5Cn%5Cn%20%20%3Cfooter%3E%5Cn%20%20%20%20%C2%A9%20%3Cspan%20id%3D%5C%22year%5C%22%3E%3C%2Fspan%3E%20Selldone.%20All%20rights%20reserved.%5Cn%20%20%3C%2Ffooter%3E%5Cn%5Cn%20%20%3Cscript%3E%5Cn%20%20%20%20function%20getRefParam()%20%7B%5Cn%20%20%20%20%20%20const%20params%20%3D%20new%20URLSearchParams(window.location.search)%3B%5Cn%20%20%20%20%20%20return%20params.get(%5C%22ref%5C%22)%20%7C%7C%20%5C%22%5C%22%3B%5Cn%20%20%20%20%7D%5Cn%5Cn%20%20%20%20const%20ref%20%3D%20getRefParam()%3B%5Cn%5Cn%20%20%20%20document.getElementById(%5C%22btn-us%5C%22).href%20%3D%20%60https%3A%2F%2Fen.selldone.com%3Fref%3D%24%7Bref%7D%60%3B%5Cn%20%20%20%20document.getElementById(%5C%22btn-de%5C%22).href%20%3D%20%60https%3A%2F%2Fde.selldone.com%3Fref%3D%24%7Bref%7D%60%3B%5Cn%20%20%20%20document.getElementById(%5C%22btn-dk%5C%22).href%20%3D%20%60https%3A%2F%2Fda.selldone.com%3Fref%3D%24%7Bref%7D%60%3B%5Cn%20%20%20%20document.getElementById(%5C%22btn-fr%5C%22).href%20%3D%20%60https%3A%2F%2Ffr.selldone.com%3Fref%3D%24%7Bref%7D%60%3B%5Cn%5Cn%20%20%20%20%2F%2F%20Set%20current%20year%20in%20footer%5Cn%20%20%20%20document.getElementById(%5C%22year%5C%22).textContent%20%3D%20new%20Date().getFullYear()%3B%5Cn%20%20%3C%2Fscript%3E%5Cn%5Cn%3C%2Fbody%3E%5Cn%3C%2Fhtml%3E%5Cn%22%7D


    ๐Ÿ”ง 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:


    โšก 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.

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



    Make Your Business Online By The Best Noโ€”Code & Noโ€”Plugin Solution In The Market.

    30 Day Money-Back Guarantee

    Create Your Ecommerce Start now โ€” it's free

    Say goodbye to your low online sales rate!

    FAQ

    Should I use the main store domain for the affiliate landing page?

    It's better to use a new subdomain (like start.yourstore.com) for the landing page and keep the main domain focused on your store. This helps protect your SEO and keeps things organized. No need to edit the landing page HTMLโ€”just deploy it under the new subdomain and it will work with referral codes automatically.

     Pajuhaan
    Written by Pajuhaan
    Published at: April 08, 2025 April 10, 2025

    More insight about How to Create a Dynamic Affiliate Landing Page for Multiple Countries

    More insight about How to Create a Dynamic Affiliate Landing Page for Multiple Countries