Customizing your 404 page

This guide provides instructions for customizing your store's 404 pages using the VTEX IO Store Framework. With flexible blocks and configurations, you can create a custom error page that aligns with your brand and helps users seamlessly navigate back to key areas of your site.

To customize 404 pages, follow the steps below:

1. Open the terminal and switch to a development workspace.

2. Open your Store Theme using your preferred code editor.

3. In the product or search template (store.product or store.search), add and configure the store.not-found#product or store.not-found#search block, respectively. See below an example of a store.not-found#product configuration for a product template:

   
   

   _11

   "store.not-found#product": {

   _11

   "blocks": ["rich-text#not-found"]

   _11

   },

   _11

   "rich-text#not-found": {

   _11

   "props": {

   _11

   "textAlignment": "CENTER",

   _11

   "textPosition": "CENTER",

   _11

   "text": "**PAGE NOT FOUND**",

   _11

   "font": "t-heading-1"

   _11

   }

   _11

   }

   
   

ℹ The store.not-found blocks will only be rendered when the server returns a 404 error. The child block will be displayed to users in such cases.

4. Save your changes and run vtex link in your terminal to preview the updated 404 page:

5. Once you're satisfied with the changes, publish your new theme version.