What is block.shopify_attributes used for in website sections?

[TheThisThat]

What does this do and when should I be using it in my sections? Is it just whenever I call a block in my html? I've read the doc and still don't understand what it exactly does and when and why it is needed.

[LitExtension · Accepted solution]

Hi @TheThisThat ,

It helps to display block in file section. Refer https://help.shopify.com/en/manual/online-store/themes/os20/theme-structure/sections/#customize-your... 
You can refer to this code, it will show blocks when declaring schema, ex: https://github.com/Shopify/dawn/blob/main/sections/collection-list.liquid 
https://i.imgur.com/sYe3MD5.png 
Hope it clear to you.

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

[LitExtension · Accepted solution]

Hi @TheThisThat ,

It helps to display block in file section. Refer https://help.shopify.com/en/manual/online-store/themes/os20/theme-structure/sections/#customize-your... 
You can refer to this code, it will show blocks when declaring schema, ex: https://github.com/Shopify/dawn/blob/main/sections/collection-list.liquid 
https://i.imgur.com/sYe3MD5.png 
Hope it clear to you.

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

[james_tm · Accepted solution]

Hey @TheThisThat,

The accepted solution here didn't really seem to clear things up, so I did a little digging myself.

This article states:

We'll also use the block.shopify_attributes to add data attributes to the element. The theme editor's JavaScript API uses a block's shopify_attributes to identify blocks and listen for events. 

[aubreytayloracn]

For anyone who lands here in 2023, the answer to this question is documented here: https://shopify.dev/docs/api/liquid/objects/block#block-shopify_attributes

[crunchycactus]

Although these answers are correct, Shopify docs don't really explain it well. Here is an image of the functionality it adds.

Hovering blocks in your custom section with the {{block.shopify_attributes}} allows you to click, drag, and interact with the popup tool bar.