Chapter 7: Working with Static and Dynamic Sections

In the previous chapter, we familiarized ourselves with the different types of inputs, whether they're basic or specialized, and how we can use them to create global settings that we can easily configure through the theme editor.

In this chapter, we will not only get to use the previously mentioned inputs, but we will also learn how to create easily configurable and reusable sections that we can use to change the page or even templates' layouts easily.

We will learn about the following topics in this chapter:

• Static versus dynamic sections
• Working with the section schema
• Building with blocks
• Enhancing pages with JSON templates
• Exploring section-specific tags

By the time we complete this chapter, we will understand what sections are, when to use them, and how to create one. We will also learn about the difference between static and dynamic sections, and how we can configure them through...

Technical requirements

While we will explain each topic and have it presented with the accompanying graphics, we will need an internet connection to follow the steps outlined in this chapter, considering that Shopify is a hosted service.

The code for this chapter is available on GitHub: https://github.com/PacktPublishing/Shopify-Theme-Customization-with-Liquid/tree/main/Chapter07.

The Code in Action video for the chapter can be found here: https://bit.ly/3hQzhVg

Static versus dynamic sections

In Chapter 1, Getting Started with Shopify, while discussing the theme structure, we briefly mentioned section files, but what exactly are sections?

Besides being the name of one of the directories in the theme file, a section is a type of file that allows us to create reusable modules that we can customize using the theme editor, as we learned previously. However, as opposed to the global settings that we have learned about, the major difference is that the JSON settings for sections are defined inside each section file and are section-specific.

Section-specific settings allow us to reuse the same section module multiple times on the page and select a different set of options for each occurrence, making it a pretty powerful feature. For example, we can create a featured collections section and repeat it three times to display three products from three separate collections.

Before we proceed, let's navigate to the theme editor by clicking...

Working with the section schema

In the previous chapter, we learned how to use JSON to create global settings, which has a similar format to the JSON for section files. However, sectional JSON comes with a few distinct differences.

The first major difference is that we need to define JSON inside the section file instead of the settings_schema.json file. To do this, we will need to introduce the schema tag:

{% schema %}{% endschema %}

The schema tag is a Liquid tag that does not have any output on its own. It simply allows us to write JSON code inside the section files. Note that each section file can only contain a single schema tag, which must stand on its own. It cannot be nested inside any kind of other Liquid tags.

Once we have the schema tag in place, we are ready to familiarize ourselves with the types of attributes that we can use within the schema tags.

The name attribute

As its name suggests, the name attribute allows us to set the section name, which we...

Building with blocks

The blocks attribute is one of the most potent tools in Shopify. By using them, we can create modules that we can reuse any number of times and reorder the section content from within the theme editor. At this point, this might be confusing as it sounds similar to what we just learned about regarding dynamic sections. However, the key difference is that blocks sections allow us to reorder the content within the section, not the sections themselves, which allows us to create more complex features.

Additionally, we can combine the blocks attributes with static sections to create a dynamic section functionality that's similar to what we currently have on the home page, and then include it on any page. However, instead of rearranging sections, we will be rearranging the blocks.

The blocks attribute allows us to create different types of blocks using the object format, under which each object type will act as a unique module. Here, we can include a different...

Enhancing pages with JSON templates

In Chapter 1, Getting Started with Shopify, while discussing the theme structure, we briefly mentioned JSON templates, but what exactly are they?

The .json type templates generally have the same purpose as their counterpart .liquid templates, as they both allow us to create and manage the look of multiple pages through a single template. However, the significant difference between the two is that while the .liquid type template serves only as a markup file, the .json file serves as a data type file, which allows us to easily add, remove, or rearrange the sections on any page, similar to what we can do on the home page.

The .json type templates also share similarities with the Section directory files, where we need to include a valid schema setting inside the section file. The .json type template needs to be a valid .json file, with the JSON code defined inside the template. While we can create any number of .json type files, the template files...

Exploring section-specific tags

While we can easily define styling or include the JavaScript code inside the theme's respective asset files, Shopify provides us with three types of tags that we can use to include CSS and JavaScript directly in the section file.

The stylesheet tag

Similar to the schema tag, the stylesheet tag is a Liquid tag that does not have any output on its own. It simply allows us to write CSS code inside the section files. Note that each section file can only contain a single stylesheet tag, which must stand on its own. It cannot be nested inside any other kind of Liquid tag:

{% stylesheet %}
{% endstylesheet %}

Although this might not look like a great idea at first, since we end up having CSS code spread over multiple files, Shopify will automatically collect all the CSS files from the different section files, combine them into one stylesheet file, and inject it into the theme file through the content_for_header global object.

Important note...

Summary

In this chapter, we learned how to combine our previously attained knowledge of basic and specialized inputs with the section schema. This allows us to create everything from simple to complex layouts that we can easily configure throughout the theme editor.

By learning the difference between static and dynamic sections, we learned how to extend a section's functionality and make it accessible on any type of page. Additionally, besides learning how to create different types of sections, we have also gained knowledge of how to create different types of blocks modules, which will allow us to rearrange the layouts of a single section to make it easy to configure.

Lastly, we learned about the different types of section-specific tags that we can use to develop the content of the section further, as well as creating a unique experience for specific sections or even blocks modules.

In the next chapter, we will learn about what Shopify Ajax is and how we can utilize it...

Questions

1. What is the main difference between the static and dynamic sections?
2. What object can we use to access the block input value? Write some code that will allow us to access the specific blocks module input value.
3. What is the difference between the limit and max_blocks attributes?
4. How can we apply section-specific CSS styling?

Practice makes perfect

As with the projects in the previous chapters, this project will contain detailed information about what we need to do and the appropriate instructions to help you achieve the results.

We recommend working on each project independently from the previous chapters since this will ensure you have truly understood what you have learned so far.

Not a single project has a correct or incorrect solution. However, if by any chance you get stuck, you can always consult the project solution, which can be found at the end of this book.

Project 4

For our fourth project, we will work on creating a section schema with multiple block types. While we can include any number of block types, we should make sure to include the following types:

• The text type, which will render a single rich text input
• The product type, which will render a single product element with a product name, price, image, and link
• The list type, which will render a one-level navigation...