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.

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.

<script>
// Enter the new terms below
let authorLabel = "Coach";
let ctaLabel = "Purchase Now";
let commentsLabel = "Leave a Comment";
let resourcesLabel = "Downloadable Content";

// Please don't change anything below

function changeLabel(pageIndex, className, oldTerm, newTerm) {
//console.log(arguments);
if (window.location.href.indexOf(pageIndex) > -1) {
let labels = document.getElementsByClassName(className);
for (let i = 0; i < labels.length; i++) {
if (labels[i].innerHTML.indexOf(oldTerm) !== -1) {
labels[i].innerText = newTerm;
}
}
}
}

let pageIndex = window.location.pathname;

window.addEventListener("click", changePage);

function changePage() {
let newPageIndex = window.location.pathname;
setTimeout(function() {
if (pageIndex != newPageIndex) {
document.getElementById("hider").style.visibility = "visible";
}
}, 100);
setTimeout(function() {
changeLabel("programs", "cbt-tabs--subtitle", "Author", authorLabel);
changeLabel("programs", "access-screen--btn", "Get Access Now", ctaLabel);
changeLabel("programs", "cbt-tabs--tab-link", "comments", commentsLabel);
changeLabel("programs", "cbt-tabs--tab-link", "Resources", resourcesLabel);
document.getElementById("hider").style.visibility = "hidden";
pageIndex = newPageIndex;
}, 500);
}

window.addEventListener("load", function() {
changeLabel("programs", "cbt-tabs--subtitle", "Author", authorLabel);
changeLabel("programs", "access-screen--btn", "Get Access Now", ctaLabel);
changeLabel("programs", "cbt-tabs--tab-link", "comments", commentsLabel);
changeLabel("programs", "cbt-tabs--tab-link", "Resources", resourcesLabel);
});

window.addEventListener("load", function() {
document.getElementById("hider").style.visibility = "hidden";
});
</script>

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?