Comment ajouter du texte personnalisé à l'élément de date de livraison

Par défaut, le Élément de date de livraison Affiche uniquement les informations de livraison estimées, sans texte personnalisé supplémentaire.

Cependant, dans de nombreux cas, les commerçants souhaitent ajouter des messages supplémentaires après la date de livraison afin d'améliorer la clarté, de créer un sentiment d'urgence ou d'accroître la confiance des clients.

Ce guide vous montre comment ajouter du texte personnalisé après l'élément Date de livraison en utilisant du CSS personnalisé dans GemPages.

Cas d’utilisation courants

L'ajout d'un texte personnalisé à l'élément « Date de livraison » peut contribuer à améliorer l'expérience d'achat et à communiquer plus clairement les informations importantes.

Certains cas d'utilisation courants incluent :

• Affichage de messages tels que :
  • « Livraison estimée »
  • « Livraison rapide »
  • Livraison express disponible
  • « Jours ouvrables seulement »
  • « Stock limité »
  • Livraison gratuite incluse
• Ajouter des messages promotionnels à côté de l'estimation de livraison
• Mettre en avant la livraison rapide pour optimiser les conversions
• Personnaliser les informations de livraison pour mieux correspondre à l'image de votre boutique
• Créer un design de page produit plus haut de gamme

Exemple :

12 juin – 15 juin | Livraison express gratuite

Étape 1 : Ouvrez la zone de code personnalisé

• Ouvrez l'éditeur GemPages.
• Cliquez sur le Date de livraison .
• Cliquez avec le bouton droit sur l'élément.
• Sélectionner Code personnalisé.

Cela ouvre l'éditeur de code personnalisé pour cet élément spécifique.

Étape 2 : Coller le code personnalisé

Collez le code suivant dans la zone Code personnalisé :

.gzacmFacXB {}

.gzacmFacXB .date-estimée-principale{

arrière-plan: # 339868;

rembourrage: 4px 10px;

border-radius: 6px;

couleur : #fff !important ;

}

.gps .gzacmFacXB .estimate-date-container:après {

contenu : « Test uniquement » ;

position: relative;

couleur: #151515;

font-size: 17px;

police-family: 'AbeeZee', Sans-Serif;

}

@media (largeur maximale: 767px) {

.gps .gzacmFacXB .estimate-date-container:après {

font-size: 14px;

}

}

Remarque : Pièces remplaçables dans le code

Avant d'utiliser le code, assurez-vous de remplacer les éléments personnalisables ci-dessous afin qu'ils correspondent à votre configuration et à vos préférences de conception.

Étape 3 : Enregistrer et publier

• Cliquez à nouveau Enregistrer.
• Publiez ou mettez à jour votre page.
• Prévisualisez la page sur ordinateur et mobile.

Votre élément « Date de livraison » devrait maintenant afficher un badge stylisé avec un texte personnalisé à côté.