Demonstrate Error Page.
View this pattern on the live demo site
404 (and other error) template; it includes a single content section.
{% comment %}
Display an error page. Note that this may be used for any error code, but will most commonly display a 404 page.
{% endcomment -%}
{%- include "/_header.liquid" no_header_title: true -%}
{%- include "/sections/_error_page_content.liquid" -%}
{%- include "/_footer.liquid" -%}Fallback title, copy, and optional search for missing pages.
{%-comment-%}
This section shows the error message from the current pageload in a clean and simple layout.
Inputs:
section_class - an optional classname to apply to the section. If not included a default will be used
section_id - an optional id to apply to the section
hide_search_form - Set to true to prevent the page from displaying a search form
error_code_override - If set, this will be used to determine the content to display rather than the error_code on the root scope
img_preset_errorpage - The image preset to use for the main error page image
Inputs passed through to /partials/_search_form.liquid
search_action - The URL of the page that handles search results. If not set, a default value will be used
search_param - The query parameter to use for the search form. If not set, a default value will be used
search_placeholder - If not set, a default value will be used
Custom Fields:
fallback_image,
fallback_title,
fallback_content,
show_details,
content_configuration (error_code, image_override, title_override, content_override, show_details_override)
Outputs:
section_rendered - true when this section outputs markup, false otherwise
{% endcomment -%}
{%- var err_code = error_code_override | default: error_code -%}
{%- var image = entity.fallback_image -%}
{%- var title = entity.fallback_title | default:entity.title -%}
{%- var content = entity.fallback_content -%}
{%- var show_details = entity.show_details.on -%}
{%- for var config in entity.content_configuration -%}
{%- if config.error_code.selected contains err_code -%}
{%- if config.image_override.is_valid %}{% set image = config.image_override %}{% endif -%}
{%- if config.title_override.is_valid %}{% set title = config.title_override %}{% endif -%}
{%- if config.content_override.is_valid %}{% set content = config.content_override %}{% endif -%}
{%- if config.show_details_override.is_valid %}{% set show_details = config.show_details_override.on %}{% endif -%}
{%- endif -%}
{%- endfor -%}
<main class="{{ section_class | default:"py-5" }}"{% if section_id %} id="{{ section_id }}"{% endif %}>
<div class="container py-lg-5">
<div class="row py-lg-5">
{%- if image.is_valid -%}
<div class="col-lg-6 d-flex align-items-center justify-content-center">
{%- img image link:false preset:img_preset_errorpage class:"img-fluid" -%}
</div>
{%- endif -%}
<div class="{% if image.is_valid %}col-lg-6{% else %}col-lg-7 mx-auto{% endif %}">
{%- include '/common/_title.liquid' title:title title_classname:'mb-2 mb-md-4 text-center' postincrement_headinglevel:true -%}
{{ content }}
{%- if show_details and error_message is_valid -%}
<p class="alert alert-danger my-3" role="alert">
{{-error_message | newline_to_br -}}
{%- if inner_exception is_valid -%}
<hr />{{inner_exception | newline_to_br}}
{%- endif -%}
</p>
{%- endif -%}
{%- unless hide_search_form -%}
{%- var search_placeholder = search_placeholder | default: 'Search the site' -%}
{%- var serach_term = request.path | split: '/' | last | url_decode | replace:'-',' ' | replace: '_',' ' | strip -%}
{%- include '/partials/_search_form.liquid' search_param:site_search_param -%}
{%- endunless -%}
</div>
</div>
</div>
</main>
{%- set section_rendered = true -%}Custom fields owned by the error content section.
[
{
"Type": "group",
"Fields": [
{
"Type": "image",
"FieldID": "fallback_image",
"Label": "Image"
},
{
"Type": "text",
"FieldID": "fallback_title",
"Label": "Title"
},
{
"Type": "html",
"FieldID": "fallback_content",
"Label": "Content"
},
{
"Type": "toggle",
"OnLabel": "Show",
"OnValue": "On",
"OnColor": "green",
"OffLabel": "Hide",
"OffValue": "Off",
"OffColor": "red",
"DefaultValue": true,
"FieldID": "show_details",
"Label": "Show Error Message Details"
},
{
"Type": "fieldset",
"Fields": [
{
"Type": "select",
"AllowMultiple": true,
"Options": "400:Bad Request;401:Unauthorized;403:Forbidden;404:Not Found;408:Timeout;500:Unexpected Error",
"Delimiter": ";",
"IsRequired": true,
"FieldID": "error_code",
"Label": "Error Code"
},
{
"Type": "image",
"FieldID": "image_override",
"Label": "Image Override"
},
{
"Type": "text",
"FieldID": "title_override",
"Label": "Title Override"
},
{
"Type": "html",
"FieldID": "content_override",
"Label": "Content Override"
},
{
"Type": "toggle",
"OnLabel": "Show",
"OnValue": "On",
"OnColor": "green",
"OffLabel": "Hide",
"OffValue": "Off",
"OffColor": "red",
"DefaultValue": true,
"FieldID": "show_details_override",
"Label": "Show Error Message Details"
}
],
"AllowMultiple": true,
"InitCollapsed": false,
"FieldID": "content_configuration",
"Label": "Content Configuration"
}
],
"Label": "Error Page Content"
}
]
Optional search box so visitors can recover from a missing page.
{% comment %}
Displays a simple search form
Inputs:
search_action - The URL of the page that handles search results. Defaults to site_search_target with a final fallback to '/search' if not specified
search_param - The query parameter to use for the search form. Defaults to site_search_param with a final fallback to 's' if not specified
search_term - Optional. The current search term
search_placeholder - Optional. The placeholder for the search field
{% endcomment -%}
<form action="{{ search_action | default: site_search_target | default: '/search' }}" method="get" role="search" class="mb-0">
<div class="input-group">
<input name="{{search_param | default: site_search_param | default: 'q'}}" class="form-control" type="search" value="{{search_term | escape}}"{% if search_placeholder is_valid %} placeholder="{{search_placeholder | escape}}"{% endif %} aria-label="{{ search_placeholder | default: 'Search' | escape }}">
<input type="submit" class="btn btn-primary" value="Search">
</div>
</form>