Customize a template

Last update: March 28, 2025

CREATED FOR:

Intermediate
Developer

You can customize a template for use in GenStudio for Performance Marketing by inserting content placeholders, or fields, that the generative AI uses to insert content.

The next few sections explain how to adapt your HTML templates for GenStudio for Performance Marketing by using the Handlebars templating language. The Handlebars syntax uses regular text with double braces as content placeholders. See What is Handlebars in the Handlebars language guide to learn how to prepare your template.

Once your template is ready, you can upload it to GenStudio for Performance Marketing and start generating personalized emails based on your custom template.

TIP

Follow accessibility guidelines and best practices so that you can reach more of your audience and provide an optimal experience.

Content placeholders

GenStudio for Performance Marketing recognizes certain elements within a template, but only if you identify them with a recognized field name.

Within the head or body of an HTML template, you can use the Handlebars syntax to insert a content placeholder where you require GenStudio for Performance Marketing to populate the template with actual content. GenStudio for Performance Marketing recognizes and interprets the content placeholders based on the recognized field name.

For example, you can use {{ headline }} with the Handlebars syntax to indicate where the headline of the email should be placed. GenStudio recognizes this field, generates a relevant headline based on your guidelines and prompt criteria, and inserts the headline in this location:

<div>{{ headline }}</div>

Recognized field names

The following table lists the field names recognized by GenStudio for Performance Marketing for adding a placeholder into a template. Add these field names using the Handlebars syntax to your template where you need GenStudio for Performance Marketing to generate a certain type of content.

Field	Role	Channel template
`{{pre_header}}`	Preheader	email
`{{headline}}`	Headline	email Meta ad Banner and Display ad LinkedIn ad
`{{introductory_text}}`	Introductory text	LinkedIn ad
`{{body}}`	Body copy	email Meta ad Banner and Display ad
`{{cta}}`	Call to action See Calls to action	email Meta ad Banner and Display ad LinkedIn ad
`{{image}}`	Image—select from Content	email Meta ad Banner and Display ad LinkedIn ad
`{{on_image_text}}`	On image text See On image text.	Meta ad LinkedIn ad
`{{link}}`	Call to action on image See Link on image.	email

GenStudio for Performance Marketing generates certain fields automatically in the following templates:

Email template does not require you to identify the subject field
Meta ad template does not require you to identify the headline, body, and CTA fields
Banner and Display ad template does not require you to identify the CTA field
LinkedIn ad template does not require you to identify the headline, introductory_text, and CTA fields

WARNING

For Instagram ads, the generated headline does not appear in the final experience.

There is a limit of 20 fields when uploading a template to GenStudio for Performance Marketing. Since the subject field is automatically generated in an email, it counts as one field. This means that there are 19 fields allowed in an email template.

TIP

You can verify your template using the template preview in GenStudio for Performance Marketing.

Calls to action

A Call to action (CTA) includes a phrase and a link. For the Rephrase and Add link capabilities to work properly during the variant generation process, you must include placeholders for the link and the phrase in your template.

Use the following guidance to set up CTA placeholders:

CTA rephrase is available and link is editable

<a class="button" href="{{pod1_link}}" >{{cta}}</a>

CTA rephrase is available, but link is not editable because actual link is provided in the template
<a align="center" href="https://link">{{cta}}</a>
CTA link is editable, but rephrase is not available because phrase is provided in the template
<a class="button" href="{{pod1_link}}" >Register now</a>

GenStudio for Performance Marketing can provide variant calls-to-action phrases, too. See Revise Call to action.

Link on image

You can customize your email template to allow creatives to add a link to an image. Similar to the CTA link, use the following guidance to apply a link placeholder to an image tag:

<a href="{{link}}"><img src="image-source.jpg" alt="description"></a>

In this example:

{{link}} is a placeholder for the actual URL.
src="image-source.jpg" should be replaced with the actual image source URL.
alt="description" provides an alternative text for the image, which is useful for accessibility and SEO.

Manual field names

All other field names are treated as manually populated fields. For example, you may want to reserve a section for footer content.

To create an editable section, add double brackets around the section name:

<tbody>
    <tr>
        <td>
            <p><span class="footer-text">{{ footerLegal }}</span></p>
        </td>
    </tr>
</tbody>

On image text

The {{ on_image_text }} placeholder is used to specify a text overlay of short impactful messages, placed directly on the image in an experience.

<div class="image-text">{{ on_image_text }}</div>

Sections or groups

Sections inform GenStudio for Performance Marketing that the fields in this section require a high degree of coherence. Establishing this relationship helps the AI to generate content that matches the creative elements in the section.

Use a prefix of your choice in the field name to indicate that a field is part of a section or group. Use a field name (headline, body, image, or cta) after the underscore (_).

Correct (👍): pod1_body
Incorrect (❌): pod1_link

Each section can use only one of each field type. For example, the following fields belong to the pod1 section:

pod1_headline
pod1_body
pod1_image
pod1_cta

Because of this rule, the sections cannot be nested.

Each template type, such as email or Meta ad, has channel-specific constraints on the use of sections. See channel-specific guidelines in the Best practices for using templates topic.

For example, an email template can include up to three sections; therefore, you could have three headline and body sections:

