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.
Topic summary
Purpose of block.shopify_attributes:
This Liquid object adds data attributes to HTML elements that enable the Shopify theme editor’s JavaScript API to identify and interact with blocks.
Key functionality:
- Allows blocks to be clickable, draggable, and editable directly within the theme customizer
- Enables the popup toolbar that appears when hovering over blocks in the editor
- Required for proper block interaction in custom sections
Implementation:
Add {{ block.shopify_attributes }} to the HTML element wrapping each block in your section code. Reference examples can be found in Shopify’s Dawn theme (specifically the collection-list.liquid section).
Documentation:
Official documentation is available at shopify.dev/docs/api/liquid/objects/block#block-shopify_attributes, though community members note it lacks detailed explanation of the visual editing capabilities it enables.
The discussion includes a helpful screenshot demonstrating the interactive toolbar functionality that appears when this attribute is properly implemented.
2 Likes
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-theme-templates-with-sections-and-blocks
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.
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.
6 Likes
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
3 Likes
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.