Customizable fragments customizable-fragments

When fragments are used in an email or email template, they are locked by default due to inheritance, meaning any changes made to a fragment are automatically propagated to all assets where it is used. With customizable fragments, specific fields within a fragment can be defined as editable when the fragment is added to an email or email template. For example, if you have a fragment with a banner, some text, and a button, you can designate certain fields, such as the image or button target URL, as editable.

Customizable fragments let you manage and personalize content without creating entirely new content blocks or disrupting fragment inheritance. Changes made at the fragment level are still propagated, while allowing for customization at the email or email template level.

Both visual and expression fragments can be marked as customizable.

Add editable fields in visual fragments visual

To make portions of a visual fragment editable, follow these steps:

After adding the fragment to an email, users can customize all the editable fields configured in the fragment.

Editable HTML components in fragments editable-html

Within an HTML component, the following types of elements can be made editable:

Each parameterized CSS property value must be exactly {{{varName}}}: no suffixes, no additional text, no multiple variables, and no concatenation within a single property.

To parameterize multi-side properties such as padding, either:

How editable fields work in HTML components components

Editable fields in an HTML component are created by declaring inline variables directly inside the source code of the component. Each variable has a unique ID and a default value. The variable is then referenced wherever the editable value should appear in the markup.

Once the fragment is saved and published, every variable declared in the HTML component is automatically surfaced as an editable parameter when the fragment is added to an email.

The email author can then override the default value of any variable from the Email Designer (for example, changing a background color, swapping a CTA URL, or updating a headline) without modifying the underlying HTML.

Syntax reference syntax

Editable fields are defined and referenced using two patterns:

Declaring a variable declaring

Use the inline declaration to define a variable with a unique ID and a default value:

{{#inline "variableID"}}default_value{{/inline}}

Replace variableID with a unique identifier for the editable field. The ID must be unique within the component and must not contain spaces.

Replace default_value with the value that should be used if the email author does not override it.

Referencing a variable referencing

Use triple curly braces to reference the variable wherever its value should appear in the markup:

{{{variableID}}}

The same variable ID can be referenced any number of times within the HTML. All references will resolve to whatever value the email author sets (or to the default value if no override is provided).

Optional parameters optional

The inline declaration supports optional parameters that change how the editable field is presented or processed:

Adding editable fields to an HTML component adding-editable-fields

To make portions of an HTML component within a visual fragment editable, follow these steps:

Using the fragment in an email using-fragment

After the fragment has been published, all variables declared in its HTML components are surfaced as editable parameters in the Email Designer.

To customize them when using the fragment in an email:

The fragment renders with the customized values, while still inheriting any future structural updates made to the published fragment.

Example: simple fragment with editable text, color, and URL example

The following example creates a small promotional banner with four editable fields:

After publishing the fragment, an email author can override any of these values when adding the fragment to an email.

Simple editable banner

<!-- Define editable variables -->
{{#inline "bgColor"}}#0057FF{{/inline}}
{{#inline "headlineText"}}Example Headline{{/inline}}
{{#inline "ctaText"}}Learn More{{/inline}}
{{#inline "ctaUrl" assetType="url"}}https://www.example.com{{/inline}}

<!-- Use the variables in the HTML -->
<table width="100%" cellpadding="0" cellspacing="0"
       style="background-color:{{{bgColor}}}; border-radius:8px;" >
  <tr>
    <td style="padding:30px; text-align:center; font-family:Arial,sans-serif;">
      <h2 style="color:#ffffff; font-size:24px; margin:0;">
        {{{headlineText}}}
      </h2>
      <a href="{{{ctaUrl}}}"
         style="display:inline-block; margin-top:16px; padding:12px 28px;
                background:#ffffff; color:{{{bgColor}}};
                font-weight:bold; border-radius:4px; text-decoration:none;">
        {{{ctaText}}}
      </a>
    </td>
  </tr>
</table>

In this example:

Best practices best-practices

Things to know things-to-know