pre_header
pod1_headline
pod1_body
pod2_headline
pod2_body
pod3_headline
pod3_body
cta

GenStudio for Performance Marketing understands that pod1_headline is more closely related to pod1_body than to pod2_body.

See Structured prompts to learn how to craft a prompt that generates varying content for each section in a multi-section email.

Template preview

When you upload a template, GenStudio for Performance Marketing scans the HTML file for recognized fields. Use the preview to review your template elements and confirm that you identified them properly with the recognized field names.

Example Preview for an email template:

Preview fields detected

See Template code editor.

Control preview

You can control the visibility of special content by using Built-in Helpers (special expressions in the Handlebars template language that perform certain actions). For example, you can add a conditional statement that adds tracking parameters to links in the exported template while keeping the preview links clean.

The _genStudio.browser value is set when rendering a template, and the genStudio.export value is set when exporting a template. You may decide to include certain content at the top of an email using a conditional wrapper, for example, when the template is used for export:

{{#if _genStudio.export}}
<%@ include view='emailParent' %>
{{/if}}

Another example may be to prevent the use of tracking codes when previewing a template in GenStudio for Performance Marketing. The following example shows how to add tracking parameters to links in the exported template, while keeping the preview links clean:

<a class="button" {{#if _genStudio.browser }}
   href="{{ link }}"{{/if}}{{#if _genStudio.export }}
   href="{{ link }}?trackingid=<%=getTrackingId()%>&mv=email"{{/if}}
   target="_blank">{{ cta }}</a>

Static content

Email and Meta templates often link to images and CSS files hosted on other domains. When GenStudio for Performance Marketing generates thumbnails for template previews or the experiences derived from them, it validates the content source and embeds a copy for preview purposes.

External files are temporarily embedded only for the purpose of creating the template preview, which ensures that the preview accurately reflects the content as it appears at the time of creation. These external files are not stored permanently in GenStudio for Performance Marketing. After the template preview is created, GenStudio for Performance Marketing continues to reference the original source link provided in the template.

Refresh content

If the source changes after creating the initial preview, use the refresh function to update the template preview with the most recent version of the content from the external sources.

Template examples

Example: Email template with one section

The following is a basic example of an HTML template for an email that contains one section. The head contains simple, inline CSS for styling. The body contains a pre_header, headline, and image placeholder for use by GenStudio for Performance Marketing to inject content during the email generation process.

<!DOCTYPE html>
<html>
    <head>
        <title>Adobe</title>
        <style>
            .container {
            width: 100%;
            padding: 20px;
            font-family: Arial, sans-serif;
            }
        </style>
    </head>
    <body>{{ pre_header }}
        <div class="container">
            <h1>{{ headline }}</h1>
            <p><a href="{{ link }}">
            <img alt="{{ headline }}"
                    src="{{ image }}"
                    width="600" height="600"
                    border="0"/></a></p>
            <p>{{ body }}</p>
        </div>
    </body>
</html>

Example: Email template with multiple sections

The following is the same HTML template in the example above, but with two more sections. The head contains inline CSS for styling a group. The body uses two groups with content placeholders using a prefix.

<!DOCTYPE html>
<html>
    <head>
        <title>Adobe</title>
        <style>
            .container {
            width: 100%;
            padding: 20px;
            font-family: Arial, sans-serif;
            }
            .pod {
            background-color: #f8f8f8;
            margin: 10px;
            padding: 20px;
            border-radius: 5px;
            }
            .pod h2 {
            color: #333;
            }
            .pod p {
                color: #666;
            }
        </style>
    </head>
    <body>{{ pre_header }}
        <div class="container">
            <h1>{{ headline }}</h1>
            <p>{{ body }}</p>
            <!-- Pod1 -->
            <div class="pod">
                <h2>{{ pod1_headline }}</h2>
                <p><img alt="{{ headline }}" src="{{ pod1_image }}" width="200" height="200" border="0"></p>
                <p>{{ pod1_body }}</p>
            </div>
            <!-- End of Pod1 -->
            <!-- Pod2 -->
            <div class="pod">
                <h2>{{ pod2_headline }}</h2>
                <p><img alt="{{ headline }}" src="{{ pod2_image }}" width="200" height="200" border="0"></p>
                <p>{{ pod2_body }}</p>
            </div>
            <!-- End of Pod2 -->
        </div>
    </body>
</html>

Example: Meta ad template

The following is a basic example of a Meta ad template. The head contains inline CSS for styling. The body uses content placeholders, such as image and on_image_text, to indicate where GenStudio for Performance Marketing can generate content.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Adobe</title>
        <style>
            .ad-container {
            font-family: Helvetica, sans-serif;
            position: relative;
            text-align: center;
            height: 100%;
            }
            .ad-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            }
            .ad-text {
            position: absolute;
            top: 0;
            left: 0;
            margin: 1em;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 1em;
            font-size: 75px;
            }
        </style>
    </head>
    <body>
        <div class="ad-container">
            <img src="{{ image }}" alt="Ad Image" class="ad-image" />
            <div class="ad-text">{{ on_image_text }}</div>
        </div>
    </body>
</html>

recommendation-more-help