Personnalisation avancée des modèles d'e-mail- Pour les webmestres expérimentés – Centre d'aide WebSelf Simple

Vous pouvez envoyer des notifications de commande de client, e-mails de marketing, ou notifications de l'administration. Les modèles d'e-mails sont un mélange de code HTML et de code Freemarker. Chaque modèle comporte des clés de message, des variables et des balises qui sont responsables de différentes parties de l'e-mail. Vous pouvez personnaliser n'importe quel modèle en modifiant son code : ajouter ou supprimer du texte, ajouter une image, modifier la taille ou la couleur du texte, etc.

Si vous souhaitez ajouter un logo aux e-mails ou modifier les informations sur l'entreprise, il suffit de modifier les paramètres dans votre boutique sans modifier le code.

Sommaire

Seulement pour les webmestres expérimentés.

Modification de l'objet de l'e-mail de notification des clients

L'objet est le titre que les clients voient lorsqu'ils reçoivent un e-mail. Changer l'objet d'un e-mail vous aidera à personnaliser vos notifications.

Pour modifier l'objet de l'e-mail :

Depuis l'administration de votre boutique, allez à Paramètres → Notifications.
Dans la section Notifications relatives aux commandes envoyées aux clients , ouvrez le modèle d'email que vous voulez modifier.
Dans le champ Objet, supprimez le code, saisissez votre titre et enregistrez les modifications. Dans notre exemple, le nouveau titre est « Voici votre nouvelle commande » :

C'est tout. L'objet de l'e-mail sera à présent celui que vous avez spécifié :

Modifier les salutations des clients dans les e-mails

Par défaut, tous les e-mails aux clients commencent par la formule de salutation « Bonjour Jean Moncher », où « Jean Moncher » est un exemple de nom remplacé par un nom de client réel dans chaque e-mail. Le message d'accueil continue avec les brèves informations concernant l'objet de l'e-mail. Par exemple, dans l'e-mail de confirmation de la commande, la deuxième ligne est « Nous avons reçu votre commande ! Merci pour votre achat ».

Vous pouvez modifier à la fois le message d'accueil lui-même et les lignes suivantes en modifiant les clés rosetta.message de l'e-mail.

Imaginons que vous voulez changer le message d'accueil de la confirmation de la commande en : « Salut Jean Moncher ! Merci pour votre confiance ! Nous avons reçu votre commande. Nous vous contacterons pour confirmer le délai de livraison. »

Pour modifier le message d'accueil d'une notification par e-mail :

depuis l'administration de votre boutique, allez à Paramètres → Notifications.
Cliquez sur Modifier à côté du modèle d'e-mail que vous souhaitez modifier. Dans notre exemple, il s'agit du modèle d'e-mail Confirmation de la commande.
Trouvez la ligne avec la clé du message qui contient la partie « Bonjour » : <@rosetta.message key="OrderConfirmation.customer_greeting" params={ "customerName" : customer.name } /> :
Remplacez tout le texte de cette ligne par votre message. Dans notre exemple, c'est Salut ${customer.name},
Trouvez la ligne qui contient la partie de confirmation de commande : <@rosetta.message key="OrderConfirmation.Confirmation.paid_order" params={ "storeName" : store.name?html, "dateCreated" : order.dateCreated } />
Remplacez tout le texte de cette ligne par votre message. Dans notre exemple, c'est Merci de votre confiance ! Nous avons reçu votre commande <@orderLink/>. Nous vous contacterons pour confirmer le délai de livraison. »
Enregistrez les modifications.

Désormais, vos clients verront les salutations personnalisées dans leurs e-mails de confirmation de commande :

Ajout de texte aux notifications de commande du client

Vous pouvez ajouter un texte personnalisé à toute notification par e-mail. Imaginons que vous voulez informer vos clients que vous organisez un concours sur Facebook. L'ajout d'un court paragraphe dans l'e-mail de confirmation de la commande mettra votre concours sous les projecteurs.

Un paragraphe de texte peut être ajouté à n'importe quelle partie de l'e-mail. Dans notre exemple, ce sera la section « Merci » à la fin de l'e-mail.

Des balises grises vous aideront à naviguer dans le modèle.

Pour ajouter un nouveau contenu au modèle d'e-mail :

Depuis l'administration de votre boutique, allez à Paramètres → Notifications.
Cliquez sur Modifier à côté du modèle d'e-mail aux clients que vous souhaitez modifier.
Trouvez la section dans laquelle vous voulez ajouter du texte. Dans notre exemple, c'est la section « Merci » qui se trouve entre la section  et  près du bas du modèle.

