Shopify Themes — Custom Schema

How to add an option to a section schema.

You may have noticed a liquid tag for schemas at the end of sections. These schemas allow users to customize portions of a template, and we are going to add a transcript section underneath a video. This is a continuation on the article I wrote about combining two section to make a template.

First let's add the option to the schema. Insert this new js object underneath the scheme for adding a video. This will add a text-box labeled captions for the user to ender in the transcript.

{
   "type": "textarea",
   "id": "captions",
   "label": "Captions",
   "placeholder": "Enter video text here"
},

If we updated and refresh we can see it added to the page when we go to customize the video.

Now that we can save some captions we need to add it to the page. The captions value can be accessed by section.settings.captions, Inserting it into the bottom of the page should give us something like this:

Now to fancy it up, I went ahead and grabbed the code from the page section and replaced the heading with Transcript (and added some inline styling because it needed it and I didn’t want to go through the hassle of properly styling it). The body text is replaced with a liquid tag inserting in the value of captions.

{%- unless section.settings.captions == blank -%}
</div>
 <div class=”page-width”>
 <div class=”grid”>
 <div class=”grid__item medium-up — five-sixths medium-up — push-one-twelfth”>
   <div class=”section-header text-center”>
     <h3 style=”margin-top: 20px”>Transcript</h3>
   </div>
   <div class=”rte”>
    {{ section.settings.captions | escape }}
   </div>
  </div>
 </div>
 {%- endunless -%}

There we have it. Now our video has a lovely transcript section underneath so people can read along as they watch.