I’m encountering a casing inconsistency when rendering blocks in Shopify — specifically when using group blocks that include nested blocks and define a class in the schema.
Shopify automatically wraps each block in a div with the ID pattern:
<div id="shopify-block-{{ block.id }}">
But when using this pattern manually for targeting (#shopify-block-{{ block.id }}), it fails because Shopify’s rendered HTML uses different casing than the block.id output in Liquid.
Example :
Shopify-rendered HTML:
<div id="shopify-block-AQ1RTbndkTUVyTGxsd__group_jK4z7b">
But in Liquid when I do “#shopify-block-{{ block.id }}” :
#shopify-block-aq1rtbndktuvytgxsd__group_jk4z7b
This means document.querySelector('#shopify-block-{{ block.id }}') fails and the css styling by targiting the {{block.id}} too .
this issue happened when I added class to my group block in its schema