A Not Found (404) page is an error page that appears when a visitor tries to access a URL that doesn't exist on your Uscreen storefront.
This can happen when:
A page has been deleted or moved
A user mistyped a URL
Someone clicked on a broken or outdated link
Content was removed from your site
ℹ️ INFO: The 404 page serves as a helpful waypoint for lost visitors, letting them know that the content they're looking for can't be found at that location while keeping them on your site.
Why is the Page Important?
A 404 page can:
Reduce visitor frustration and bounce rates
Guide users back to valuable content on your site
Maintain your brand's voice and visual identity
Improve overall user experience
Provide alternative navigation options
ℹ️ INFO: Without a proper 404 page, visitors might simply leave your site when they encounter an error, potentially losing subscribers or sales.
Default 404 Page
By default, Uscreen provides a standard 404 page (/not_found) that displays your site's logo. This basic page informs visitors that the content they're looking for cannot be found.
Customize your 404 Page
You can personalize your 404 page by adding custom code to the Head Code section of your Code Snippets.
📝 NOTE: Please be advised that our support team cannot assist with custom coding. If you need help implementing these customizations, we recommend consulting with a developer.
Here's how:
Navigate to Website
On the Website Editor, go to the Advanced tab
Scroll down and select Head Code
Add the following code to the Head Code section
Custom Code
<script>
let applyNotFoundPageContent = () => {
if (!document.location.pathname.includes('/not_found')) {
return;
}
const notFoundContainer = document.querySelector('.not-found');
if (!notFoundContainer || notFoundContainer.dataset.contentApplied404 === 'true') {
if (notFoundContainer && notFoundContainer.dataset.contentApplied404 === 'true') {
return;
}
setTimeout(applyNotFoundPageContent, 100);
return;
}
if (!document.getElementById('not-found-404-dynamic-styles')) {
const styleTag = document.createElement('style');
styleTag.id = 'not-found-404-dynamic-styles';
styleTag.textContent = `
.not-found .brand-logo {
max-height: 150px;
}
.not-found .error-image {
display: none;
}
img.error-image,
.logo-area,
.title-area {
margin-bottom: 0!important;
}
.not-found .title-area,
.not-found .description {
font-size: 0;
}
.not-found.processed-404 .description {
text-align: center;
max-width: 800px;
margin-top: 10px;
}
div.not-found.processed-404 > div {
height: 100%;
}
.content {
height: auto;
}
.description {
width: auto!important;
}
.not-found-redirect-button {
display: inline-block;
padding: 10px 20px;
margin-top: 20px;
background-color: #016AFF;
color: white;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
border: none;
}
.not-found-redirect-button:hover {
background-color: #1e40af;
}
`;
document.head.appendChild(styleTag);
}
/* ----- Replace the Subheading and Button text ----- */
const markup = `
The page you are looking for could not be found.<br>
Please check the URL or go back to the Catalog.<br>
<a href="/catalog" class="not-found-redirect-button">Back to Catalog</a>
`;
// ----- Replace with Heading text -----
const newTitle = 'Page Not Found';
const description = notFoundContainer.querySelector('.description');
const specific404TitleArea = document.querySelector('div.title-area.mb-4');
const errorImage = notFoundContainer.querySelector('.error-image');
if (description) {
description.innerText = '';
description.insertAdjacentHTML('afterbegin', markup);
description.style.fontSize = '20px';
description.style.marginTop = '10px';
}
if (specific404TitleArea) {
specific404TitleArea.innerText = '';
specific404TitleArea.insertAdjacentHTML('afterbegin', newTitle);
specific404TitleArea.style.fontSize = '35px';
} else {
const generalTitleArea = document.querySelector('.title-area');
if (generalTitleArea) {
generalTitleArea.innerText = '';
generalTitleArea.insertAdjacentHTML('afterbegin', newTitle);
generalTitleArea.style.fontSize = '35px';
}
}
/* ----- Replace the Image URL ----- */
if (errorImage) {
errorImage.style.background = 'url(https://s3.amazonaws.com/unode1/assets/9224/Rh74UFFATPqZhVf7bqeJ_geoblocked.png) no-repeat';
errorImage.style.width = '400px';
errorImage.style.height = '400px';
errorImage.style.paddingLeft = '400px';
errorImage.style.display = 'block';
}
notFoundContainer.dataset.contentApplied404 = 'true';
notFoundContainer.classList.add('processed-404');
};
applyNotFoundPageContent();
</script>
ℹ️ INFO: The Timeout in the code is used to ensure the page has fully loaded before modifications occur. This approach is necessary because Uscreen's default 404 page may not be immediately available when the script runs.
Result
Redirect 404 Pages to Catalog
Instead of showing a 404 error, you might prefer to redirect users to your catalog page. This can be done with this custom code inserted in the Head Code Snippet.
📝 NOTE: While redirecting might seem convenient, it's generally better for SEO to handle 404 errors properly rather than automatically redirecting them. Search engines prefer sites that maintain proper error responses.
Custom Code
<script>
let detect404Page = () => {
let notFoundContainer = document.querySelector('.not-found')
if (notFoundContainer && !notFoundContainer.classList.value.includes('touched')) {
window.location.href = "/catalog"
}
setTimeout(() => detect404Page(), 500)
}
detect404Page()
</script>
💬 We'd love to hear from you, so here's how you can submit feedback.