Liquid Tutorial

App Blocks & Embeds

Source: Coding with Robby

Integrating Shopify Apps in Your Theme

Apps extend themes via app blocks (in sections), app embed blocks (global in theme.liquid), and theme app extensions. Theme developers must add @app block support so merchants can place app widgets in the editor.

Section with app block support
{% for block in section.blocks %}
  {% case block.type %}
    {% when '@app' %}
      {% render block %}
    {% when 'heading' %}
      <h2 {{ block.shopify_attributes }}>{{ block.settings.heading }}</h2>
    {% when 'text' %}
      <div class="rte" {{ block.shopify_attributes }}>{{ block.settings.body }}</div>
  {% endcase %}
{% endfor %}

{% schema %}
{
  "name": "Flexible content",
  "blocks": [
    { "type": "@app" },
    {
      "type": "heading",
      "name": "Heading",
      "settings": [{ "type": "text", "id": "heading", "label": "Heading" }]
    },
    {
      "type": "text",
      "name": "Text",
      "settings": [{ "type": "richtext", "id": "body", "label": "Body" }]
    }
  ],
  "presets": [{ "name": "Flexible content" }]
}
{% endschema %}
  1. Add { "type": "@app" } to section schema blocks array
  2. Render with {% render block %} inside the block loop
  3. App embed blocks go in settings_data.json under theme app embeds — no section needed
  4. Test with a popular app (reviews, upsell) in your dev store
Tip: Theme Store themes MUST support app blocks in main sections. Theme Check validates AppBlockMissing schema in some configurations.