Shopify has recently introduced a new feature to enhance the flexibility of theme development: the Blocks folder. This addition allows developers to create reusable content blocks that can be incorporated into custom sections across a Shopify store. In this article, we will walk through the purpose of the Blocks folder, how to use it, and how it can improve the organization and reusability of your Shopify theme.
What is the Blocks Folder?
In the past, when creating custom sections for Shopify themes, the blocks (such as text, images, and other content) were defined directly within the section's code. This meant that if you wanted to reuse a specific block in different sections, you had to duplicate the code each time. However, Shopify’s introduction of the Blocks folder allows you to create blocks that are stored separately and can be reused across different sections, reducing redundancy and streamlining the development process.
When you first install a theme, the Blocks folder is empty. It is up to you to create blocks within this folder, which can then be referenced in various sections throughout your theme. This new approach offers greater flexibility and ease of management.
How to Use the Blocks Folder in Shopify
The Blocks folder can be used to create custom, reusable content blocks for your Shopify theme. Let’s break down how to use this folder in practical terms.
Step 1: Create a Custom Section
To begin using the Blocks folder, you first need to create a custom section. This section will reference content stored in the Blocks folder.
For example, let’s create a simple custom section called grt-new-facts. Shopify provides a default schema for custom sections, which can be customized. To include content from the Blocks folder in the section, you need to add the following block types to your schema:
{
"type": "@theme"
},
{
"type": "app"
}
This tells Shopify to pull content from the Blocks folder and make it available within the section.
Step 2: Create a Block in the Blocks Folder
Next, create a new block file within the Blocks folder. For example, let’s name this block grt-new-block.liquid. Inside this block file, you will define the settings for the block, such as a simple text field for a title. Here is an example schema for this block:
{% schema %}
{
"name": "Title",
"settings": [
{
"type": "text",
"id": "title",
"label": "Block Title"
}
],
"presets": [
{
"name": "Title Block"
}
]
}
{% endschema %}
Then, in the HTML section of the block file, use the following code to render the block’s content:
<div class="page-width">
<h2 style="font-size: 30px;">{{ block.settings.title }}</h2>
</div>
This block defines a field where you can enter a title that will be displayed in the section.
Step 3: Rendering Blocks Inside a Section
Now that you've defined the block, you need to render it within your custom section. To do this, use the following Liquid tag:
This tag will pull in all the blocks from the Blocks folder and display their content within the section.
Understanding the @theme Block Type
When you use the @theme block type in your section schema, Shopify knows to pull in content from the Blocks folder. If you omit this, none of your blocks will appear in the theme editor, even though you’ve defined them.
To clarify, the @theme type ensures that your block templates are available and editable in the Shopify admin interface. Without it, your block content would not be visible or usable.
A Practical Example
Let’s say you’ve added a Title block in your section, with the text “GR Trading.” Initially, if you haven’t included {{ content_for_blocks }} in the section, the title won’t display on the front-end of your store.
Once you refresh the page and include the necessary content_for_blocks code, the title “GR Trading” will appear on the page as expected. You can also apply styling to this content, such as changing the font size to make it more prominent:
By following these steps, you can continue adding other blocks, such as an Image block or even a Review block, and display them in the same section.
Why Use the Blocks Folder?
The main advantage of the Blocks folder is that it allows for reusability. Once you define a block, you can use it in any section that supports the block type, without having to redefine it each time. This saves time, reduces code duplication, and makes it easier to maintain your theme.
Additionally, by storing blocks in the Blocks folder, your theme becomes more modular, making it easier to update and extend. Whether you’re working with text, images, or custom content, the Blocks folder provides a central location for organizing reusable elements.
