Tässä ohjeessa opit, miten AI Commerce ‑alustalla sähköpostien Header- ja Footer‑osat voidaan mukauttaa Hallintapaneelissa ilman koodimuutoksia. Hyötynä saat yhtenäisen brändi-ilmeen kaikkiin automaatiosähköposteihin (logo, värit, typografia, yhteystiedot) sekä nopeat päivitykset domain-kohtaisesti. Ominaisuus on lisäksi turvallinen: jos pohja on tyhjä tai teknisesti virheellinen, järjestelmä käyttää automaattisesti oletuspohjaa, jotta sähköpostit lähtevät aina.

Mitä ominaisuus tekee?

AI Commerce ‑alustalla sähköpostien ulkoasu koostuu kolmesta osasta:

1. Header (yläosa / kehys)
2. Sisältö (viestin varsinainen teksti – tarjous, muistutus, tilannetieto jne.)
3. Footer (alaosa / yhteystiedot, linkit, brändi)

Tällä ominaisuudella voit muokata Header- ja Footer-osia Hallintapaneelissa. Itse sähköpostin sisältö (body) pysyy tässä vaiheessa ennallaan.

Ominaisuus on valinnainen: jos Header/Footer jätetään tyhjäksi tai “tyhjän oloiseksi”, AI Commerce käyttää automaattisesti nykyisiä oletuspohjia.

Hyödyt ylläpidolle (admin)

Yhtenäinen brändi kaikissa viesteissä

Kun Header ja Footer ovat keskitetysti muokattavia, sähköpostit näyttävät saman brändin mukaisilta (logo, värit, typografia, yhteystiedot) riippumatta siitä, mistä automaatiosta viesti lähtee.

Nopeat päivitykset ilman kehitystyötä

Yhteystiedot, some-linkit, brändiväri, slogan tai alatunnisteen tekstit voidaan päivittää Hallintapaneelissa ja ne tulevat voimaan ilman, että jokaista sähköpostityyppiä muokataan erikseen.

Maa-/domain‑kohtainen hallinta

Jos sinulla on useita verkkokaupan domaineja (esim. eri maat), voit tehdä eri Header/Footer‑pohjat per domain – ja silti hyödyntää samoja automaatiosähköposteja.

Turvallinen käyttöönotto

• Jos mukautettu pohja on tyhjä → käytetään oletuspohjaa.
• Jos pohjassa on tekninen virhe (esim. Twig‑syntaksi) → käytetään oletuspohjaa, jotta sähköpostit lähtevät aina.

Mistä editoidaan: “Email Templates”

Hallintapaneelissa ominaisuus näkyy sivuna “Email Templates”. Valikkopolku riippuu teidän Hallintapaneelin rakenteesta; tyypillisesti se löytyy esimerkiksi polusta “Tools” → “Email Templates”.

Sivulla valitaan yleensä:

• Domain (mille maalle / verkkotunnukselle pohja tehdään)
• Header HTML
• Footer HTML
• Save

Huom: Hallintapaneelin otsikot ja painikkeet ovat englanniksi, mutta ohjetekstit ja toiminnallisuuden kuvaus ovat tässä artikkelissa suomeksi.

Miten domain- ja kielivalinta toimii?

AI Commerce valitsee käytettävän Header/Footer‑pohjan automaattisesti vastaanottajan mukaan:

• Vastaanottajan maa → ohjaa oikeaan domainiin
• Domainiin liittyy oletuksena oikea kieli
• Sähköpostin käännökset tulevat automaattisesti vastaanottajan kielen mukaan (sama logiikka kuin nykyisissä sähköposteissa)

Sinun tehtäväksi jää vain:

• ylläpitää domain‑kohtainen Header/Footer (jos haluat eri ulkoasun eri maille),
• tai jättää kaikki tyhjäksi ja käyttää oletusta.

Käyttöönotto Hallintapaneelissa (admin‑tasolla)

1. Avaa Hallintapaneeli
2. Mene sivulle “Email Templates”
3. Valitse Domain (esim. Suomi vs Ruotsi tms.)
4. Muokkaa Header HTML ja/tai Footer HTML
5. Paina “Save”

Palautus oletukseen

• Tyhjennä Header/Footer‑kentän sisältö ja paina Save → AI Commerce palaa automaattisesti oletuspohjaan.

Tärkeä huomio: Header ja Footer ovat “kehys”

Header aloittaa sähköpostin rakenteen ja Footer sulkee sen. Kun mukautat näitä:

