Render a reusable Why Us section from a repeating fieldset, passing each child custom object to a focused partial.
View this pattern on the live demo site
Proof/benefits band used on the home landing.
{% comment %}
Displays a "Why Us" section with intro text, multiple reasons, and a conclusion - all optional
Inputs:
section_class
section_id
Custom Fields:
whyus_title
whyus_subtitle
whyus_intro
whyus_reasons - repeating fieldset; each child object has title, image, description, alignment, and layout
whyus_conclusion
Outputs:
section_rendered - true when this section outputs markup, false otherwise
{% endcomment -%}
<section{% if section_class %} class="{{ section_class }}"{% endif %}{% if section_id %} id="{{ section_id }}"{% endif %}>
<div class="container">
{%- var headinglevel = headinglevel %}{% comment %}Copy to current scope{% endcomment -%}
{%- include "/common/_title_with_subtitle.liquid" title:entity.whyus_title subtitle:entity.whyus_subtitle postincrement_headinglevel:true title_classname:'text-center' subtitle_classname:'text-center' -%}
{%- if entity.whyus_intro.is_valid -%}
<div class="lead text-center mx-auto mb-5" style="max-width: 42rem;">{{entity.whyus_intro}}</div>
{%- endif -%}
{%- if entity.whyus_reasons.is_valid -%}
<div class="row g-4">
{%- for reason in entity.whyus_reasons -%}
<div class="col-md-4">
<div class="card h-100 border-0 shadow-sm text-bg-light">
<div class="card-body p-4 text-center">
{%- include "/partials/_why_us_reason.liquid" reason:reason -%}
</div>
</div>
</div>
{%- endfor -%}
</div>
{%- endif -%}
{%- if entity.whyus_conclusion.is_valid -%}
<div class="text-center mt-5 mx-auto" style="max-width: 42rem;">{{entity.whyus_conclusion}}</div>
{%- endif -%}
</div>
</section>
{%- set section_rendered = true -%}
Custom fields owned by the Why Us section.
[
{
"Type": "group",
"Fields": [
{
"Type": "text",
"FieldID": "whyus_title",
"Placeholder": "Why Us",
"Label": "Title"
},
{
"Type": "text",
"FieldID": "whyus_subtitle",
"Label": "Subtitle"
},
{
"Type": "html",
"FieldID": "whyus_intro",
"Label": "Intro"
},
{
"Type": "fieldset",
"Fields": [
{
"Type": "text",
"IsRequired": true,
"FieldID": "title",
"Label": "Title"
},
{
"Type": "image",
"FieldID": "image",
"Label": "Image"
},
{
"Type": "html",
"FieldID": "description",
"Label": "Description"
},
{
"Type": "radio",
"FieldID": "alignment",
"Label": "Alignment",
"Options": "start:Left;center:Center;end:Right",
"Delimiter": ";",
"ValueDelimiter": ":",
"DefaultValue": "start"
},
{
"Type": "select",
"FieldID": "layout",
"Label": "Layout",
"Options": "stacked|Stacked;icon|Small Icon;media|1:2 split;feature|1:1 Split;card|Card;overlay|Image Overlay",
"Delimiter": ";",
"ValueDelimiter": "|",
"DefaultValue": "stacked",
"Condition": {
"Type": "or",
"Conditions": [
{
"FieldID": "image",
"Type": "exists"
},
{
"FieldID": "description",
"Type": "exists"
}
]
}
}
],
"AllowMultiple": true,
"InitCollapsed": false,
"FieldID": "whyus_reasons",
"Label": "Reasons"
},
{
"Type": "html",
"FieldID": "whyus_conclusion",
"Label": "Conclusion"
}
],
"Label": "Why Us Section"
}
]
One repeating reason: icon, title, and copy passed as a child custom object.
{% comment %}
Renders a single "Why Us" reason with a configurable layout.
Layouts use the same title, image, description, and alignment (start, center, end) fields
Inputs:
reason - one child custom object from whyus_reasons, with title, image, description, alignment, and layout
img_preset_why_us - The image preset to use for the image when the layout is not 'icon'
img_preset_why_us_icon - The image preset to use for the image when the layout is 'icon'
{% endcomment -%}
{%- var reason_layout = reason.layout.value | default: 'stacked' -%}
{%- var text_align = reason.alignment.value | default: 'start' -%}
{%- capture reason_title -%}
{%- include '/common/_title.liquid' title:reason.title title_classname:'h4 mb-0' -%}
{%- endcapture -%}
{%- capture reason_description -%}
{%- if reason.description.is_valid -%}
<div{% if reason_title is_valid %} class="mt-2"{% endif %}>{{ reason.description }}</div>
{%- endif -%}
{%- endcapture -%}
{%- case reason_layout -%}
{%- when 'icon' -%}
<div class="d-flex flex-column align-items-{% if text_align == 'end' %}end{% elsif text_align == 'center' %}center{% else %}start{% endif %}">
{%- if reason.image.is_valid -%}
<div class="mb-3">
{%- img reason.image link:false preset:img_preset_why_us_icon class:'rounded-circle img-fluid' style:'width: 96px; height: 96px; object-fit: cover;' -%}
</div>
{%- endif -%}
<div class="text-{{text_align}}">
{{ reason_title }}
{{ reason_description }}
</div>
</div>
{%- when 'media' -%}
<div class="row align-items-center gy-3{% if text_align == 'end' %} flex-md-row-reverse{% elsif text_align == 'center' %} justify-content-center{% endif %}">
{%- if reason.image.is_valid -%}
<div class="col-md-4{% if text_align == 'center' %} col-lg-3 text-center{% endif %}">
{%- img reason.image link:false preset:img_preset_why_us class:'img-fluid' -%}
</div>
{%- endif -%}
<div class="col{% if reason.image.is_valid %} col-md-8{% if text_align == 'center' %} col-lg-6{% endif %}{% else %} col-12{% endif %}">
{{ reason_title }}
{{ reason_description }}
</div>
</div>
{%- when 'feature' -%}
<div class="row align-items-center gy-3{% if text_align == 'end' %} flex-md-row-reverse{% elsif text_align == 'center' %} justify-content-center text-center{% endif %}">
{%- if reason.image.is_valid -%}
<div class="col-md-6">
{%- img reason.image link:false preset:img_preset_why_us class:'img-fluid' -%}
</div>
{%- endif -%}
<div class="col-md-{% if reason.image.is_valid %}6{% else %}12{% endif %}">
{{ reason_title }}
{{ reason_description }}
</div>
</div>
{%- when 'card' -%}
<div class="card border-0 bg-transparent h-100">
{%- if reason.image.is_valid -%}
{%- img reason.image link:false preset:img_preset_why_us class:'card-img-top img-fluid' -%}
{%- endif -%}
{%- if reason_title is_valid or reason.description.is_valid -%}
<div class="card-body px-0{% if reason.image.is_valid %} pt-3{% else %} py-0{% endif %}">
{{ reason_title }}
{{ reason_description }}
</div>
{%- endif -%}
</div>
{%- when 'overlay' -%}
{%- if reason.image.is_valid -%}
<div class="position-relative overflow-hidden rounded">
{%- img reason.image link:false preset:img_preset_why_us class:'img-fluid w-100' -%}
{%- if reason_title is_valid or reason.description.is_valid -%}
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-center p-3 p-md-4 bg-dark bg-opacity-50 text-white text-{{text_align}}">
{{ reason_title }}
{{ reason_description }}
</div>
{%- endif -%}
</div>
{%- else -%}
{{ reason_title }}
{{ reason_description }}
{%- endif -%}
{%- else -%}
{{ reason_title }}
{%- if reason.image.is_valid -%}
<div class="mb-2">
{%- img reason.image link:false preset:img_preset_why_us class:'img-fluid' -%}
</div>
{%- endif -%}
{{ reason_description }}
{%- endcase -%}