Élément de badge de produit

À propos de l'élément de badge de produit

L'élément Badge de produit de GemPages est conçu pour mettre en valeur les détails clés d'un produit, comme l'étiquetage d'une nouvelle arrivée ou la présentation d'une promotion directement sur l'image sélectionnée. 

Avec cet élément, vous pouvez obtenir de multiples avantages pour votre boutique de commerce électronique : 

• Visibilité améliorée : Augmentez la visibilité des produits en faisant ressortir certains articles, en veillant à ce qu'ils captent l'attention des clients.
• Augmentation de la confiance dans la marque : Renforcez votre crédibilité avec des badges tels que "Les mieux notés" or « Favori des clients », présenter des critiques et des recommandations positives pour renforcer la confiance des acheteurs.
• Action encouragée : Créez un sentiment d'urgence avec des badges comme « Il n’en reste que 2 ! » or « Bientôt terminé » inciter les clients à agir rapidement et à finaliser leurs achats.
• Stratégie de tarification testée : Expérimentez et déterminez la stratégie de tarification la plus efficace pour chaque article en proposant des remises différentes pour chaque produit.
• Gestion des stocks améliorée : Vendez plus rapidement les articles à rotation lente ou en excédent, réduisant ainsi les coûts de stockage et faisant de la place pour de nouveaux stocks avec des badges tels que «Liquidation des stocks or «Réduction des stocks».
• Promotion ciblée : Définissez différentes remises pour différentes catégories de produits, niveaux de stock ou objectifs de vente. Des badges comme « Catégorie Vente », « Promotion saisonnière », or « Offre hebdomadaire » faciliter la création de promotions adaptées à leurs besoins commerciaux.

Comment ajouter l'élément de badge de produit

Étape 1 : Ouvrez votre éditeur GemPages et localisez le Élément de badge de produit dans la barre de recherche.

Étape 2 : Faites glisser l'élément depuis la barre latérale et déposez-le dans votre espace de conception. Vous ne pouvez ajouter le badge produit qu'à un élément. Élément de produit, Élément de la liste de produits, ou directement sur leur Images du produitLes paramètres du badge peuvent varier en fonction de son emplacement.

Étape 3 : Vous pouvez ajouter plusieurs badges à un même produit. Par défaut, les badges apparaissent dans la section coin supérieur gaucheSi plusieurs badges sont ajoutés, ils s'empileront verticalement. Pour ajuster leur ordre ou leur visibilité, utilisez le Arbre des couches .

Étape 4 : Après avoir placé vos badges, cliquez sur Publier Pour les voir en direct. Dans l'éditeur, les badges sont toujours visibles pour faciliter les ajustements, mais ils n'apparaissent sur la page en direct que s'ils répondent aux conditions d'affichage que vous avez définies.

Pour accéder aux paramètres du badge, cliquez sur l'élément. Barre latérale de gauche affichera deux onglets : Paramètres Avancée:

Configurer l'onglet Paramètres

1. style

Choisissez le style de badge qui correspond à votre design. Les options disponibles incluent :

• Image(s)
• Texte horizontal
• Coin texte 1
• Ruban de texte 1
• Coin texte 2
• Ruban de texte 2
• Texte vertical
• Étoile de texte
• Texte carré

2. Source du produit

L' Origine du produit Indique le produit dont le badge affiche les informations. Pour changer de produit, cliquez sur Sélecteur de produits dans le module produit et sélectionnez l'article souhaité.

3. Texte

Les paramètres de texte sont disponibles pour les styles qui affichent du contenu textuel.

• Style de texte par défaut : paragraphe 1
• Couleur par défaut: FFFFFF (blanc)

Dans GemPages, la modification du contenu textuel nécessite l'ouverture d'une fenêtre contextuelle. Vous pouvez :

• Saisissez un texte long avec des sauts de ligne.
• Utilisez le Extraits Markdown pour afficher des informations produit dynamiques à partir de Shopify.

