How to customize your Squarespace course labels

Use the code below to change the following elements.

Course Overview page

• Course Button Text

• Course “Lesson” name

Course Content pages

• Complete and Continue Button

• Next Lesson Button

Course Side Navigation

• Course “Lesson” name

Within the code snippet, you will find comments indicating the parts that can be changed. For example, you can modify button texts by replacing the desired text within the provided `if` conditions. Similarly, you can customize the text replacement from "LESSONS" to "SCENES" or "Lesson" to "Scene" by adjusting the corresponding code.

Copy and Paste Here

<script>
  window.onload = function() {
    // Replace 'LESSONS' with 'SCENES' in the side nav
    var elements = document.getElementsByClassName('course-item__side-nav-chapter-metadata');

    for (var i = 0; i < elements.length; i++) {
        elements[i].innerHTML = elements[i].innerHTML.replace('LESSONS', 'SCENES');
    }

    // Customize button texts on the Course Overview page
    elements = document.getElementsByClassName('course-item__course-action-button-text');

    for(var i = 0; i < elements.length; i++) {
        if(elements[i].innerText.trim() === 'Start Course') {
            elements[i].innerText = 'Start the Journey'; // Change to desired text
        } else if(elements[i].innerText.trim() === 'Continue Course') {
            elements[i].innerText = 'Continue the Journey'; // Change to desired text
        } else if(elements[i].innerText.trim() === 'Retake Course') {
            elements[i].innerText = 'Retake the Journey'; // Change to desired text
        }
    }

    // Customize next lesson/scene texts on the lesson pages
    elements = document.getElementsByClassName('course-item__next-lesson-text--incomplete');
    var elements2 = document.getElementsByClassName('course-item__next-lesson-text--complete');

    for(var i = 0; i < elements.length; i++) {
        if(elements[i].innerText.trim() === 'Complete & Continue') {
            elements[i].innerText = 'Next Scene'; // Change to desired text
        }
    }

    for(var i = 0; i < elements2.length; i++) {
        if(elements2[i].innerText.trim() === 'Next Lesson') {
            elements2[i].innerText = 'Next Scene'; // Change to desired text
        }
    }

    // Replace 'Lesson' with 'Scene' in the Course Overview
    elements = document.querySelectorAll('.course-item__side-nav-chapter-metadata, .course-list__list-chapter-item-chapter-meta span:first-child');

    for(var i = 0; i < elements.length; i++) {
        elements[i].textContent = elements[i].textContent.replace('Lesson', 'Scene');
    }
}</script>