Compose a page template from shared header, banner, breadcrumbs, content, FAQ, CTA, and footer templates.
View this pattern on the live demo site
Canonical interior page: includes banner, breadcrumbs, content, FAQs, and CTA.
{% comment %}
Displays a simple generic page
{% endcomment -%}
{%- include "/_header.liquid" no_header_title:true -%}
{%- include "/sections/_generic_banner.liquid" -%}
{%- include "/sections/_breadcrumbs.liquid" -%}
{%- include "/sections/_generic_content.liquid" item:entity section_class:'py-5' is_main:true -%}
{%- include "/sections/_faqs.liquid" section_class:'py-5 text-bg-light' -%}
{%- include "/sections/_simple_cta.liquid" -%}
{%- include "/_footer.liquid" -%}Renders the page HTML so the page template can stay a list of includes.
{% comment %}
Displays generic content from an article
Inputs:
item - the article with the generic content to be displayed. The content will be pulled from the content_html field.
section_class - an optional classname to apply to the section
section_id - an optional id to apply to the section
is_main - true if this is the main content on the page. Used to create better semantic markup
Outputs:
section_rendered - true when this section outputs markup, false otherwise
{% endcomment -%}
{%- if item.content_html.is_valid -%}
<{% if is_main%}main{% else %}section{% endif %}{% if section_class is_valid %} class="{{section_class}}"{% endif %}{% if section_id is_valid %} id="{{section_id}}"{% endif %}>
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-lg-8">
{{item.content_html}}
</div>
</div>
</div>
</{% if is_main%}main{% else %}section{% endif %}>
{%- set section_rendered = true -%}
{%- else -%}
{%- set section_rendered = false -%}
{%- endif %}
Theme settings datastore this layout (and chrome) reads for site-wide defaults.
{
"Name": "Theme Settings",
"Title": "Theme Settings",
"DatastoreType": "theme settings",
"CreatePageByDefault": false,
"DefaultRootPath": "",
"Fields": [
{
"Type": "group",
"Fields": [
{
"Type": "menu",
"IsRequired": true,
"FieldID": "mainmenu",
"Label": "Main Menu"
},
{
"Type": "image",
"FieldID": "header_logo",
"Label": "Logo"
},
{
"Type": "fieldset",
"Fields": [
{
"Type": "toggle",
"OnLabel": "Button",
"OnValue": "button",
"OnColor": "green",
"OffLabel": "Text",
"OffValue": "text",
"OffColor": "orange",
"DefaultValue": true,
"FieldID": "type",
"Label": "Type"
},
{
"Type": "text",
"IsRequired": true,
"FieldID": "text",
"Label": "Text"
},
{
"Type": "url",
"IsRequired": true,
"FieldID": "button_link",
"Label": "Link",
"Condition": {
"Type": "eq",
"FieldID": "type",
"Value": "button"
}
},
{
"Type": "select",
"Options": "btn-primary:Primary;btn-secondary:Secondary;btn-success:Success;btn-danger:Danger;btn-warning:Warning;btn-info:Info;btn-light:Light;btn-dark:Dark",
"Delimiter": ";",
"ValueDelimiter": ":",
"DefaultValue": "btn-primary",
"FieldID": "button_class",
"Label": "Button Class"
},
{
"Type": "select",
"Options": "bi bi-clock-fill:Clock;bi bi-envelope-fill:Email;bi bi-facebook:Facebook;bi bi-instagram:Instagram;bi bi-linkedin:LinkedIn;bi bi-telephone-fill:Phone;bi bi-geo-alt-fill:World;bi bi-twitter-x:X",
"Delimiter": ";",
"ValueDelimiter": ":",
"FieldID": "icon_class",
"Label": "Icon"
},
{
"Type": "text",
"FieldID": "label",
"Label": "Label",
"Condition": {
"Type": "eq",
"FieldID": "type",
"Value": "text"
}
},
{
"Type": "url",
"FieldID": "link",
"Label": "Link (Optional)",
"Condition": {
"Type": "eq",
"FieldID": "type",
"Value": "text"
}
}
],
"AllowMultiple": true,
"Noun": "column",
"FieldID": "top_cols",
"Label": "Header Content"
}
],
"Label": "Header Settings"
},
{
"Type": "group",
"Fields": [
{
"Type": "group",
"Fields": [
{
"Type": "image",
"FieldID": "footer_logo",
"Label": "Logo"
},
{
"Type": "textarea",
"FieldID": "footer_about_content",
"Label": "About Text"
},
{
"Type": "fieldset",
"Fields": [
{
"Type": "url",
"IsRequired": true,
"FieldID": "link",
"Label": "Link"
},
{
"Type": "select",
"Options": "bi bi-clock-fill:Clock;bi bi-envelope-fill:Email;bi bi-facebook:Facebook;bi bi-instagram:Instagram;bi bi-linkedin:LinkedIn;bi bi-telephone-fill:Phone;bi bi-geo-alt-fill:World;bi bi-twitter-x:X",
"Delimiter": ";",
"ValueDelimiter": ":",
"IsRequired": true,
"FieldID": "icon_class",
"Label": "Icon"
},
{
"Type": "text",
"IsRequired": true,
"FieldID": "accessibility_label",
"Label": "Accessibility Label"
}
],
"AllowMultiple": true,
"Noun": "social icon",
"FieldID": "footer_social",
"Label": "Social Icons"
}
],
"Label": "First Column"
},
{
"Type": "fieldset",
"Fields": [
{
"Type": "text",
"IsRequired": true,
"FieldID": "title",
"Label": "Title"
},
{
"Type": "menu",
"IsRequired": true,
"FieldID": "menu",
"Label": "Menu"
}
],
"AllowMultiple": true,
"Noun": "menu",
"FieldID": "footer_menus",
"Label": "Footer Menus"
},
{
"Type": "group",
"Fields": [
{
"Type": "text",
"FieldID": "footer_contact_title",
"Label": "Title"
},
{
"Type": "fieldset",
"Fields": [
{
"Type": "toggle",
"OnLabel": "Link",
"OnValue": "link",
"OnColor": "green",
"OffLabel": "Text",
"OffValue": "text",
"OffColor": "orange",
"DefaultValue": true,
"FieldID": "is_link",
"Label": "Type"
},
{
"Type": "url",
"IsRequired": true,
"FieldID": "link",
"Label": "Link",
"Condition": {
"Type": "eq",
"FieldID": "is_link",
"Value": "link"
}
},
{
"Type": "select",
"Options": "bi bi-clock-fill:Clock;bi bi-envelope-fill:Email;bi bi-facebook:Facebook;bi bi-instagram:Instagram;bi bi-linkedin:LinkedIn;bi bi-telephone-fill:Phone;bi bi-geo-alt-fill:World;bi bi-twitter-x:X",
"Delimiter": ";",
"ValueDelimiter": ":",
"IsRequired": true,
"FieldID": "icon_class",
"Label": "Icon"
},
{
"Type": "text",
"IsRequired": true,
"FieldID": "accessibility_label",
"Label": "Accessibility Label for Icon",
"Condition": {
"Type": "exists",
"FieldID": "icon_class"
}
},
{
"Type": "text",
"IsRequired": true,
"FieldID": "text",
"Label": "Text"
}
],
"AllowMultiple": true,
"Noun": "item",
"FieldID": "footer_contact_items",
"Label": "Items"
},
{
"Type": "html",
"FieldID": "footer_contact_bottomcontent",
"Label": "Bottom Content"
}
],
"Label": "Last Column"
}
],
"Label": "Footer Settings"
}
],
"$ObjectType": "Datastore"
}