Them App Extension in header.liquid

Solved

Them App Extension in header.liquid

HunkyBill
Shopify Partner
4851 60 555

Store 2.0 theme has header.liquid with block that has a type @app.

 

 

 "blocks": [
    {
      "type": "@app"
    },

 

Also, if that exists, it is rendered via this:

 

 {%- for block in app_blocks -%}
            {%- render block -%}

 

In the theme customizer, when I examine the header, there is the control to add a block. But that never looks for an App extension? Why? All I see is this:

theme.png

 I have an App set to with enabled_on targets and groups set to ["*"] thinking that would allow the extension to be dropped on the header, but it does not work that way.

 

Can anyone point out why not? Thanks for any info.

 

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Accepted Solution (1)

wmeligy
Shopify Partner
5 1 3

This is an accepted solution.

For our case, the problem was that the section is statically rendered which according to the documentation here: App blocks (shopify.dev) is not supported by app blocks.

 

You can tell the difference by checking your code ( likely theme.liquid ) , and you may find something like the following

 

{% section 'header' %}

 

That is a statically rendered section, you need section rendered using JSON templates.  You can find an example in the latest Dawn theme, you will find this instead

 

{% sections 'header-group' %}

 

notice the extra "s" in the tag , the header-group is the name of a json file under `sections/header-group.json' 

 

One solution is to create a similar file to header-group.json , that renders one section: the header section. This way, the app block will work

View solution in original post

Replies 3 (3)

wmeligy
Shopify Partner
5 1 3

We are having the same issue in the Symmetry theme among others, were you able to resolve this? only difference is the way the for loop works on other themes like older "Dawn" is

      {% for block in section.blocks %}
        {% case block.type %}
          {% when '@app' %}
            {% render block %}
        {% endcase %}
      {% endfor %}

wmeligy
Shopify Partner
5 1 3

This is an accepted solution.

For our case, the problem was that the section is statically rendered which according to the documentation here: App blocks (shopify.dev) is not supported by app blocks.

 

You can tell the difference by checking your code ( likely theme.liquid ) , and you may find something like the following

 

{% section 'header' %}

 

That is a statically rendered section, you need section rendered using JSON templates.  You can find an example in the latest Dawn theme, you will find this instead

 

{% sections 'header-group' %}

 

notice the extra "s" in the tag , the header-group is the name of a json file under `sections/header-group.json' 

 

One solution is to create a similar file to header-group.json , that renders one section: the header section. This way, the app block will work

HunkyBill
Shopify Partner
4851 60 555

That is very good information! I have recently had success dropping my extension into the header, but I did not check as to why it was working all of a sudden, but I am betting if I dive in and look for this little aspect of it, header rendering as a JSON section, it'll jump out at me!

Thanks for this explanation!

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com