In this guide, you will learn how to customize the Header and Footer sections of emails in AI Commerce platform in the Control Panel without any code changes. The benefit is a consistent brand look for all automation emails (logo, colors, typography, contact information) and quick updates per domain. The feature is also safe: if the template is empty or technically incorrect, the system automatically uses the default template so that emails always go out.

What does the feature do?

In AI Commerce platform, the layout of emails consists of three parts:

1. Header (top / frame)
2. Content (the actual text of the message – offer, reminder, status information, etc.)
3. Footer (bottom section / contact information, links, brand)

This feature allows you to edit the Header and Footer sections in the Control Panel. The email body itself remains unchanged at this stage.

The feature is optional: if Header/Footer is left blank or “empty”, AI Commerce will automatically use the current default templates.

Benefits for maintenance (admin)

Consistent branding across all messages

When the Header and Footer are centrally editable, emails look consistent with the same brand (logo, colors, typography, contact information) regardless of which automation the message originates from.

Fast updates without development work

Contact information, social media links, brand color, slogan, or footer text can be updated in the Control Panel and will take effect without having to edit each email type separately.

Country/domain specific management

If you have multiple e-commerce domains (e.g. different countries), you can create different Header/Footer templates per domain – and still use the same automation emails.

Safe commissioning

• If the custom template is empty → the default template is used.
• If there is a technical error in the template (e.g. Twig syntax) → the default template is used so that emails always go out.

Where to edit: “Email Templates”

In the control panel, the feature appears as the “Email Templates” page. The menu path depends on the structure of your control panel; typically it is found, for example, in the path “Tools” → “Email Templates” .

The page usually selects:

• Domain (which country/domain the base is made for)
• Header HTML
• Footer HTML
• Clay

Note: The titles and buttons in the control panel are in English, but the help texts and functionality descriptions in this article are in Finnish.

How does domain and language selection work?

AI Commerce automatically selects the Header/Footer template to use based on the recipient:

• Recipient country → redirects to the correct domain
• The domain is associated with the correct language by default.
• Email translations are automatically generated based on the recipient's language (same logic as in current emails)

All you have to do is:

• maintain a domain-specific Header/Footer (if you want a different look for different countries),
• or leave everything blank and use the default.

Deployment in the Control Panel (admin level)

1. Open Control Panel
2. Go to the “Email Templates” page
3. Select Domain (e.g. Finland vs Sweden etc.)
4. Edit Header HTML and/or Footer HTML
5. Press “Save”

Reset to default

• Clear the contents of the Header/Footer field and press Save → AI Commerce will automatically return to the default template.

Important note: Header and Footer are a “frame”

The Header starts the email structure and the Footer closes it. When you customize these:

• Keep the HTML structure intact (opening and closing tags match).
• Use email-friendly HTML (tables and inline styles are still the most common way to ensure compatibility across email clients).

For partners / technical section: Twig in email templates

This section is intended for partners and technical contributors who build Header/Footer templates on behalf of maintenance.

Why Twig?

Although editing is done with a WYSIWYG editor, AI Commerce can render the template with Twig during the submission phase. This allows for, for example:

• dynamically printing logo and store information,
• the use of translations without having to manually type all the text for each language.

Important: The WYSIWYG editor does not “run” Twig code in the preview – Twig is only replaced with values when the email is sent.

Available variables

logo

• Type: string (URL)
• Content: URL of the store's “light” logo, which can be used <img src="...">

Example:

<img src="{{ logo }}" alt="{{ store.storeName }}"> 

store

• Type: object/associative array
• Keys (most common):
• store.storeName
• store.mainColor
• store.ownerEmail
• store.ownerName
• store.telephone
• store.streetAddress
• store.postNumber
• store.city
• store.httpsServer
• store.facebook
• store.instagram
• store.linkedin
• store.pinterest
• store.tiktok
• store.youtube

translations

• Type: key-value list (string → string)
• Content: translations used in emails in the recipient's language.

Example:

<h3>{{ translations['TEXT_EMAIL_TEMPALTE_2'] }}</h3> 

Note: the keys available depend on your translation data. The easiest way is to use the same keys that AI Commerce uses in existing emails.

Twig Quick Start (Minimal)

Output

{{ store.storeName }} {{ translations['SOME_KEY'] }} 

Condition

{% if store.instagram %} <a href="https://instagram.com/{{ store.instagram }}">Instagram</a> {% endif %} 

Simple playback

{% for key, value in translations %} {# Debug / listaus tarpeen mukaan #} {% endfor %} 

Example: Simple Footer Block (Contact Information)

This is intentionally simple and “safe” for email clients:

<table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="font-family: Arial, sans-serif; font-size: 12px; line-height: 16px;"> <p style="margin:0 0 10px 0;"> <img src="{{ logo }}" alt="{{ store.storeName }}" style="max-width:185px; height:auto; border:0;"> </p>
  <p style="margin:0;">
    {{ store.streetAddress }}, {{ store.postNumber }} {{ store.city }}
  </p>

  <p style="margin:10px 0 0 0;">
    <a href="mailto:{{ store.ownerEmail }}">{{ store.ownerEmail }}</a><br>
    <a href="tel:{{ store.telephone }}">{{ store.telephone }}</a>
  </p>
</td>

Practical tips (for partners)

• Favor inline styles ( style="" ) and table structure (email compatibility).
• Avoid external CSS files and JavaScript (most email clients block them).
• Keep the structure clear: Header starts the “frames”, Footer closes them.
• If the Twig code is invalid, AI Commerce will use the default template – but it is still a good idea to test the template before using it in production.

Limitations (MVP)

• At this point, we will only edit the Header and Footer .
• The actual content (body) of the emails will remain in its current form.
• All messages sent by the system can be attached here later, but in MVP the change will apply to emails that use AI Commerce framework (Header/Footer).

Glossary

• AI Commerce : An e-commerce platform where email Header/Footer can be centrally managed.
• Dashboard: The administrative interface where the “Email Templates” page and other settings are located.
• Akeneo: A PIM system that can be part of an online store (included as a term for glossary purposes).
• Builderio: A content management/visual editor tool that can be part of a whole (included as a term for glossary purposes).

Summary and recommended next action

Enable “Email Templates” by editing the Header HTML and Footer HTML for each domain in the Control Panel, or leave the fields blank to use the default template. If you are using Twig variables, make sure the structure and syntax are correct so that the layout renders correctly when sent.

Keywords

• AI Commerce email templates
• Email Templates
• Header HTML
• Footer HTML
• domain-specific email template
• Twig email template
• variables
• logo and store variables
• email default template