Skip to documentation content

Flex Inside Page

All complete examples

Demonstrate Flex Inside Page.

What this example teaches

  • Compose Flex Inside Page from reusable section and theme templates
  • Keep the page template thin by including shared partials
  • Keep custom fields on the template that owns them

View this pattern on the live demo site

Files

Flexible page: skips breadcrumbs when the first block is a banner, then renders flex sections.

Liquid
{% comment %}
	Highly configurable page with flexible content blocks. This layout allows for the maximum flexibility in a single template, but may result in more work for the editor to configure everything the way they want.
	When possible, it is usually preferable to create specific page templates for different layouts/configurations, but this allows a strong fallback for pages where the layout is not easy to determine in advance or where it may change frequently.

	When the first flex section is a banner, breadcrumbs are skipped so the hero can sit flush under the site nav.
{% endcomment -%}
{%- include "/_header.liquid" -%}
{%- var flex_opens_with_banner = false -%}
{%- if entity.flex_sections.is_valid -%}
	{%- var first_flex = entity.flex_sections | first -%}
	{%- if first_flex.type.value == 'banner' and first_flex.hide_section.on == false -%}
		{%- set flex_opens_with_banner = true -%}
	{%- endif -%}
{%- endif -%}
{%- unless flex_opens_with_banner -%}
	{%- include "/sections/_breadcrumbs.liquid" -%}
{%- endunless -%}
{%- include "/sections/_flex.liquid" -%}
{%- include "/sections/_simple_cta.liquid" -%}
{%- include "/_footer.liquid" -%}

Related

datastore_item

{{ template }}

datastore_item

{% template %}

datastore_item

{% include %}

Processes and outputs a partial template, javascript, or stylesheet. If the partial template is a compiled template, then any custom fields from the partial ...

datastore_item

{% for %}

Iterates through every item in a list. Executes and outputs a block of code to the template for each item in the list.