Comment afficher les produits verticalement dans les e-mails
Objectif de cet article
Découvrez comment afficher des produits verticalement dans vos flux de panier abandonné et de confirmation de commande (c’est-à-dire avec une image au-dessus des informations produit plutôt qu’à côté).
Créer un bloc de produits vertical
Les instructions ci-dessous convertissent un tableau dynamique horizontal existant en une section avec une image du produit au-dessus de ses détails. La section se répète pour chaque produit du panier ou de la commande. Si vous n’avez pas encore d’e-mail de flux contenant un tableau dynamique, trouvez-en un dans la bibliothèque de flux.
- Sélectionnez Flux dans la barre latérale de Klaviyo.
- Accédez à votre flux de panier abandonné ou de confirmation de commande.
- Si l’e-mail que vous prévoyez de modifier est En ligne, sélectionnez Manuel dans la liste déroulante d’état sur sa carte de message avant de le modifier. L’envoi s’arrêtera automatiquement ; les destinataires qui atteignent l’horaire d’envoi passeront à Nécessite une révision. Laissez les e-mails déjà en Brouillon ou Manuel dans leur état actuel.
- Sélectionnez l’e-mail contenant votre tableau dynamique (le tableau qui affiche les produits du panier ou de la commande d’une personne), puis cliquez sur Modifier pour ouvrir l’éditeur d’e-mail.
- Ajoutez une nouvelle section immédiatement sous le bloc de tableau dynamique.

- Ajoutez un bloc d’image et un bloc de texte à votre nouvelle section, avec l’image au-dessus du texte.
- Sélectionnez votre tableau dynamique d’origine. Dans Styles, copiez les valeurs de Collection de lignes et Alias de ligne.
- Sélectionnez votre nouvelle section, ouvrez Affichage, puis cliquez sur Ajouter une répétition de contenu.

- Collez la valeur Collection de lignes du tableau d’origine dans Répéter pour et sa valeur Alias de ligne dans Alias d’élément, puis cliquez sur Enregistrer.

- Sélectionnez votre tableau d’origine, ouvrez Contenu, puis sélectionnez la cellule contenant l’image du produit. Cliquez sur Remplacer pour l’image dynamique.

- Dans la fenêtre modale qui s’affiche, copiez tout ce qui se trouve dans le champ Variable dynamique ou URL dynamique, puis fermez la fenêtre modale sans modifier l’image d’origine.

- Cliquez sur le bloc d’image dans votre nouvelle section.
- Cliquez sur Sélectionner une image.
- Sélectionnez Image dynamique et collez la valeur copiée dans Variable dynamique ou URL dynamique.
- Cliquez sur Enregistrer.
- Revenez à la cellule de l’image du produit dans le tableau d’origine et copiez le tag dans Adresse du lien.

- Collez ce tag dans le champ Adresse du lien de votre nouveau bloc d’image.
- Dans l’onglet Contenu de votre tableau d’origine, sélectionnez la cellule contenant les détails du produit, puis copiez son texte, y compris les tags de personnalisation et les liens.

- Collez le texte dans votre nouveau bloc de texte.
- Cliquez sur Aperçu, puis sélectionnez un événement d’exemple pour le déclencheur du flux qui contient des données produit. Si possible, utilisez un événement avec plusieurs produits. Vérifiez que l’image de chaque produit apparaît au-dessus des détails correspondants, et que les liens des images sont corrects. Si quelque chose semble incorrect, vérifiez les valeurs Repeat for et Item alias de la section, l’URL d’image dynamique, l’adresse du lien, ainsi que le texte copié et le tag de personnalisation.
- Une fois que la nouvelle section vous convient, supprimez le bloc de tableau d’origine.
- Si vous le souhaitez, enregistrez la nouvelle section en tant que contenu universel afin de l’utiliser dans d’autres messages au sein du flux.
- Attendez l’enregistrement de vos modifications, puis ouvrez Plus d’options à côté de Quitter, et sélectionnez Retourner au flux. Si vous avez modifié cet e-mail de En ligne à Manuel avant de le modifier, sélectionnez En ligne dans la liste déroulante de statut de sa carte de message afin de reprendre l’envoi automatique.
Les destinataires déjà dans Nécessite une révision y restent lorsque vous rétablissez l’e-mail sur En ligne. Examinez-les séparément afin de décider d’envoyer ou d’annuler leurs messages. Découvrez comment gérer les destinataires dans Nécessite une révision.
Résultat
Après avoir suivi ces étapes, votre e-mail contiendra un bloc de produits vertical (avec les images au-dessus des informations sur le produit), plutôt que des images et des informations sur le produit affichées horizontalement.

Ressources supplémentaires
- Bonnes pratiques en matière de conception d’e-mails en mode sombre
Découvrez le mode sombre, un paramètre de l'appareil que certains utilisateurs activent pour assombrir leur écran. Ce paramètre a une incidence sur l'affichage des e-mails. Le mode sombre est un paramètre de l’utilisateur final qui est sélectionné au niveau de l’appareil, et Klaviyo n’a pas de contrôle direct sur la façon dont le mode sombre est mis en œuvre sur chaque appareil.
- Comment mettre à jour les styles de votre marque dans Klaviyo
Découvrez ce qui doit être mis à jour dans Klaviyo lors d’un changement de marque ou d’une modernisation du design de votre marque.