Why to use boring default 404 ‘Page not found’ when you can change it to something more personal and inspiring?

A default page with a 404 ‘Page not found’ error in X-Cart looks as follows:

404.png

Using the built-in Webmaster Mode facilities you can change the page text and layout, add images, gifs and videos to your liking.

To edit a 404 page:

  1. Log in as an admin to the store Admin Area and open the customer storefront using the ‘View storefront’ button located at the top of any page in the Admin Area view-storefront.png

  2. Find a page with a 404 ‘Page not found error’ in your X-Cart storefront (e.g. https://your_xcart_store_url/cart.php?target=blablabla)

  3. Click on a ‘Gear’ icon in the bottom left corner of the page to open the Webmaster mode tools. 404-1.png

  4. To edit the error text open the Labels Editor tool, enable Highlight labels and edit the text as described in the guide. 404-labels.png Save changes when complete.

  5. To change the page layout or add an image/gif/video open the Template Editor tool, enable the Pick templates from page option, locate the relevant .twig file as described in How to Use Template Editor and add your changes to the template. 404-template.png Save changes when complete.

Also it’s possible to change the default 404 page to a completely custom one.

For an Apache server you’ll need to:

  • Create your custom 404 page in HTML (e.g. custom_404.html).

  • Locate/create a .htaccess file in the X-Cart root directory of your server

  • Add the following line to your .htaccess file

    ErrorDocument 404 /custom_404.html
    

    where /custom404.html is the full path to the new custom 404 page that you’ve created.

  • Check your work

    Look for a page that does not exist on your website. You should get your custom 404 page that you specified in the .htaccess file.

For a Nginx server you’ll need to:

  • Create your custom 404 page in HTML (e.g. custom_404.html).

  • Add a few lines (as provided below) into the server {} section of your nginx configuration file (nginx.conf):

    server {
          listen 80 default_server;
          listen [::]:80 default_server ipv6only=on;
      
          . . .
      
          error_page 404 /custom_404.html;
          location = /custom_404.html {
                  root /usr/share/nginx/html;
                  internal;
          }
    }
    
  • Check your work

    Look for a page that does not exist on your website. You should get your custom 404 page that you specified in the .htaccess file.