Data Fields
"Data for EDL" is a list of typed fields attached to the block. Each entry has a key (the name it's accessed by) and a type (what kind of value it holds and what editor the settings panel shows for it). Whatever the type, the resolved value always ends up available in your layout.edl markup as {data.<key>}.
For the resource types (Product, Collection, Metafields, ...) the platform resolves the actual Shopify data server-side before making it available under that same key - your markup never needs to fetch it itself.
Simple value types
| Type | Editor | Value at data.<key> |
|---|---|---|
| Text | Single-line text input | A string. Automatically translatable per storefront locale. |
| Long Text | Multi-line text input | A string. Automatically translatable per storefront locale. |
| Image | Image picker | An image object/URL, usable directly as an <Image>'s src. |
| Action | Action picker | An app action - pass straight to an action prop, e.g. <Actionable action={data.action}>. |
| Date and time | Date/time picker | A date-time value. |
| Icon | Icon picker | An icon identifier string, e.g. "material-community-icons:cart-plus". |
Shopify resource types
| Type | Editor | Value at data.<key> |
|---|---|---|
| Product | Product picker (or leave blank to use the active product, only on a product details page) | The resolved Shopify product. |
| Collection | Collection picker (or leave blank to use the active collection, only on a collection details page) | The resolved Shopify collection. |
| Product Metafields | Product picker + a list of namespace/key metafield identifiers | The resolved metafield values for that product. |
| Collection Metafields | Collection picker + a list of namespace/key metafield identifiers | The resolved metafield values for that collection. |
| User Metafields | A list of namespace/key metafield identifiers (always the logged-in customer) | The resolved metafield values for the current customer. |
For the metafield types, each identifier is a { namespace, key } pair - add one row per metafield you want available.
Example
Data for EDL
[
{ "key": "title", "type": "text", "value": "Custom block" },
{ "key": "description", "type": "longtext", "value": "This is a custom block" }
]
layout.edl
<Box p="md">
<Text fontWeight="bold" fontSize="3xl" content={data.title} />
<Text mt="4xs" color="gray-900" content={data.description} />
</Box>
This is the default starting point for a new "Custom block (EDL)" section.