Change a Common Term in the Programs Page

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.

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.

NOTE: This code can change in the future. For instance, our Product Team improved the way our Catalog and Program pages load on Dec 15th, 2020 - making them faster, which required adjusting the code to follow up.

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

The first step is to 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>

  // Enter the new terms below
  
  let programAuthorLabel = "Trainer";
  let programCategoryLabel = "Workout Type";
  let programResourcesLabel = "Extra Files";
  let programCommentsLabel = "Leave a Comment";
  let programCtaLabel = "Purchase Now";
  
  // We don't recommend changing the code below
  
  function changeProgramLabels(){
    let programAuthor = document.querySelectorAll("div.text-xl.font-medium");
    let programCategory = document.querySelectorAll("div.text-xl.font-medium");
    let programButtons = document.querySelectorAll("li.false > button");
    let ctaButton = document.querySelectorAll("#program_player > div > div > div > div > div > a");

    change(programAuthor, "Author", programAuthorLabel);
    change(programCategory, "Categories", programCategoryLabel);
    change(programButtons, "Resources", programResourcesLabel);
    change(programButtons, "Comments", programCommentsLabel);
    change(CtaButton, "Get Access Now", programCtaLabel);
    setTimeout(function(){ changeProgramLabels(); }, 500);
  }

  let pageIndex = window.location.pathname;
  
  window.addEventListener("click", changePage);
  
  function changePage() {
      setTimeout(function() {
        let newPageIndex = window.location.pathname;
          if (pageIndex != newPageIndex) {
              document.getElementById("hider").style.visibility = "visible";
              pageIndex = newPageIndex;
          }
      }, 100);
      loadPage();
  }
  
  function loadPage () {
    setTimeout(function() {
      changeProgramLabels();
      document.getElementById("hider").style.visibility = "hidden";
    }, 600);
  }

  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;
        }
      }
    }
  }
  
  window.addEventListener("load", loadPage);
  
</script>

Code updated on Mar/23/2023

It's important to remember that we don't have access to the backend. We are only making changes in the front end. The original text appears on the screen between the moment when the page loads and the moment when the script finishes running.

To avoid this, we have implemented a "curtain" hides the original content and disappears as soon as the script replaces the text.

Please insert the code below in the theme.liquid file via the Code Editor. Copy and paste the code right below {{ header_uscreen }}.

Placing the code in a different position will potentially break your site looks. Don't forget to make a backup of your site.

NOTE: The script only works if your store has our new technology Hotwire enabled. If you don't have Hotware enabled on your Catalog, you need to work with your developer to edit the querySelectors.

{% unless template == 'index' %}
    <div id="hider">
      <div id="loader">
        <div class="lds-dual-ring"></div>
      </div>
    </div>
    <style>
      /* Center the loader */
        #hider {
      		z-index: 9;
      		position: fixed;
      		width: 100%;
      		height: 100%;
      		background-color: white;
          display: grid;
          place-items: center;
      	}
      	
      	#loader {
      		width: 150px;
      		height: 150px;
      		display: flex;
          justify-content: center;
        }
        
        .lds-dual-ring {
          display: inline-block;
          width: 80px;
          height: 80px;
        }
        .lds-dual-ring:after {
          content: " ";
          display: block;
          width: 64px;
          height: 64px;
          margin: 8px;
          border-radius: 50%;
          border: 6px solid {{ settings.common.primary_color }};
          border-color: {{ settings.common.primary_color }} transparent {{ settings.common.primary_color }} transparent;
          animation: lds-dual-ring 1.2s linear infinite;
        }
        @keyframes lds-dual-ring {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
      </style>
  {% endunless %}

Feel free to test your Programs page before and after you implement the code above so that you can notice the difference.

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