What is the correct way to use the 'blocks' key in app schema?

Technical Q&A
1

What is the full app blocks schema?

https://shopify.dev/apps/online-store/theme-app-extensions/extensions-framework#schema shows its similar to https://shopify.dev/themes/architecture/sections/section-schema#app-block-schema but adding the key “blocks” I get the error uploading the app: unknown key 'block

...
    "blocks": [
      {
        "name": "Slide",
        "type": "slide",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          }
        ]
      }
    ]
{% endschema %}
2

Refer https://github.com/Shopify/dawn/blob/main/sections/apps.liquid
You just need to use “type”: “@app”, it will work fine.
Hope it helps!

3

I’m also curious about this. My app needs to have some repeated blocks. It would be convenient to allow people to manage them in the theme customization area. But the blocks attribute doesn’t seem to be supported in the schema section for an app extension. It would be nice to have a full schema reference so we know what all is available and/or not allowed. The current documentation makes it sound like everything supported by the section schema is also supported in app extensions, but that doesn’t seem to be the case.

1 Like
4

@emcfarlane @jagthedrummer Did you ever find anything? I am struggling with the same thing.

@LitExtension That is not what they were asking for. When you use the same schema in an Theme App Extension block you get the the following error:

Validation errors                                                           │
│    • bundle: [blocks/styles-selector-container.liquid] Invalid tag           │
│      'schema': unknown key 'blocks',                                         │
│      [blocks/styles-selector-container.liquid] Invalid tag 'schema':         │
│      unknown key 'presets'

Using @app doesn’t help in this case, only when building a section to take app blocks, not within the app block itself.

2 Likes
5

Did you find a solution? I have the same problem((

1 Like
6

@Nazar4 No built in solution for this one that I have found. Here is the full list of Schema that the app blocks can take. Note I could not find a good list of Settings for the app blocks in the documentation.

In my case, figured out a workaround. I needed repeating blocks for specific products to then manipulate. I put said products in a collection which I then looped through by creating a block collection setting and referencing it (see Settings in the documentation linked above) to dynamically create the blocks based on the number of products in the collection. For the settings of each dynamically created block, I captured an index at the beginning of the loop and then referenced that in the products list returned by the collection setting, like so:

I passed things to the JS file as needed via HTML data attributes.

I know everyone’s use case is different, but hopefully this may help you!

7

There is no key “blocks” in your shema?? But you use block in your HTML

data-images=“{{ block.settings. … }}”

How its possible?? Can you show the structure of your liquid file, please??

8

block is just a Liquid object you can use inside of a Section or App block. Its what you reference to access the settings in each: https://shopify.dev/docs/api/liquid/objects#block

You might want to familiarize yourself with Shopify Liquid objects as well. This is also a handy Liquid cheatsheet from Shopify: https://www.shopify.com/partners/shopify-cheat-sheet

9

I mean that when I use “blocks” and “presets” in my schema I recive a Validation errors. Errors are the same as on your screen:

Invalid tag ‘schema’: unknown key ‘blocks’,

Invalid tag ‘schema’: unknown key ‘presets’

Here is my schema
{% schema %}
{
“name”: “About”,
“target”: “section”,
“settings”: [
…
],
“blocks”: [
{
“name”: “Counter”,
“type”: “counter”,
“settings”: [
…
]
}
],
“presets”: [
{
“name”: “About”,
“blocks”: [
{
“type”: “counter”
},
{
“type”: “counter”
}
]
}
]
}
{% endschema %}

10

Using @app doesn’t help me. I have no idea what to do, and cant find a solution of this problem.

11

Theme extension App blocks cannot take the blocks or presets schema. I believe that is in Sections only; app blocks cannot take everything sections can and are different things entirely. App blocks can only take the schema as noted in the documentation that I shared above.

You will not be able to create blocks and/or repeating blocks the way you showed in your shared schema within an theme extension app block.

12

You mean I cannot use forloop to render the same bocks in extention??

13

Using invalid Schema? No. You’ll have to iterate through something else, like a Collection.

Theme app extension blocks aren’t intended to act like Sections from what I can gather. They are much more limited, and really meant for simple blocks (like star ratings) that the user can drag and drop into the Theme. In fact there are quite a few limitations placed on them. For more complex App blocks you have to get creative.