Ajoutez le morceau de code suivant juste au-dessus de la ligne  :


 <tr>
 <td align="left" valign="top" style="padding-top: 40px; padding-bottom: 0;">
        <p style="font-family: ${fontFamily}; font-size: 16px; line-height: 24px; color: ${colorText}; margin: 0; padding: 0;">
          AJOUTEZ VOTRE MESSAGE ICI
        </p>
      </td>
    </tr>

Remplacez le Ajouter votre message texte ici par votre propre texte. Cela devrait ressembler à ceci :
Cliquez sur Enregistrer.

Terminé. Votre message personnalisé apparaîtra au bas de l'e-mail, après le message de remerciement. Cliquez sur Prévisualiser le modèle pour voir l'e-mail mis à jour :

Ajouter des images aux notifications par e-mail

Les images sont utiles lorsque vous souhaitez attirer l'attention des clients sur un évènement spécifique, promotion, produit, ou tout ce que vous voulez mettre en avant. Vous pouvez ajouter une image au format .jpeg ou .img à tout modèle d'e-mail.

Pour ajouter une image à un modèle d'e-mail :

Téléversez votre image sur n'importe quel site d'hébergement d'images. Par exemple, ImgBB, Free Image Host, ou d'autres.
Ouvrez l'image dans votre navigateur et copiez l'adresse de l'image. Elle devrait avoir une extension en .png, .jpeg ou .img.
Depuis l'administration de votre boutique, allez à Paramètres → Notifications.
Ouvrez le modèle d'e-mail que vous souhaitez modifier.
Cliquez sur Prévisualiser le modèle pour décider dans quelle partie de l'email vous voulez que votre image apparaisse. Dans notre exemple, l'image va après la partie « Merci d'avoir effectué vos achats chez nous ».
Dans le modèle, trouvez la partie d'un e-mail où vous voulez ajouter une image. Utilisez les balises et clés de message pour naviguer dans le code. Dans notre exemple, la partie « Merci » de l'e-mail est située entre les lignes de code  et <-- Store contact info and help note : end -->.
Ajoutez le bout de code suivant à l'endroit où vous souhaitez afficher l'image : <img src="URL">, où l'URL est le lien vers une image que vous avez copiée à l'étape 2 :
Cliquez sur Enregistrer.

Terminé. Votre image apparaîtra à présent dans le modèle d'e-mail :

Changer la couleur du texte dans la notification par e-mail

Il est possible de marquer un e-mail aux couleurs de votre entreprise. Dans le modèle d'e-mail, la balise ${colorText} définit les couleurs des différents blocs de texte. Ainsi, vous devez simplement fournir le code HTML d'une couleur spécifique dans le paramètre de la balise de la couleur.

Imaginons que vous vouliez changer la couleur des salutations en vert. Le code HTML pour le vert est #45B212.

Vous pouvez trouver le code pour n'importe quelle couleur sur le site des codes de couleur HTML.

Pour modifier la couleur du texte dans les e-mails :

Depuis l'administration de votre boutique, allez à Paramètres → Notifications.
Cliquez sur Modifier à côté du modèle d'e-mail que vous souhaitez mettre à jour.
Trouvez l'élément ${colorText} près de la section de texte que vous voulez mettre à jour. Pour accélérer le processus, appuyez sur Ctrl + F (Command + F sur Mac) pour trouver le balisage. Le balisage de la couleur du texte sera au-dessus de la clé de message à laquelle il se rapporte. Dans notre exemple, il s'agit de la partie « salutations » :
Remplacez le ${colorText} par le code de couleur HTML. Dans notre exemple, #45B212 pour la couleur verte :
Cliquez sur Enregistrer.

La salutation de ce modèle d'e-mail sera à présent verte :

Ajouter un numéro de suivi cliquable à un tarif d'expédition personnalisé

Vous pouvez ajouter un numéro de suivi à une commande. Vos clients recevront une notification par e-mail à propos de la commande expédiée avec un numéro de suivi cliquable. Une fois qu'ils ont cliqué sur le titre Suivez votre colis de l'e-mail, ils seront redirigés vers le site web des transporteurs.

Cependant, un numéro de suivi n'est cliquable que si vous utilisez les tarifs calculés par le transporteur et que vous expédiez avec UPS, USPS, FedEx, Royal Mail, Australia Post, Canada Post ou MDS Collivery. Si vous expédiez avec des tarifs forfaitaires, des tarifs de tableau personnalisé ou utilisez tout autre service d'expédition, le numéro de suivi ne redirigera pas les acheteurs vers le site web du transporteur. Pourtant, il est possible de modifier manuellement le modèle d'email Expédier la commande pour qu'un numéro de suivi soit cliquable afin que vos clients soient redirigés vers le site Web d'un transporteur pour suivre leur commande.

