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 %}