Custom 404 Error Page

Create a custom 404 error page section for my Shopify theme that replaces the default not-found page with a branded, helpful experience. The section should display a large heading [ERROR_HEADING], a subheading message [ERROR_SUBTEXT], and an optional illustration or image using an image_picker setting. Below the message, include a search bar that submits to the Shopify search results page, with placeholder text [SEARCH_PLACEHOLDER]. Under the search bar, display a row of [SUGGESTED_LINKS_COUNT] suggested navigation links configured via repeatable blocks, each with a label and URL. Optionally display a grid of [FEATURED_COUNT] featured products pulled from the collection with handle [FEATURED_COLLECTION] to keep customers engaged. Include section settings for background color [BG_COLOR], text color [TEXT_COLOR], heading font size [HEADING_FONT_SIZE], search bar width [SEARCH_WIDTH] percentage, search button background color [SEARCH_BUTTON_BG], and vertical padding [VERTICAL_PADDING] pixels. The layout should be centered on the page and fully responsive, stacking vertically on mobile. Add a subtle CSS animation to the heading such as a fade-in-up on page load with a duration of [ANIMATION_DURATION] milliseconds. Generate the complete Liquid section file with schema, CSS, and any JavaScript needed so I can add it to my theme myself.

Where to add it: In the Shopify admin, go to Online Store > Themes > Edit code, create a new file under Sections (e.g. sections/404-page.liquid), and paste the generated code in. Then open (or create) templates/404.json and add this section as the template’s content — Shopify automatically renders this template for any not-found URL, so once the section is referenced there, the custom 404 page goes live without any further setup.