App Block getting excluded on page render

Online Store and Theme Development
, ,
1

Hey all,

A merchant has my app installed, and they’ve added my app block to their default product page template. It’s visible on the product page within the Theme Customizer.

However, when the product page is viewed on the website, the app block isn’t there. The container is completely missing from the markup.

When I look at product.json, the app block is definitely there - it’s one of 4 blocks, the other 3 being standard blocks from the theme (which is Dawn).

I’ve done a whole bunch of troubleshooting in main-product.liquid, to output the blocks to screen. For example, looping the blocks and outputting name or id. Outputting a count of section.blocks gives 3 rather than 4.

I’m putting this code at the very top of main-product.liquid, well before the switch function that outputs blocks differently based on their type. The switch has an allowance for when type is @app - however this doesn’t seem too relevant as the block seems to be missing well before this code is reached.

The theme is the current/published one on the store, and there’s only one product page template (default product). All products are set to use this template.

The merchant says it’s been working for some time on the live site but disappeared as of a few days ago. This doesn’t align with any new releases of the app.

Are there any other reasons Shopify would be excluding the app block from the list of section.blocks when rendering the product page?

No other merchants have reported a similar issue. There are hundreds of merchants with the app block being used on their product pages.

Any help would be much appreciated!

Thanks,
Gunner

2

Is your app block visible in the Shopify customizer, like, is it actually rendering? If yes, then please double-check if the market is correct. Sometimes stores have multiple markets, and it’s possible the customizer is showing one market while the live site defaults to another.

Also, some themes have optimizer apps installed that randomly remove app blocks for performance reasons. Definitely worth checking if the merchant has anything like that installed.

From what you described, I don’t see any other obvious reason for the block being excluded. I’ve faced similar issues before and 90% of the time it was either the market mismatch or an optimizer app causing the block to disappear.

One last thing, double check the rendering code in the theme and make sure app blocks are actually considered in the loop logic. Some customizations accidentally skip @app blocks.

Hope this helps!

3

Thanks for responding @Gulam_Hussain_Quinn

Yes the app block definitely renders in the theme customizer. No issues there at all.

App block is definitely in the loop logic:

image
image518×173 5.88 KB

However as mentioned, the app block doesn’t seem to be part of section.blocks, so the problem is higher up the chain that this.

I don’t have permissions to view Markets on the store. There’s no indication of multiple markets being set up but maybe that’s due to my permissions. I’ll contact the merchant about it though.

There’s only a small number of apps on the store and none seem to be performance optimizers.

4

No idea then what’s going on, please do update here once you find the root cause. Interesting issue

5

Yeah, super weird.

I put this code into main-product.liquid

{{ section.blocks.size }} blocks in this section
{% for block in section.blocks %}
  - {{ block.type }} / {{ block.id }}<br>
{% endfor %}

Then when I view the product in the theme customizer, I see:

4 blocks in this section
- title / title
- description / description_Uz74Dr
- price / price
- @app / APUK3VSZJaERLbk82d__my_app_widget_name_BTEx7Q

When I go to the product page on the live site, I see:

3 blocks in this section
- title / title
- description / description_Uz74Dr
- price / price
6

Ok so I think it’s definitely related to markets. But still seeing some odd behaviour.

So first off, I installed a fresh copy of Dawn, added the app block. Everything is fine.

Installed a fresh copy of Craft (another free theme), added the app block. Everything is fine.

I compared the theme files between the live theme (based on Dawn) and the fresh copy of Dawn. I discovered the live theme had this file: sections/header-group.context.nl.json

This was the contents:

{
  "parent": "header-group.json",
  "context": {
    "market": "nl"
  },
  "sections": {
    "announcement-bar": {
      "settings": {},
      "blocks": {},
      "block_order": []
    }
  }
}

When I added this file to the fresh copy of Dawn, I saw the same behaviour as the live theme, the app block disappeared.

So then, I went to the live theme and modified the file. I updated it to:

{
  "parent": "header-group.json",
  "context": {
    "market": "nl"
  }
}

This fixed it! The live theme started showing the app block.

Just to make sure, I reverted the file to it’s original contents. The live theme stopped showing the app block.

The problem now is that now I can’t fix it again. Removing the sections from the file again does not fix it.

I even went back to the fresh copy of Dawn, edited and also tried deleting the file, and it too stayed broken.

What is going on and how can I repair this theme? It’s feeling like the best option is to start with a fresh Dawn again and build up the theme from scratch to where the current theme is at.

Thanks in advance

7

Hey @gunner :waving_hand:

Is the merchant running any additional customization implementations in Liquid or through theme extensions? That would usually be the first thing we’d recommend checking like @Gulam_Hussain_Quinn mentioned there.

Usually those header-group files are been created as part of a migration to section groups from static sections, so I’m wondering if there are additional scripts running that might affect your app block there: Migrate static sections to section groups

