Change a Common Term (Author) in the Search Filters

If you would like to change the text on pages that you can't edit in the code editor, you can achieve this by using HTML/CSS/Liquid as well as Javascript in the Code Snippets.

This advanced tutorial is for Web Developers or users who are familiar with the programming languages aforementioned. We provide this for educational purposes. It presents a general approach as well as a suggested solution to change the text on the Common Pages. If you aren't proficient with those programming languages, please do not try this and hire a Web Developer for Advance Custom Changes instead.

Please also keep in mind that Advanced Development is not covered by the scope of our support.

For security and performance reasons, we do not recommend customizing Common Pages with code. We do not guarantee that customizations will continue to work in the future as new features or versions of the platform are released.

Before you change your code, always make a backup of your site.

We recommend that you start by Changing the Common Terms on the Programs Page.

Then, insert the code below into the Head Code Snippet. Please mind the two parts: variables and functions. In the first part of the code, we are declaring the variables, so you don't need to edit the functions.

Reminder: This help guide has been created for educational purposes and it's addressed to web developers. At the time it was written, it was created in English and it doesn't work well on sites with other languages. If your site is in a different language, please work with your web developer to make it work in your local language.

<script>

  // Change the terms between the quotation marks (Coach, Workout Type)

  let filterAuthorLabel = "Trainer";
  let filterCategoryLabel = "Workout Type";
  
  // We don't recommend changing the code below

  function changeFilterLabels() {
    
    let labels = document.querySelectorAll("#catalog_filters > div > form > div:nth-child(4) > div > div:nth-child(2) > label");
    
    change(labels,"Author",filterAuthorLabel);
    change(labels,"Category",filterCategoryLabel);
    setTimeout(function(){ changeFilterLabels(); }, 100);
  
  }
  
  function change(items, oldTerm, newTerm){
    if (items.length > 0) {
      for (let i = 0; i < items.length; i++) {
        if (items[i].innerText.includes(oldTerm)) {
          items[i].innerText = newTerm;
        }
      }
    }
  }

  document.addEventListener('change', changeFilterLabels());
  
</script>

Code updated on Dec/11/2022

NOTE: The code editor, code snippets, and custom HTML blocks do not affect native apps. To learn more about native apps customization, please check this help guide.