Shopify is awesome, and one of the things that I like the most is that it allows merchants to update the UI of their e-commerce sites in a very seamless way, something similar to using no code, and your job as developer is to make a theme as customizable as possible for your clients, so they never will not come to you again for a background color change hopefully.
Thanks to the Schemas, you can accomplish that, and the possibilities are almost endless on what you can make customisable. Schemas are great and are one of the essential parts of Shopify development. To start understanding how schemas works, you must know they can only be written inside .liquid files, within the sections folder.
And they are written outside the html content, just right at the bottom usually. Using the schema tags. What is inside is pretty much a JSON structure. We will get more deep on this later with an example. Another thing to understand is all you write inside the schema will be reflected on the theme editor, which is the back office for the merchants. It’ll look like the section at the right side of the screen.
{% schema %}
…
{% endschema %}
Each page or template, (for example the home page, or the product page) can be composed by multiple sections (up to 25), whereas a section can be integrated by snippets. Think of snippets as components, which you can use to modularize the code. Snippets are added through the code, using the liquid tag render as follows: {% render 'snippet-file-name' %}
Just don’t try to use sections inside other sections, as they were snippets, it is not possible, this tip might save you headaches in the future. The only place where you can call a section with code is on the theme.liquid file, that is a kind of starting point for the whole project.
Before moving on, how to create our section, in case you are wondering how a page is created. You create them by adding a .json file inside the templates folder. Is not the point of this short tutorial to explain the structure of a template file, but I encourage you to check it after finishing this tutorial, on the Shopify documentation. For now it is enough knowing that a template will represent a single page in the e-commerce website, and this file will usually be written dynamically when someone makes any change on the theme editor. You could technically add sections here as well inside the template file, but it’s way easier and better if you do it through the theme editor. Any section added manually to the template file, won’t be accessible through the theme editor, keep that in mind.
Okay, now in order to keep this article as an actual tutorial, let’s go to create our first section. We are doing a hero banner, and will make sure this boy is fully customisable with the help of schema. This is what we are going to be creating.
This hero banner has 3 main parts, the image for the banner itself (1), the white box with title, subtitle and the CTA button with the respective link (3), and the rounded shape (2) that was made with SVG but since our sizes can change depending on the content on of the box, we allow merchants positionate them by themselves.
This is the basic structure of the schema, where the name, is how we will see it on the builder, the tag property, is the HTML tag, used to wrap our component (in case we omit it, a basic div will be used), optionally we could use a class, for further styling purposes.
{% schema %}
{
"name": "Cool Radius Hero Banner",
"tag": "section",
"class": "hero__section",
}
{% endschema %}
Now the settings property is where our component is made really customizable. Shopify provides a set of predefined inputs that we can use, with their own constraints sometimes. In this example we are using the basic ones, but you can find the whole list here.
We are needing an image picker, the type property is where we say to Shopify which type of input we will be needing at the theme editor. As you can imagine the label is for displaying it at the editor as well, and the id is how we reference it in our code.
<img src="{{ section.settings.image | img_url: 'master' }}" alt="{{ section.settings.title }}">
{% schema %}
{
"name": "Cool Radius Hero Banner",
"tag": "section",
"class": "hero__section",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
],
}
If you are new to the Shopify world you’ll be wondering, where the section object comes from. Shopify provides several global variables that store different information depending on which variable you are doing reference, for this particular one, the section object has the information related to that section itself including settings and the blocks, if another section is created on the same page, it’ll have different information related to that new section. I encourage you to see the documentation for each object in order to see what property provides each global variable. Doing hover on the object usually prompts you links to access the documentation.
To provide the content for the title, subtitle and CTA of the banner content we can provide as many settings as we want, so merchants can adapt the UI for their unique needs. These are just a few.
{%schema%}
"settings": [
//...
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type": "color",
"id": "title_color",
"label": "Title Color"
},
{
"type": "range",
"id": "title_size",
"label": "Title Size",
"default": 2,
"min": 1,
"max": 5,
"step": 0.1,
"unit": "rem"
},
//...
{%endschema%}
Ranges are tricky sometimes, because they have some constraints, like the amount of steps you can provide to them. The maximum step allowed is 101, this means the amount of values so to speak that you can choose from that given range. In case that’s not clear, imagine you are building a stair to go up 20 meters, but you can only give it 10 steps, this means every step should have up to 10 cm or more if you wish. In case you go less than 10cm you’ll have more than 10 steps and will fail to comply with the rule.
The same we did to grab the image, we get the content box information provided in the theme editor through the settings property within the sections global object, as follows.
<div class="hero__text-box">
<h2>{{section.settings.title }}</h2>
<p>{{ section.settings.subtitle }}</p>
<a href="{{ section.settings.button_url }}" class="btn">{{ section.settings.button_label }}</a>
</div>
And for the dynamic styles we need to create a style tag inside the same .liquid file besides our html content. And place the values from the builder accordingly.
<style>
.hero__text-box h2 {
font-size: {{ section.settings.title_size }}rem;
margin-bottom: {{ section.settings.title_bottom_margin }}px;
color: {{ section.settings.title_color }};
}
.hero__text-box a {
background-color: {{ section.settings.button_color }};
color: {{ section.settings.button_font_color }};
}
.svg-top-side {
bottom: {{ section.settings.svg_top_side }}px;
}
.svg-right-side {
left: {{ section.settings.svg_right_side }}px;
}
</style>
One thing important to understand when working with liquid is think of it like you were doing some sort of server side rendering. Yes my frontend friend, you are some sort of backend developer now. Any value provided there won’t change once it hits the client, please keep that in mind, although you could use JavaScript to modify it.
We are almost done, but if you go to the theme editor and try to find the section you won’t find it yet. In order to make it visible we must provide the presets property on the schema, is how we make it possible include our sections to each template JSON through the theme editor. So don’t forget it.
The next step is to complete the information and customize the section with the inputs that were created on the settings inside the schema. This is what it should look like more or less.
Sections can get very complex, so the more you learn the basics of liquid the better and more fancy sections you’ll be able to create. I encourage you to do the same I did for this tutorial, grab any cool UI component you like on pages like Pinterest or Behance and try to replicate them, is the only way I know to get better at this. I leave you the complete code at my repository, and feel free to reach out if any doubt regarding the code.
Top comments (0)