A Webflow custom 404 page does not require manual routing or a new page named 404. Webflow includes a 404 utility page that you customize directly in the Designer under Pages > Utility Pages and publish like any static page. You are editing that system utility page in place, not replacing it or assigning a new slug.
The core flow every guide agrees on:
Once published, Webflow automatically serves that design whenever a visitor hits a URL that does not exist, with no extra hosting rule needed for the 404 itself. With the location and basic flow established, the next step is doing the actual setup inside the Designer in full detail.
The opening summarized the path. Here is the full click-by-click sequence inside the Designer as it appears today.
Open Designer. From your Webflow Dashboard, open the site and enter the Designer.
Open the Pages panel. Click the Pages icon in the left toolbar, the vertical bar that also holds the Add, Navigator, CMS, and Ecommerce panels.
Find Utility Pages. Scroll to the very bottom of the Pages list. You will see Utility Pages with two entries included by default: Password Page and 404 Page.
Edit the 404 Page. Click "404 Page" to load its canvas. The default ships with a basic section, heading, text block, and button. You can keep the structure and rewrite it, or select all and delete to start fresh.
Rebuild the layout. From the Add panel, drop in a Section > Container, then add:
Add a home CTA. Drop in a Button, select it, open Element Settings (gear icon), set Link Type to Page > Home. That gives visitors one obvious way back. Add secondary links as text links or a link block if you want popular pages.
Save and publish. The Designer automatically saves your progress every 10 seconds. When ready, click Publish in the top-right and publish to your domains. The edited page immediately becomes your live 404 template.
In both the classic Designer and the newer workspace UI, the navigation is the same: the Pages icon lives in the left toolbar and Utility Pages remains pinned at the bottom. The icons look slightly different, but the label "Utility Pages" has not changed.
Once the page is built and published, its design determines whether it retains or loses the visitor. A Webflow custom 404 page that keeps visitors needs plain-language status like "That page doesn't exist," one prominent button back to the homepage, and two to three escape routes to high-value areas such as blog, pricing, or site search. That combination turns a dead end into a navigation choice instead of a bounce. Webflow's own guidance frames the job as telling users clearly that the page does not exist and what to try next, with custom 404 error page guidance that centers on clarity over cleverness.
Best practice breaks down into four decisions:
Before cloning a template, check three things: does the layout respond cleanly at 320px and 1280px, are all interactive elements keyboard-accessible with visible focus, and can you swap in your typography and colors without rebuilding symbols.
A 404 page with only generic "Page not found" copy and no working links is a missed conversion opportunity. Always include at least one link back into the site.
Design is only useful if the page is actually behaving like a real 404, which requires checking the underlying status code.
A polished-looking 404 page is worthless if the server isn't actually returning a 404 status. Your Webflow custom 404 page needs to return a true HTTP 404 status code on both your .webflow.io staging subdomain and your connected custom domain. If it returns 200 OK instead, it is a soft 404 that Google flags as an error because the page looks like a 404 to visitors but signals success to crawlers.
Google Search Central describes a soft 404 as a case where a webserver responds with a 200 OK response for a page that doesn't exist rather than the appropriate 404 Not Found, and its guidance discourages the pattern because it confuses users and wastes crawl budget.
Webflow's utility 404 page is intended to return a genuine 404, but you should confirm after each publish:
/this-page-should-not-exist-123. Click the document request and confirm Status shows 404.Staging vs. custom domain: Staging lives on your yoursite.webflow.io subdomain. The Designer Publish dialog lets you publish to staging only, custom domain only, or both. If you test on one host but published to the other, you will see an old 404 or the default Webflow 404.
CMS collection items: When you delete or unpublish a CMS item, its URL /collection/item-slug should 404. If the item is still set to Draft or you have not republished the CMS after archiving, Webflow may still resolve the template with empty content and return 200, creating a soft 404. Always republish CMS after deletes.
Interaction with 301 redirects: Entries in Webflow Hosting > Advanced publishing options > 301 Redirects take precedence. A broad rule like /(.*) -> / or /blog/(.*) -> / will capture 404s and redirect to home before the 404 page can render. Audit redirect rules whenever you add a catch-all; keep redirects explicit and review the 301 redirect setup guide to avoid loops.
| Symptom | Likely Cause | How to Confirm | Fix |
|---|---|---|---|
| Custom 404 content shows but status is 200 OK | Soft 404 - template returns 200 | DevTools Network shows 200 for the document; status checker shows 200; Search Console reports Soft 404 | Republish entire site, ensure Hosting serves utility page; remove custom code that overrides status |
| 404 works on .webflow.io but not custom domain (or reverse) | Published to only one domain; DNS not connected | Test same bad URL on both hosts; check Publish dialog checkboxes | Publish to both staging and custom domain; verify custom domain is Connected in Hosting settings |
| Deleted CMS item URL shows empty template, not 404 | Item archived as Draft or CMS not republished | CMS panel shows Draft status for slug; incognito fetch still resolves | Set item to Archived, delete, then publish CMS; add explicit 301 if URL should redirect to parent collection |
| Bad URLs redirect to homepage, 404 never appears | Catch-all 301 like /(.*) -> / masks 404s | Check Site Settings > Hosting > Advanced > 301 redirects for broad patterns | Remove or narrow catch-all rule to explicit paths only |
Webflow site owners who edit their custom 404 page but never publish the site, leave the default placeholder copy and image, or ship it without a homepage link keep serving the unfinished error state on the live custom domain. A Webflow custom 404 page is only complete when it is published to both the webflow.io staging subdomain and the connected custom domain, contains no default content, and gives visitors a clear path forward.
HarperFlow publishes highly structured articles featuring FAQs, data tables, and direct-answer blocks that meet the rigorous citation standards required by AI search engines. By continuously auditing and improving your content through AI answer analytics, HarperFlow helps your site build long-term authority and visibility that outlasts ad-dependent strategies.
Final checklist before you call it done:
A working custom 404 page is a small but concrete piece of your site's technical health. Tools like HarperFlow that keep a Webflow blog technically structured and continuously published sit in a complementary lane. They do not fix 404 routing but help the rest of your content foundation stay consistent.
Treat the 404 page as done only when it passes both a design review and a live status-code check in a new browser session, not the moment it looks finished in the Designer.
No, Webflow allows only one 404 utility page per site. You edit the single page found in Utility Pages, and it serves for every missing URL. If you need folder-specific guidance, add conditional links or text on that one page that points to blog, shop, or docs.
You cannot truly delete the utility 404 entry, only its contents. If you clear the canvas and leave it empty, Webflow will still serve that empty version as the 404. Keep the page and rebuild the layout instead of trying to remove it.
No slug setup is needed. You do not create /404 or /not-found as a regular static page. You open Utility Pages and click 404 Page, which is already wired as the system template and publishes without manual routing.
Yes, you can add Collection Lists to the 404 canvas just like any static page. This can show popular posts or products to reduce bounces. Remember to republish CMS items after changes so deleted item URLs correctly return 404 instead of empty templates.
You likely published to only one host. Webflow lets you publish to staging yoursite.webflow.io only, custom domain only, or both. Open Publish and check both destinations, then test the same missing URL like /this-page-should-not-exist-123 on each host.
Yes, the 404 supports the same elements as other pages, including Lottie, images, and embed blocks. Styling is handled in the right-side panel that houses Style panel, Element settings panel, Style manager panel, and Interactions panel. Test keyboard focus and that any script does not override the status code.
Yes. A broad rule such as /(.*) going to / or /blog/(.*) going to /blog takes precedence over the utility 404 and will redirect before the 404 can render. Keep redirects explicit and avoid catch-all patterns. Review your rules under Hosting > Advanced publishing options > 301 Redirects.
Open Chrome DevTools > Network, enable Preserve log, and visit /this-page-should-not-exist-123. The document request should show 404. Also check with an HTTP status checker and look in Google Search Console under Pages for Soft 404 reports, which flags pages returning 200 when they should return 404.