Developing a Section in Shopify Theme

<div class="page-width"></div>{% schema %}
{
"name": "Team Members",
"class": "team-members-section"
}
{% endschema %}
"settings": [
{
"id": "title",
"type": "text",
"label": "Section Title",
"default": "Meet our Team"
}
]
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h2>{{ section.settings.title | escape }}</h2>
</div>
{% endif %}

Blocks

Okay Lets add a block attribute to our schema JSON.

"blocks": [
{
"type": "staff-profile",
"name": "Team Member",
"settings": [
{
"id": "name",
"type": "text",
"label": "Name"
}
}
]
"blocks": [
{
"type": "staff-profile",
"name": "Team Member",
"settings": [
{
"id": "name",
"type": "text",
"label": "Name"
},
{
"id": "photo",
"type": "image_picker",
"label": "Mug Shot"
},
{
"id": "title",
"type": "text",
"label": "Job Title"
},
{
"id": "bio",
"type": "textarea",
"label": "Bio"
}
]
}
]
<div class="grid">
{% for member in section.blocks %}
<div class="grid__item medium-up--one-quarter">
{% if member.settings.photo %}
{{ member.settings.photo | img_url: '200x' | img_tag }}
{% endif %}
<h3>{{member.settings.name}}</h3>
<span>{{member.settings.title}}</span>
<p>{{member.settings.bio}}</p>
</div>
{% endfor %}
</div>

Adding to the Home Page

"presets": [
{
"category": "Collection",
"name": "Team Members"
}]
<div class="page-width">
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h2>{{ section.settings.title | escape }}</h2>
</div>
{% endif %}
<div class="grid">
{% for member in section.blocks %}
<div class="grid__item medium-up--one-quarter">
{% if member.settings.photo %}
{{ member.settings.photo | img_url: '200x' | img_tag }}
{% endif %}
<h3>{{member.settings.name}}</h3>
<span>{{member.settings.title}}</span>
<p>{{member.settings.bio}}</p>
</div>
{% endfor %}
</div>
</div>{% schema %}
{
"name": "Team Members",
"class": "team-members-section",
"settings": [
{
"id": "title",
"type": "text",
"label": "Section Title",
"default": "Meet our Team"
}
],
"blocks": [
{
"type": "staff-profile",
"name": "Team Member",
"settings": [
{
"id": "name",
"type": "text",
"label": "Name"
},
{
"id": "photo",
"type": "image_picker",
"label": "Mug Shot"
},
{
"id": "title",
"type": "text",
"label": "Job Title"
},
{
"id": "bio",
"type": "textarea",
"label": "Bio"
}
]
}
],
"presets": [
{
"category": "Collection",
"name": "Team Members"
}]
}
{% endschema %}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store