Shopify Theme Blocks allow developers to build flexible and dynamic layouts by dividing a section into smaller, reusable components.
Together with Shopify Academy, we've created a mini video course on what theme blocks are, how to use them and everything you need to know to get up speed.
I highly recommend checking out the video course, but if you just want to get a quick overview this article outlines the most important concepts.
Why Theme locks are useful
Rather than creating multiple sections for every layout variation, developers can break the content down into smaller blocks (such as text or images), which can then be added or re-aragned on demand.
Theme Blocks also support nesting up to 8 levels deep, which allows developers to build:
- Row and column layouts
- Complex and dynamic page layouts
Global Theme Blocks vs Traditional Section Blocks
Traditional blocks are usually defined inside each individual section
For example, if you want to add a button block to an image banner section and also use the same button in a rich text section, you had to create and define the block schema separately in both sections.
This approach results in:
- Duplicate code
- More effort to maintain
- Extra work when updates are needed
If you later decide to change the button layout or styling, you must update the code in every section where that button block exists.
With the new Theme Blocks approach, you can create a single reusable button Theme Block and use it across multiple sections.
Any change made to the button block is applied everywhere it is used, making the theme easier to maintain and more consistent.
How Global Theme Blocks work
To better understand how Shopify Theme Blocks work, let’s look at the Horizon Theme.
Inside the theme-files you’ll see a new folder called "blocks".
This folder contains all the Theme Blocks available.
Each Theme Block is defined as a Liquid file with a .liquid extension.
Similar to section files, a Theme Block file is divided into two main parts.
The upper part contains the actual implementation of the block, including the HTML, CSS, and Liquid code that controls how the block appears on the storefront.
The lower part contains the schema, which defines all the settings available for that block.
Inside a Theme Block’s schema, we define the block name, an array of settings, and a preset.
The preset are important because it makes the block available in the Theme Customizer, and also sets the default settings for the block.
Creating a Theme Block alone is not enough however, because to actually use the block, your sections must be configured to accept Theme Blocks.
A section can be configured to accept all available Theme Blocks, or, instead of allowing every block type, you can explicitly control which Theme Blocks are allowed.
(See example below, where just very specifc blocks are allowed on our footer section)
Private Theme Blocks
In some cases, a Theme Block should only be available in specific sections or blocks where it actually makes sense.
For example, a block that displays pricing details, stock status, or product badges should not be added to a hero banner or a blog article.
These types of blocks are only meaningful in product-related components, such as product cards or product detail sections.
To control this, Shopify allows Theme Blocks to be marked as private.
This is done by adding an underscore (_) as a prefix to the Theme Block file name.
Once a block is private, it no longer appears everywhere in the Theme Customizer.
A private Theme Block can only be used in sections or blocks where it is explicitly allowed.
This is controlled through the blocks attribute in the schema of the parent section or block. Only the Theme Blocks listed in this attribute can be added, and all other blocks are excluded.
Wrap up
Shopify Theme Blocks make it easier to build flexible and reusable layouts without duplicating code.
They allow developers to create blocks once and reuse them across sections, nest blocks for complex layouts.
If you want to learn how to get paid for work like this, keep an eye on our bootcamp.