Skip to main content

Not Found (404) Page

Understanding and customizing your Not Found (404) page

Updated in the last 15 minutes

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:

  1. Navigate to Website

  2. On the Website Editor, go to the Advanced tab

  3. Scroll down and select Head Code

  4. Add the following code to the Head Code section

Custom Code

<script>
let applyNotFoundPageContent = () => {
if (document.location.pathname.includes('/not_found')) {
const notFoundContainer = document.querySelector('.not-found');

if (notFoundContainer) {
if (notFoundContainer.dataset.contentApplied404 === 'true') {
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;
}
/* ----- Replace the Heading text ----- */
.not-found .title-area:before {
content: 'INPUT YOUR TEXT HERE';
font-size: 35px;
}
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>
`;
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.textContent = "";
specific404TitleArea.style.fontSize = '35px';
} else {
const generalTitleArea = document.querySelector('.title-area');
if (generalTitleArea) {
generalTitleArea.textContent = "";
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');
}
if (!notFoundContainer || notFoundContainer.dataset.contentApplied404 !== 'true') {
setTimeout(() => applyNotFoundPageContent(), 80);
}
}
};

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.


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.

Did this answer your question?