Pour utiliser les démarques :

• Saisissez manuellement une démarque en utilisant le format approprié. Seuls les formats valides affichent les données en temps réel.
• Cliquez sur l'cône «+» à l'intérieur du champ de saisie pour ouvrir une liste des démarques prises en charge.

• Sélectionnez une démarque dans la liste pour l'insérer ou insérez la même démarque plusieurs fois.

Modèles Markdown pris en charge :

• {%_rabais} – Affiche le pourcentage de remise.
• {amount_discount} – Affiche le montant de la remise dans la devise de votre boutique.
• {type_de_produit} – Affiche le type de produit.
• {min_price} – Affiche le prix le plus bas parmi toutes les variantes de produits.
• {quantité_d'inventaire} – Affiche l'inventaire restant. Fonctionne uniquement si Suivre la quantité est activé pour le produit.

4. Style de badge

Ce paramètre vous permet d'ajuster la forme et le style visuel du texte. Vous pouvez personnaliser :

• Frontière
• CORNER
• Shadow

5. Taille

Mettez le Largeur, Hauteur et Rembourrage de votre badge pour correspondre à votre mise en page.

6. Position

Les paramètres de positionnement global s'appliquent à tous les styles de badge. Lorsque vous changez de style, vos paramètres de positionnement sont conservés.

Paramètres d'espacement :

• En fonction de la position du badge, vous pouvez ajuster l'espacement à l'aide d'un Curseur d'espacement.
• Seules les valeurs entières sont autorisées ; les valeurs négatives ou décimales ne sont pas prises en charge.

7. Style d'image

Si votre badge utilise une image au lieu d'un texte, vous pouvez le personnaliser :

• Frontière
• CORNER
• Shadow

8. Conditions d'affichage

Les conditions d'affichage déterminent l'apparition d'un badge sur la page en direct. Le changement de style conserve toutes les valeurs précédemment définies.
Types de déclencheur :
Vous pouvez appliquer plusieurs déclencheurs en cliquant sur le icône ➕Les déclencheurs disponibles incluent :

• L'inventaire des produits: Obligatoire et non supprimable. S'affiche lorsque l'inventaire correspond à une quantité spécifiée.
• Prix ​​bas: Indique quand la remise atteint un pourcentage ou un montant défini.
• Prix: Indique si le prix du produit se situe dans une fourchette spécifique.
• TAGS: Indique si le produit possède les balises sélectionnées.
• date de création: Indique si le produit a été créé dans un délai de X jours, à une date précise ou entre deux dates.

Condition spéciale : L'inventaire est le seul déclencheur actif si :

• Le produit est sélectionné manuellement.
• Un seul produit est attribué en mode dynamique.
• La liste des produits contient un seul produit.

Cliquez à l'intérieur du champ de saisie du déclencheur pour ouvrir la fenêtre contextuelle et configurer les paramètres détaillés pour chaque déclencheur.

Comment afficher le pourcentage de réduction avec le badge produit

Étape 1 : Sélectionnez le Insigne de produit élément que vous avez ajouté à votre page.

Étape 2 : Dans la barre latérale gauche, ouvrez le Paramètres languette.

Étape 3 : Rendez-vous dans la section Texte .

Étape 4 : Cliquez dans le champ de saisie de texte pour ouvrir la fenêtre contextuelle.

Étape 5 : Insérer le {%_discount} Markdown par :

• En le saisissant manuellement, ou
• En cliquant sur le "+" icône et en sélectionnant Remise (%) à partir de la liste Markdown.

Étape 6 : Personnalisez le style, la couleur et la typographie du texte selon vos besoins.

Étape 7 : (Facultatif) Ajuster le Style d'insigne, Taille et Poste pour correspondre à votre design.

Étape 8 : Cliquez à nouveau sur Publier appliquer les changements.

Configurer l'onglet Avancé

Pour une personnalisation plus avancée, accédez à l'onglet Avancé et suivez les instructions cet article.