Developers

Search

Creating a custom 404 page

Learn how to create a custom 404 page in Framer to replace the default error page.

A custom 404 page helps maintain a professional experience when visitors try to access a page that doesn’t exist. Instead of showing a generic error, you can display a branded page that informs visitors the content is unavailable, often due to a removed page or a mistyped URL.

Create a custom 404 page

To add a custom 404 page to your project:

  1. Open the Pages panel in the left sidebar.

  2. Click the “+” icon.

  3. Select “New 404 Page” from the dropdown menu.

Framer automatically creates and assigns this page as the project’s 404 page.

Test your 404 page

After publishing your site, you should confirm the page works correctly.

  1. Open your published site.

  2. Enter a URL that doesn’t exist on your domain (for example: example.com/this-page-does-not-exist).

Your custom 404 page should appear instead of Framer’s default error page.

A custom 404 page helps maintain a professional experience when visitors try to access a page that doesn’t exist. Instead of showing a generic error, you can display a branded page that informs visitors the content is unavailable, often due to a removed page or a mistyped URL.

Create a custom 404 page

To add a custom 404 page to your project:

  1. Open the Pages panel in the left sidebar.

  2. Click the “+” icon.

  3. Select “New 404 Page” from the dropdown menu.

Framer automatically creates and assigns this page as the project’s 404 page.

Test your 404 page

After publishing your site, you should confirm the page works correctly.

  1. Open your published site.

  2. Enter a URL that doesn’t exist on your domain (for example: example.com/this-page-does-not-exist).

Your custom 404 page should appear instead of Framer’s default error page.

FAQ

  • How do I create a custom 404 page in my Framer project?

    To create a 404 page in your project, open the Pages panel in the left sidebar. Click the “+” icon and select “New 404 Page” from the drop-down menu. This will automatically add a custom 404 page to your project.

  • How can I test if my custom 404 page is working after publishing my site?

    After publishing your site, test your 404 page by visiting a non-existent URL, such as example.com/thispagedoesnotexist. This ensures your custom 404 page successfully replaces Framer’s default error page.

  • Where can I find the option to add a 404 page in Framer?

    You can find the option to add a 404 page by opening the Pages panel in the left sidebar, clicking the “+” icon, and selecting “New 404 Page” from the drop-down menu.

Updated

Related articles

Creating a new workspace

How to add icons

How to set up a favicon

Opening a project in the desktop app via URL

Previewing your site