Theme blocks

Theme blocks are Liquid files that are defined in the blocks directory of the theme:

Theme block files can contain markup and a schema:

To create a theme block, add a Liquid file in the /blocks folder of your theme. If your theme doesn't have a /blocks folder yet, then add one at the root of your theme.

The following example creates a Text block that can be reused across different sections and blocks of the theme:

Theme blocks have the same access to global objects, tags, and filters as other Liquid theme files, as well as the block object, which contains the properties and setting values of the block.

Aside from global objects, variables created outside of blocks aren't accessible within theme blocks. This means that, unlike section-defined blocks, theme blocks can't access the section object or variables created within their parent section Liquid file.

You can render a theme block in a section or another theme block in the following ways:

• Dynamically rendered in Liquid via {% content_for 'blocks' %}.
• Statically rendered in Liquid, setting the type explicitly using {% content_for “block”, type: “<type>”, id: “<id>” %}. Merchants will not be able to delete or re-order statically rendered blocks.

After you have theme blocks defined in your theme, update the schema of the sections where you want to accept theme blocks.

You can opt-in to accepting all theme blocks in a section by adding a generic entry of type @theme to the blocks attribute of the schema of that section. You can also opt-in to specific theme blocks by explicitly referencing them.

You can render the markup of the child blocks with the {% content_for 'blocks' %} Liquid tag. This tag can be used in section files and theme block files to render nested blocks without having to iterate through them manually.

In the following example, the Section will have access to all theme blocks.

In the following example, the Slideshow section will have access to only the Slide theme block.

Theme blocks can accept other theme and app blocks as children using the blocks attribute of their schema and assemble different configurations of these child blocks using the presets attribute.

The following is an example of including nested blocks using a block's presets attribute, and using the {% content_for 'blocks' %} Liquid tag to render the markup of the nested blocks:

Each block's content is outputted by the {% content_for 'blocks' %} tag in the order that's stored in the JSON template.

Learn more about nesting theme blocks and presets.