EDL Custom Blocks

"Custom block (EDL)" is a section you can add anywhere a normal section goes in the page builder. Instead of picking from the built-in section library, you write your own layout directly in EDL markup, plus a list of merchant-configurable data fields that markup can read.

It's a single, general-purpose block - not tied to a fixed role like a header or a product card. Use it for one-off layouts (a banner, a custom promo, a rich content block) built with the same declarative <Component :if={} :forEach={}> + <Script> syntax as the rest of EDL.

The two parts

Adding a "Custom block (EDL)" section gives you two things to configure:

1. Layout - an EDL code editor (layout.edl) where you write the block's markup, exactly like any other EDL page/section.
2. Data for EDL - a list of typed data fields. Each one gets a key, and becomes available in your layout markup as {data.<key>} - see Data Fields for the full list of field types.

There's no data prop passed in from outside and no code to import - everything the block needs is either written directly into the EDL markup or configured as a data field.

Example

layout.edl

<Box
  justifyContent="center"
  paddingY={20}
  paddingX={20}
>
  <Text
    textAlign="center"
    fontSize="lg"
    marginBottom={10}
    fontWeight="600"
    content={data.header}
  />
  <Text
    marginBottom={10}
    textAlign="center"
    content={data.description}
  />
  <Flexbox alignItems="center" justifyContent="center">
    <Flexbox backgroundColor="#980203" borderRadius={10} maxWidth={150}>
      <Actionable paddingX={20} paddingY={10} action={data.action}>
        <Text fontSize="xs" color="white" content={data.buttonTitle} />
      </Actionable>
    </Flexbox>
  </Flexbox>
</Box>

With a "Data for EDL" configuration of:

Key	Type	Value
header	Text	"Winter sale"
description	Long Text	"Get ready for the exciting Winter Sale event! ..."
action	Action	Go to all products
buttonTitle	Text	"View products"

This renders a centered banner with a heading, description, and a button that navigates using whatever action the merchant picked - all four values (data.header, data.description, data.action, data.buttonTitle) are editable from the settings panel without touching the markup.

Where to go next

• Data Fields - every data field type you can add, and what shape its value takes in data.<key>
• Language Reference - the full EDL markup language: components, styled-system props, control flow (:if/:forEach), <Script>, state management, and data sources