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

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

--

--

--

Tech stuff and SwiftUI

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Fixing CORS errors with Angular CLI proxy

Black Pug Studio — Magazine #2

Let’s Understand “Closures” in JavaScript

Modernizing Code Examples from Books: splat and unsplat

HTML contentEditable attribute: a simple use case.

State in ReactJS

State In React

Top 3 JavaScript Framework for Server-side Rendering in 2021

What is Deno? Will it replace NodeJS in next era?

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
Peter Flickinger

Peter Flickinger

Tech stuff and SwiftUI

More from Medium

College football Week 13 TV schedule: Ohio State-Michigan, Iron Bowl, Bedlam on tap

India-China trade crosses $125 billion USD despite tensions! Hypocrisy of Indian consumers??

Mind to Market: Blast Ninja Quiet Blasting Nozzle

Is Diversity Pay Gap Reporting about creating a league table of offenders?