Note: The following article requires you to be on the Uscreen Plus plan.
If you want to rename Author or Category terms in the filters in the Catalog, Category, and Author page, this can be achieved using custom code. the workaround works for any locale (not only English).
Result example – Author -> Coach, Category -> Workout
Catalog page
Category page
Implementation
1. Head over to the Advanced tab and click Head Code under the Customization section.
2. Navigate to the Head Code Snippet area and prepare the custom code.
To replace a term, you should add a new term between quotation marks.
Example:
const newFilterAuthorLabel = "Coach";
const newFilterCategoryLabel = "Workout";
To replace only Author term
const newFilterAuthorLabel = "Coach";
const newFilterCategoryLabel = "";
To replace only Category term
const newFilterAuthorLabel = "";
const newFilterCategoryLabel = "Workout";
3. Copy the code below, replace the terms, and insert the code in Head Code Snippet
<script>
/* Change terms here */
const newFilterAuthorLabel = "";
const newFilterCategoryLabel = "";
/*
###############################
# Change the terms in the Filters
# ! Not recommended to change the code below !
###############################
*/
function replaceAuthor(newFilterAuthorLabel) {
// replace author
const authorFilter = document.querySelector('[for="author_id"]');
if (authorFilter && newFilterAuthorLabel) {
authorFilter.innerText = newFilterAuthorLabel
}
}
function replaceCategory(newFilterCategoryLabel) {
// replace category
const categoryFilter = document.querySelector('[for="category_id"]');
if (categoryFilter && newFilterCategoryLabel) {
categoryFilter.innerText = newFilterCategoryLabel
}
}
document.addEventListener('turbo:load', function (e) {
replaceAuthor(newFilterAuthorLabel)
replaceCategory(newFilterCategoryLabel)
})
</script>
5. Click Save changes
6. Changes might not reflect immediately due to CDN caching; you can also try clearing your browser cache.
NOTE:
This is a custom code suggestion and might only work in some cases, as this could be limited by the existing customizations applied to your page. If you have difficulty implementing this, we recommend consulting your developer or hiring one to assist you to ensure your customizations do not break. Our support team is unable to assist you with implementing custom coding.
⚠️ The code snippets and custom HTML blocks do not affect native apps. To learn more about native apps customization, please check this help guide.