App blocks for themes
If your section is part of a JSON template, then you should support blocks of type @app. These blocks enable app developers to create blocks for merchants to add app content to their theme without having to directly edit theme code. You can build app blocks using theme app extensions.
In the theme editor, merchants can choose to add app blocks to existing sections, or in a new section.
When merchants choose to add the app to a new section, Shopify automatically wraps the app block in a wrapper section called Apps. You can customize this wrapper section by your own apps.liquid section.
To add support for app blocks to your sections and theme blocks, you need take the following steps:
- Add support for app blocks to the schema
- Render the block content
- Ensure that you have valid section settings
Refer to Dawn's main product section for an example implementation of an existing theme section that opts-in to accepting app blocks.
Supporting app blocks
Anchor link to section titled "Supporting app blocks"To allow merchants to add app blocks to a section or a theme block, you need to include a generic block of type @app in the section or block schema.
For example:
Render app blocks
Anchor link to section titled "Render app blocks"To render app blocks, the theme block must use the {% content_for 'blocks' %} Liquid tag. This tag handles block rendering, including app blocks.
For example:
Render app blocks alongside section-defined blocks
Anchor link to section titled "Render app blocks alongside section-defined blocks"To render an app block alongside section-defined blocks, you need to check for the appropriate type, and use the following code:
For example:
App blocks and section settings
Anchor link to section titled "App blocks and section settings"To prevent ambiguity with autofill settings, sections that support app blocks can include only one resource setting of each type as a section setting. For example, a section might include only one product setting and only one collection setting.
App block wrapper
Anchor link to section titled "App block wrapper"Merchants can add app blocks to a page in the following ways:
- As a block within the confines of the section that's rendering the block
- In a similar manner to sections, giving them the full width of the page to render content
As app blocks aren't sections themselves, Shopify wraps these full-width app blocks in a platform-generated section by default. However, you can override this default section by creating your own section called apps.liquid.
The apps.liquid section schema needs to include a block of type @app, as well as a preset. If either of these is missing, then an Apps not supported or Apps section is invalid error is returned in the theme editor and merchants aren't able to use the section.
For example:
To enable merchants to control how the app looks inside of an app section, you can add a setting that lets merchants add margins around the app blocks. This helps make the app section margins consistent with your theme's layout.