Developing a Section in Shopify Theme
--
How to add a custom section with blocks. These are personal notes, so just steal the code, theres not much explination.
To begin create a new file called team.liquid
in the section folder.
Start the code by adding an empty div and a schema section.
<div class="page-width"></div>{% schema %}
{
"name": "Team Members",
"class": "team-members-section"
}{% endschema %}
This is our boilerplate. Lets begin by adding the settings attribute to our schema JSON.
"settings": [
{
"id": "title",
"type": "text",
"label": "Section Title",
"default": "Meet our Team"
}
]
The id and type is important but feel free to change the label and default values. Now to add it to the html insert it in the div.
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h2>{{ section.settings.title | escape }}</h2>
</div>
{% endif %}
This particular section of html was taken from another section as to maintain a consistent styling.
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"
}
}
]
This is the bare bones and will let us add a name to each block, but we want a bit more so lets fill it out with a job title, bio and photo.
"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"
}
]
}
]
Much better. Not for the html.
<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"
}]
By adding the presets attribute our Team Members section will now show up when adding content to the home page.
All the code:
<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 %}