Skip to main content

AI generated theme blocks

In the theme editor, merchants can generate theme blocks in existing sections that support theme blocks. In order for theme developers to create themes that enable merchants to use this feature effectively, there are a few key concepts to understand.

Anchor to Theme blocksTheme blocks

To make it possible for a section to accept AI generated blocks, it must accept theme blocks. To accept all theme blocks in a section, add the type @theme to the blocks attribute of the schema of that section.

Anchor to Wrapper SectionWrapper Section

Generated blocks aren't sections themselves. Therefore Shopify wraps these generated blocks in a platform-generated section by default such as when merchants choose to use Sidekick to generate a block in a new section.

Shopify automatically wraps the generated block in a wrapper section called _blocks.liquid. You can override and customize this wrapper section by adding your own _blocks.liquid section to your theme.

Note

The _blocks.liquid section isn't a standard theme section. It can't be manually rendered, meaning you can't include it with {% section '_blocks' %}, and it won't show up in the theme editor for merchants to add to pages.

Anchor to Custom ,[object Object], sectionCustom _blocks.liquid section

The _blocks.liquid section schema needs the following to be true:

  1. Define @theme and @app as block types
  2. Define presets
  3. Define {% content_for blocks %}
  4. Does not define the templates attribute, including within disabled_on and enabled_on

If any of these cases is not met, then an error is returned in the code editor and merchants aren't able to use the section.

Additionally, you can enable merchants to control how the block looks inside the _blocks.liquid wrapper using settings. This ensures the wrapper is visually consistent with your theme's layout.

_blocks.liquid

{% content_for 'blocks' %}

{% schema %}
{
"name": "Section",
"blocks": [{ "type": "@theme" }, { "type": "@app" }],
"settings": [
{
"type": "range",
"id": "section-margin",
"label": "",
"min": 0,
"max": 50,
"default": 0,
"unit": "px"
},
],
"presets": [
{
"name": "Section"
}
]
}
{% endschema %}
Was this page helpful?