Pour ajouter un lien vers une page de suivi sur le site web d'un transporteur :

Depuis l'administration de votre boutique, allez à Paramètres → Notifications.
Dans la section Notifications relatives aux commandes envoyées aux clients, ouvrez le modèle d'email Commande expédiée.
Trouvez dans le corps du modèle le bout de code qui commence par le « Order tracking number start» et se termine par « Order tracking number end ». En temps normal, cela représente 73-102 lignes de code :

Remplacez le code ci-dessus par le suivant, où LINK_TO_CARRIERS_WEBSITE est le lien réel vers le site où un client peut suivre sa commande :


<!-- Order tracking number : start -->
 <#if order.trackingNumber?has_content>
      <tr>
          <td align="center" valign="top" style="font-family: Arial,sans-serif;font-size: 14px;line-height: 24px;padding-top: 35px;">
             <#if order.shippingMethod.carrierName?has_content>
                <b><@rosetta.message key="OrderShipped.OrderTracking.number_with_shipping_method" params={ "carrierName": order.shippingMethod.carrierName } /></b>
                <#else>
                <b><@rosetta.message key="OrderShipped.OrderTracking.number" /></b>
             </#if>
           </td>
       </tr>
       <tr>
           <td align="center" valign="top" style="font-family: Arial,sans-serif;font-size: 24px;line-height: 30px;padding-top: 1px; color: #333333;">
                                        ${order.trackingNumber}
           </td>
       </tr>
 <#if order.trackingUrl?has_content>
       <tr>
           <td align="center" valign="top" style="font-family: Arial,sans-serif;font-size: 14px;line-height: 24px;padding-top: 16px;color: #333333;">
                                        <a href="LINK_TO_CARRIERS_WEBSITE" style="text-decoration: none;"><b><@rosetta.message key="OrderShipped.OrderTracking.link_text" /></b></a>
            </td>
       </tr>
 </#if>
       <tr>
           <td style="font-size:1px; line-height: 23px;"> </td>
       </tr>
<!-- Order tracking number : end -->

Cliquez sur Enregistrer.

Vos clients recevront désormais un e-mail contenant un lien vers le site web de votre transporteur. Une fois qu'ils auront cliqué sur un lien, ils seront redirigés vers un site web que vous avez spécifié dans le modèle d'e-mail. Sur le site web, ils peuvent indiquer le numéro de suivi trouvé dans l'e-mail Commande envoyée.

Ajouter le bloc des commandes répétées

Avec répéter des commandes (en anglais), vos clients peuvent commander à nouveau des articles en cliquant sur le bouton « Acheter à nouveau » dans l'e-mail de confirmation de commande qu'ils ont reçu pour la commande initiale. Si vous avez personnalisé votre modèle de confirmation de commande avant que les commandes répétées ne soient disponibles dans votre boutique, vous pouvez ajouter ce bloc manuellement.

Pour ajouter le bloc répéter des commandes :

Depuis l'administration de votre boutique, allez à Paramètres → Notifications.
Dans la section Notifications relatives aux commandes envoyées aux clients, ouvrez le modèle d'email Confirmation de commande.

Trouvez la ligne  - ou tout autre autre endroit où vous voulez que le bloc apparaisse - et ajoutez le bout de code suivant :


    <!-- block-repeat-order: start -->
                <#if repeatOrder??>
                    <tr>
                        <td align="left" valign="top" style="padding-top: 40px;">
                            <table cellpadding="0" cellspacing="0" border="0" style="width: 100%; min-width: 100%;">
                                <tr>
                                    <td align="left" valign="top" style="<@styleSubtitle />">
                                        <@rosetta.message key="OrderConfirmation.RepeatOrder.title" />
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left" valign="top" style="padding-top: 10px; <@styleText />">
                                        <@rosetta.message key="OrderConfirmation.RepeatOrder.description" />
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left" valign="top" style="padding-top: 20px;">
                                        <#assign goToStoreButtonText><@rosetta.message key="OrderConfirmation.RepeatOrder.button" /></#assign>
                                        <@secondaryButton repeatOrder.url goToStoreButtonText 290 colorBlue "full-width-mobile" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </#if>
                <!-- block-repeat-order: end -->

Cliquez sur Enregistrer.

Désormais, vos clients verront le bloc répéter des commandes dans leurs e-mails de Confirmation de commande :