How to Customize the 404 Not Found Page in OpenCart

A well-designed 404 Not Found page is crucial for improving user experience and retaining customers who land on unavailable pages. OpenCart allows you to customize this page to align with your branding and provide useful navigation options.

Mostly the 404 page looks like below in Opencart:

Steps to Customize the 404 Page in OpenCart

We used to need the custom module or extensions for these kinds of functionalities, but with the introduction of Language Editor in Opencart, it is more easier. If you are looking to just edit the “The page you requested cannot be found!”, then you can easily do it by language editor of Opencart. Go to admin section >> Design >> Language Editor and click Add button

Enter the following details:

Now the 404 will look like below:

Read more: Language Editor in OpenCart

Example 404 page:

Here is one design and code example to show the different title for Category not found, product not found and other not found.

Design as per category, product and other page:

Add the following code at language editor:

<div class="error-container">  
  <!-- Dynamic Error Title -->
  <h1 class="error-title" id="error-title">Oops! 404 Page Not Found</h1>

  <!-- Dynamic Error Message -->
  <p class="error-message" id="error-message">
    The page you are looking for doesn’t exist or has been moved. Try searching for what you need.
  </p>

  <!-- Search Bar -->
  <div class="p-5">
    <form id="searchbottom" method="get" action="index.php" class="input-group mb-3">
      <input type="hidden" name="language" value="en-gb"> 
      <input type="hidden" name="route" value="product/search">
      <input type="text" name="search" value="" placeholder="Search for products" class="form-control form-control-lg">  
      <button type="submit" class="btn btn-light btn-lg"><i class="fa-solid fa-magnifying-glass"></i></button>
    </form>
  </div>
  <!-- Call to Action -->
  <a href="/" class="btn btn-primary-home btn-lg">Go to Homepage</a>
</div>

<style>
  .error-container {
      border-radius: 10px;
      padding: 3rem;
      margin: auto;
      text-align: center;
      background: linear-gradient(135deg, #ff6f61, #d6a4a4);
      color: #fff;
      margin: 0;
  }
  .error-title {
      font-size: 3rem;
      font-weight: bold;
      margin-bottom: 1rem;
      color: #fff;
  }
  .error-message {
      font-size: 1.5rem;
      margin-bottom: 2rem;
      line-height: 2rem;
  }
  .btn-primary-home {
      background-color: #d9534f;
      border-color: #d9534f;
      color: #fff;
  }
</style>
<script>
  // Function to get the value of a specific query parameter from the URL
  function getQueryParam(param) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
  }
  // Get the 'route' parameter from the URL
  const routeParam = getQueryParam("route");
  const errorTitle = document.getElementById("error-title");
  const errorMessage = document.getElementById("error-message");
  // Determine the error type based on the route parameter
  if (routeParam === "product/product") {
    errorTitle.textContent = "Product Not Found";
    errorMessage.textContent =
      "We couldn’t find the product you’re looking for. Try searching below.";
  } else if (routeParam === "product/category") {
    errorTitle.textContent = "Category Not Found";
    errorMessage.textContent =
      "The category you’re looking for doesn’t exist or is no longer available. Try searching for what you need.";
  } else {
    // Default to Page Not Found
    errorTitle.textContent = "Oops! Page Not Found";
    errorMessage.textContent =
      "The page you are looking for might have been moved or deleted. Try searching below.";
  }
</script>

Here is one language editor:

The JavaScript in the code find the route and show error message as per product, category other other page. If you need similar to design then you need to select different language in the Language editor and enter different value as per lanugage.

Add Google Analytics Tracking

To monitor the 404 errors on your site:

• Use Google Analytics to track 404 errors.
  Set up a custom report for pages with the “404 Not Found” response.
• Add a tracking script to the 404 page to log user behavior.Example:htmlCopy code

<script>
    // Google Analytics event tracking
    gtag('event', '404_error', {
        'page_path': window.location.pathname
    });
</script>

Best Practices for a 404 Page

1. Provide Helpful Suggestions: Include links to your homepage, categories, or popular products.
2. Apologize for the Inconvenience: Acknowledge the error with friendly, empathetic text.
3. Use Humor or Branding: Lighten the mood with creative messaging that reflects your brand’s personality.
4. Include a Call-to-Action: Guide users back to the shopping experience with CTAs like “Continue Shopping” or “Search Our Store.”

Conclusion

Customizing the 404 Not Found page in OpenCart is an effective way to improve user experience and reduce bounce rates. By adding helpful navigation tools, engaging content, and personalized branding, you can turn an error page into an opportunity to retain potential customers and guide them back into your store.