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 has been edited on Dec 15th, 2020. Our Product Team has improved the way our Catalog and Program pages load - making them faster, which required adjusting the code to follow up.

Before you change 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";

// We don't recommend changing the code below

function changeProgramLabels(){
let programAuthor = document.querySelectorAll("div.text-2xl.font-medium.mb-4");
let programCategory = document.querySelectorAll("div.cbt-tabs--subtitle");
let programButtons = document.querySelectorAll("div.cbt-tabs > div.container > a");

change(programAuthor, "Author", programAuthorLabel);
change(programCategory, "Categories", programCategoryLabel);
change(programButtons, "Resources", programResourcesLabel);
change(programButtons, "Comments", programCommentsLabel);
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 May/06/2021

It's important to remember that we don't have access to the backend. We are only making changes in the frontend. The original text appears on the screen between the moment where the page loads and the moment where 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.

{% 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.

Did this answer your question?