If you can confirm that there aren’t any other extensions/scripts that might be affecting the theme, just ping me here and we can keep digging into this over DM (since we’ll likely be dealing with some merchant-specific data). Let me know if I can help out further :slight_smile:

8

Hey @Alan_G

It’s a pretty new store and when I compare the full theme files against a fresh copy of Dawn there isn’t a huge number of differences. I’d be surprised if there was any migration from static sections.

I’ll DM you now with more details!

Thanks

9

Hi @gunner

We had a similar issue recently with our app. If the theme has an incorrect config/markets.json file, this can cause your app block to no longer return in section.blocks. We also had to delete any .context.json files from the theme.

The incorrect file looks like this:

/*
 * ------------------------------------------------------------
 * IMPORTANT: The contents of this file are auto-generated.
 *
 * This file may be updated by the Shopify admin theme editor
 * or related systems. Please exercise caution as any changes
 * made to this file may be overwritten.
 * ------------------------------------------------------------
 */
{
  "markets": {
    "de": {
      "parent": "@default"
    }
  }
}

The merchant didn’t mention enabling markets (weren’t even aware they had).

Our understanding is, if markets are created and then all removed. It leaves this incorrect markets.json file and this causes the block not to display.

We troubleshooted everything under the sun for the product template, json, view page source wasn’t outputting the block. Thats when I realised I always say, if it works in the theme editor but not on the live store - its markets related.

I really hope this helps, we have come across it twice now and will try to narrow down its cause to report it to Shopify.

Thanks
Gabbie

5 Likes
10

Thank you @Gabrielle_Rea

Appreciate you adding to this so I (and Shopify) know it’s not a one-off case (or just me going crazy).

@Alan_G actually helped me out and ran something on the backend which seemed to sort out the issue - something to do with clearing the store’s frontend cache. I don’t know if that’s a temporary fix or a permanent one, but the store has been running fine since last week.

The store still has a markets.json file:

{
  "markets": {
    "nl": {
      "parent": "@default"
    }
  }
}

and a sections/header-group-context.nl.json file:

{
  "parent": "header-group.json",
  "context": {
    "market": "nl"
  },
  "sections": {
    "announcement-bar": {
      "settings": {},
      "blocks": {},
      "block_order": []
    }
  }
}

It also has a footer-group.context.nl.json file now, which definitely was not there before.

{
  "parent": "footer-group.json",
  "context": {
    "market": "nl"
  },
  "sections": {}
}
11

Hey @gunner I’m glad to hear you were able to resolve it with @Alan_G (I hear he is an absolute legend on this forum). I am very curious what causes these files to appear and why its bugging out with app blocks.

@Alan_G Is it possible we forced a clearing of the stores cache by deleting the files in the theme? (our customers store wasn’t using markets so we were safe to delete these files). The files were also added to every single theme on their store (dev themes and live theme), making it impossible for a quick revert to a working theme.

Just hoping to get a better understanding of the issue so we have confidence facing it in the future. Avoiding it all together would be preferred, as one of the merchants that experienced this was using our app for all purchases on their store, and the app block suddenly not rendering lead to a loss of sales.

Thanks
Gabbie

12

Hey @Gabrielle_Rea , happy to help! It’s definitely plausible that deleting those market files from the theme helped trigger a refresh of the store’s frontend cache, which could be why the app block started working again for your customer.

While I can’t be 100% certain about that specific past instance, modifying theme assets often does have that effect.

We can also trigger a direct frontend cache clear from our end, which often helps resolve these kinds of tricky display discrepancies, so it’s a step we can try if similar issues pop up in the future! Hope this helps!

13

I had the same issue for one of my app users. The fix by Gabbie works well. Just delete the context.[locale].json files and the markets.json file. The app blocks can render again.

This issue has been a headache for a day. Thanks for your information!

14

Hey @Alan_G thanks for the quick response.

We just had this happen on a 3rd store, and confirming the fix we mentioned above where we delete .context.json files and reset markets.json resolves the issue.

Is it possible to DM you the 3 stores so we can investigate what is causing this new bug with app blocks? I’m not sure if you can retroactively investigate the cause or find similarities between the store. We can also send you screenshots of the fixes we did to the stores if thats helpful.

Thanks
Gabbie

15

Can confirm this happened on my development store yesterday as well. No settings related to markets had been touched. Removing the context files resolved this issue.

16

Thanks folks for the updates on this - definitely can look into this further. @Gabrielle_Rea - I’ll DM you in just a moment here!

17

@Alan_G I’ve seen this issue on 2 app customers in the last 3 days. Deleting the markets.json and context solves it. Merchants are not using/are aware of markets. Is this a bug? If so, what would be the best way to report it?

18

I had the same issue on a merchant’s store, found a .context.us.json file that when removed solved the issue.