Is it possible in Webflow to redirect a link to a generic page if a collection item does not exist?

Published on
September 22, 2023

Yes, it is possible to redirect a link to a generic page in Webflow if a collection item does not exist. You can achieve this by following these steps:

  1. Create a collection: First, you need to create a collection in Webflow for the items that you want to display on specific pages. Let's say you have a collection called "Blog" with individual blog posts as collection items.

  2. Create a generic page: Next, create a generic page that you want to redirect to if a collection item does not exist. For example, you could create a page called "404" that includes a message stating that the requested page could not be found.

  3. Set up the collection page: Now, go to the collection page where you want to display the collection items. In our example, it would be the blog page. Add an embed element to the page.

  4. Add custom code: Inside the embed element, you need to add custom code to handle the redirection. You can use JavaScript to check if the requested collection item exists. If it doesn't exist, you can redirect the user to the generic page. Here is an example of the code you can use:

<script>  // Get the collection item's slug from the URL  const slug = window.location.pathname.split('/')[2];  // Check if the collection item exists  // Replace "Blog" with your actual collection name  const collectionItemExists = Webflow.collection('Blog').findOne({ 'slug': slug });  // Redirect if the collection item doesn't exist  if (!collectionItemExists) {    window.location.href = '/404';  }</script>
  1. Publish and test: Once you have added the custom code, publish your Webflow project and test it by accessing a collection item's URL. If the item exists, it should be displayed normally. If not, it should redirect you to the generic page.

This method allows you to handle cases where a collection item is no longer available or has been deleted without displaying an error page to the user. Instead, they are redirected to a more user-friendly generic page.

By using this approach, you can improve the user experience and ensure that your website visitors are directed to relevant content, even if a specific collection item is not available.

Additional questions:

  1. How can I create a collection in Webflow?
  2. Is it possible to customize the URL structure for collection pages in Webflow?
  3. Can I add custom code to my Webflow project?