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.

This is our boilerplate. Lets begin by adding the settings attribute to our schema JSON.

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.

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.

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.

Much better. Not for the html.

Adding to the Home Page

By adding the presets attribute our Team Members section will now show up when adding content to the home page.

All the code:

Tech stuff and SwiftUI

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