How to Show Different Content by Country on Any Website

Showing different content to visitors based on their country — localized banners, region-specific pricing, translated CTAs, or country-specific phone numbers — is one of the highest-impact geo-targeting strategies you can implement. But the method you choose determines whether it works seamlessly or creates a jarring experience.

Method 1: CSS-based content swapping

The simplest approach: render all content versions on the page, hide them with CSS, then show the correct one with JavaScript after detecting the visitor's location.

<div class="geo-us">Free shipping in the US!</div>
<div class="geo-uk">Free Royal Mail delivery!</div>
<div class="geo-default">International shipping available</div>

<style>
  .geo-us, .geo-uk { display: none; }
</style>

Pros: Simple to implement. Works with any tech stack.

Cons: All content versions are in the HTML source (SEO implications, payload bloat). Causes a flash of unstyled content (FOUC) as the default shows before JavaScript swaps it.

Method 2: JavaScript API-based swapping

A JavaScript snippet calls a geolocation API, gets the visitor's country, then dynamically inserts or swaps content:

fetch('/api/geolocate')
  .then(r => r.json())
  .then(({ country }) => {
    document.getElementById('banner')
      .textContent = messages[country];
  });

Pros: Only the relevant content appears in the DOM. More flexible than the CSS approach.

Cons: Still causes FOUC — there's a visible delay while the API call completes. Blocked by ad blockers if using third-party APIs. Content shift affects Core Web Vitals (CLS).

Method 3: Server-side rendering

Your server detects the visitor's IP, resolves their country, and renders the correct content version before sending the HTML. No client-side switching needed.

Pros: No FOUC. No JavaScript dependency. Best for SEO.

Cons: Requires a server you control. Breaks CDN caching (each visitor gets a unique response). Complex to implement with static site generators.

Method 4: Edge-side content personalization

The modern approach combines the best of server-side and CDN. Edge workers (Cloudflare Workers, Vercel Edge Middleware) intercept the request at the CDN level, detect the visitor's country, and modify the HTML before it reaches the browser. Zero delay. Zero FOUC.

This is the approach GeoSwap's Geo Content uses. You define content rules in the dashboard (show this banner to UK visitors, show that pricing to EU visitors), and the edge worker swaps the content before the page loads.

The FOUC problem

Flash of Unstyled Content (FOUC) is the biggest usability issue with client-side geo content. Here's what happens:

1. Page loads with default content (e.g., US pricing)
2. JavaScript detects the visitor is from the UK
3. Content swaps to UK pricing

That swap is visible. The visitor sees a flicker, and the content shift hurts your Cumulative Layout Shift (CLS) score — a Core Web Vital that affects search rankings. Edge-side personalization eliminates FOUC entirely because the content is correct before the browser receives it. Learn more about this in our deep dive on FOUC in geo-targeting.

Getting started

GeoSwap makes geo content personalization accessible to any website, regardless of tech stack. Add a script tag, set up your content rules, and visitors see the right content from the first paint — no FOUC, no CLS impact, no coding required. And it's completely free.

The method you choose for geo content matters as much as the content itself. Edge-side personalization is the gold standard in 2026 — and it's no longer limited to companies with custom CDN configurations. Learn more in our Geo Content documentation, or check your current location detection with our country detection tool.