• Pidä HTML‑rakenne ehjänä (avaavat ja sulkevat tagit täsmäävät).
• Käytä sähköposteihin sopivaa HTML:ää (taulukot ja inline‑tyylit ovat edelleen yleisin tapa varmistaa yhteensopivuus eri sähköpostiohjelmissa).

Kumppaneille / tekninen osio: Twig sähköpostipohjissa

Tämä osio on tarkoitettu kumppaneille ja teknisille tekijöille, jotka rakentavat Header/Footer‑pohjia ylläpidon puolesta.

Miksi Twig?

Vaikka muokkaus tehdään WYSIWYG‑editorilla, AI Commerce voi renderöidä pohjan lähetysvaiheessa Twigillä. Tämä mahdollistaa esimerkiksi:

• logon ja kaupan tietojen tulostamisen dynaamisesti,
• käännöstekstien käytön (translations) ilman, että jokaiselle kielelle tarvitsee kirjoittaa kaikki teksti käsin.

Tärkeää: WYSIWYG‑editori ei “aja” Twig‑koodia esikatselussa – Twig korvautuu arvoilla vasta sähköpostia lähetettäessä.

Käytettävissä olevat muuttujat

logo

• Tyyppi: merkkijono (URL)
• Sisältö: kaupan “light”‑logon URL, jota voi käyttää <img src="...">

Esimerkki:

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

store

• Tyyppi: olio/assosiatiivinen taulukko
• Avaimet (yleisimmät):
• 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

• Tyyppi: avain–arvo‑lista (string → string)
• Sisältö: sähköposteissa käytettävät käännökset vastaanottajan kielellä.

Esimerkki:

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

Huom: käytettävissä olevat avaimet riippuvat teidän käännösdatasta. Helpoin tapa on hyödyntää samoja avaimia, joita AI Commerce käyttää nykyisissä sähköposteissa.

Twig‑pikaopas (minimi)

Tulostus

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

Ehto

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

Yksinkertainen toisto

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

Esimerkki: yksinkertainen Footer‑lohko (yhteystiedot)

Tämä on tarkoituksella yksinkertainen ja sähköpostiklienteille “turvallinen”:

<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>

Käytännön vinkit (kumppaneille)

• Suosi inline‑tyylejä (style="") ja taulukkorakennetta (email‑yhteensopivuus).
• Vältä ulkoisia CSS‑tiedostoja ja JavaScriptiä (useimmat sähköpostiohjelmat estävät ne).
• Pidä rakenne selkeänä: Header aloittaa “kehykset”, Footer sulkee ne.
• Jos Twig‑koodi on epäkelpo, AI Commerce käyttää oletuspohjaa – mutta on silti järkevää testata pohja ennen tuotantokäyttöä.

Rajoitukset (MVP)

• Tässä vaiheessa muokataan vain Header ja Footer.
• Sähköpostien varsinainen sisältö (body) pysyy nykyisessä muodossaan.
• Kaikkia järjestelmän lähettämiä viestejä voidaan liittää tähän myöhemmin, mutta MVP:ssä muutos kohdistuu niihin sähköposteihin, jotka käyttävät AI Commerce ‑pohjakehystä (Header/Footer).

Sanasto

• AI Commerce: Verkkokauppa-alusta, jossa sähköpostien Header/Footer voidaan hallita keskitetysti.
• Hallintapaneeli: Ylläpidon käyttöliittymä, jossa “Email Templates” ‑sivu ja muut asetukset sijaitsevat.
• Akeneo: PIM-järjestelmä, joka voi olla osa verkkokaupan kokonaisuutta (terminä mukana sanastoa varten).
• Builderio: Sisällönhallinnan/visual editor ‑työkalu, joka voi olla osa kokonaisuutta (terminä mukana sanastoa varten).

Yhteenveto ja suositeltu seuraava toimenpide

Ota “Email Templates” käyttöön muokkaamalla domain-kohtaisesti Header HTML ja Footer HTML Hallintapaneelissa, tai jätä kentät tyhjiksi käyttääksesi oletuspohjaa. Jos hyödynnät Twig‑muuttujia, varmista että rakenne ja syntaksi ovat kunnossa, jotta ulkoasu renderöityy oikein lähetysvaiheessa.

Avainsanat

• AI Commerce email templates
• Email Templates
• Header HTML
• Footer HTML
• domain-kohtainen sähköpostipohja
• Twig sähköpostipohja
• translations muuttujat
• logo ja store-muuttujat
• sähköposti oletuspohja