If your section is part of a [JSON template](/docs/storefronts/themes/architecture/templates/json-templates), 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](/docs/apps/build/online-store/theme-app-extensions). > Note: > Blocks of type `@app` aren't supported in [statically rendered sections](/docs/storefronts/themes/architecture/sections#statically-render-a-section). 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](#app-block-wrapper) 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](#supporting-app-blocks) - [Render the block content](#render-app-blocks) - [Ensure that you have valid section settings](#app-blocks-and-section-settings) Refer to Dawn's [main product section](https://github.com/Shopify/dawn/blob/main/sections/main-product.liquid) for an example implementation of an existing theme section that opts-in to accepting app blocks. > Tip: > For framework information about app blocks, including the valid schema for app blocks, refer to the [theme app extensions framework](/docs/apps/build/online-store/theme-app-extensions/configuration) documentation. ## Supporting app blocks To allow merchants to add app blocks to a [section](/docs/storefronts/themes/architecture/sections) or a [theme block](/docs/storefronts/themes/architecture/blocks/theme-blocks), you need to include a generic block of type `@app` in the section or block schema. For example: ```json "blocks": [ { "type": "@app" } ] ``` > Caution: > Blocks of type `@app` don't accept the `limit` parameter. Including this will result in an error. ## 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: ```liquid
{% content_for 'blocks' %}
``` ### Render app blocks alongside section-defined blocks To render an app block alongside [section-defined blocks](/docs/storefronts/themes/architecture/blocks/section-blocks), you need to check for the appropriate type, and use the following code: ```liquid {% render block %} ``` For example: ```liquid {% for block in section.blocks %} {% case block.type %} {% when '@app' %} {% render block %} ... {% endcase %} {% endfor %} ``` ## App blocks and section settings To prevent ambiguity with [autofill settings](/docs/apps/build/online-store/theme-app-extensions/configuration#autofill), 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 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. > Caution The `apps.liquid` section schema can't contain the `templates` schema attribute. This also includes the `templates` attribute within the `enabled_on/disabled_on` schema attributes. It's expected that the `apps.liquid` section is available on all templates. 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.

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