I'd like to have a shared 404 page to use across my virtual hosts. The following is my setup.

Two sites, each with their own config file in /sites-available/ and /sites-enabled/

1. www.foo.com
2. bar.foo.com

The www directory is set up as:

www/
foo.com/
foo.com/index.html
bar.foo.com/
bar.foo.com/index.html
shared/
shared/404.html

Both config files in /sites-available are the same except for the root and server name:

root /var/www/bar.foo.com;
index index.html index.htm index.php;

server_name bar.foo.com;

location / {
    try_files $uri $uri/ /index.php;
}
error_page 404 /404.html;
location = /404.html {
    root /var/www/shared;
}

I've tried the above code and also tried setting error_page 404 /var/www/shared/404.html (without the following location block).

I've also double checked to make sure my permissions are set to 775 for all folders and files in www.

When I try to access a non-existent page, Nginx serves the respective index.php of the virtual host I'm trying to access.

Can anyone point out what I'm doing wrong? Thanks!