Localization - Using attributes to hide and show content and CMS items across locales

Community resources Webflow Tips
1

Hey everyone,

I wanted to share a simple and effective method for conditionally removing content across localised Webflow projects by using data-hide attributes.

How it works:
Add the code snippet below to your site-wide custom code (before the </body> tag) and customise the locales to fit your project structure.

In the example code:

  • Elements with data-hide="global" will be removed from the primary locale.
  • Elements with data-hide="us,au" will be removed from /us and /au locales.

Code snippet:

<!-- Dynamically hides elements based on `data-hide` attributes and the locale -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Get the current path from the URL
    const currentPath = window.location.pathname;

    // Function to check if an element should be removed based on its `data-hide` attribute
    const shouldRemoveElement = (element) => {
      const hideLocales = element.getAttribute('data-hide');
      if (hideLocales) {
        const localesToHide = hideLocales.split(',').map(locale => locale.trim());
        const currentLocale = 
          currentPath.startsWith('/nz') ? 'nz' :
          currentPath.startsWith('/au') ? 'au' :
          currentPath.startsWith('/us') ? 'us' :
          'global'; // Default to global for non-prefixed paths
        return localesToHide.includes(currentLocale);
      }
      return false;
    };

    // Find and remove elements with `data-hide` attributes
    document.querySelectorAll('[data-hide]').forEach(element => {
      if (shouldRemoveElement(element)) {
        element.remove();
      }
    });
  });
</script>

Example

  1. To hide a banner for US and AU locales, add the attribute data-hide="us,au" to that element in the Webflow Designer.
  2. The code will automatically detect the current locale and remove the element for /us and /au pages.

Why use this method?

  • No third-party libraries
  • Direct management in Webflow
  • Easily supports multiple locales (e.g. /us, /nz, /au)

TL;DR: Use this code snippet with a data-hide attribute like data-hide="global,us" to dynamically hide content for specific locales on your Webflow project.

Hope this helps! Please me know if you have any questions or improvements to suggest.

2

Hi Reid,

You should just be able to use Webflow’s localized styles to show and hide those elements per-locale, did you run into an issue there?

3

Hi Michael,

Good point!

This method also allows for creating a data-hide CMS field and binding it to CMS items e.g. articles on a blog page so we can hide/show these across locales.

Although these articles are now hidden on the blog page, if we link to them externally they will still be reachable (unlike if set as draft or archived in Webflow CMS).

This is important for maintaining CMS items only relevant to specific locales while still being able to share article links globally.

The above code also removes the element(s) rather than setting to display none.

Hoping this makes sense!

4

There are some scenarios where I’d use a scripted approach, but currently they’re quite rare because the native system is quite solid.

One of my favorite approaches is to use a component with visibility bound to a property, because on locales where you hide the component, the page is published without it. That can be used on collection pages and in collection lists as well.

It’s slightly better for SEO than script-removal of the hidden elements is, simply as Google doesn’t always run all scripts depending on the page speed, and other search engines don’t generall run script at all.

In terms of the article localization example, you can draft a specific locale for a specific item, so a site that’s EN DE JP locales could have a blog article that’s primary-EN, translated-DE, and 404’s in JP.

I think the main problem though is that these features aren’t obvious- it took me too long to discover them as well.

Either way it’s excellent to have multiple paths to the top of the same mountain, so thank you for sharing! It will certainly come in useful for some users who need a specialized setup.

1 Like
5

The above from Reid was a super helpful starting point for me.

My problem
My visitors didn’t have their location in their path e.g. AU or US

Workaround
I created a new version of the snippet ,which autodetects location if they don’t have their location in the URL

How it works

  1. Location Detection:
  • Checks for ?locale= in the URL.
  • Falls back to localStorage for returning visitors.
  • Auto-detects location via ipapi.co if no locale is found.
  1. Content Display Logic:
  • data-show=“au” → Shows content only for AU users.
  • data-hide=“au” → Hides content from AU users (visible to others).
  1. Locale Persistence:
  • Adds ?locale= to internal links automatically.
  • Caches the locale with localStorage for faster future visits.

Code snippet

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const urlParams = new URLSearchParams(window.location.search);
    let currentLocale = urlParams.get('locale') || localStorage.getItem('locale');

    const applyLocaleLogic = (locale) => {
      document.querySelectorAll('[data-hide]').forEach(el => {
        if (el.getAttribute('data-hide').split(',').includes(locale)) el.style.display = 'none';
      });
      document.querySelectorAll('[data-show]').forEach(el => {
        if (!el.getAttribute('data-show').split(',').includes(locale)) el.style.display = 'none';
      });
      document.querySelectorAll('a[href^="/"]').forEach(link => {
        if (!link.href.includes('locale=')) {
          link.href += (link.href.includes('?') ? '&' : '?') + `locale=${locale}`;
        }
      });
    };

    const detectLocale = () => {
      fetch('https://ipapi.co/json/')
        .then(response => response.json())
        .then(data => {
          const locale = { AU: 'au', NZ: 'nz', US: 'us' }[data.country_code] || 'global';
          localStorage.setItem('locale', locale);
          applyLocaleLogic(locale);
        })
        .catch(() => applyLocaleLogic('global'));
    };

    if (currentLocale) {
      applyLocaleLogic(currentLocale);
    } else {
      detectLocale();
    }
  });
</script>```
1 Like