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.
To support app blocks, you need to do three things:
- Add support for app blocks to the section
- Render the block content
- Ensure you have valid section settings
Additionally, you can create an app block wrapper section.
Refer to Dawn's main product section for an example implementation.
Support app blocks in the section
Anchor link to section titled "Support app blocks in the section"To allow merchants to add app blocks to a section, you need to include a generic block of type @app in the section schema. For example:
Render app blocks
Anchor link to section titled "Render app blocks"To render an app block, 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"App blocks can be added to a page in two 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.