Fermer

juin 6, 2025

Comment ajouter des badges de produit dans des flèches de commerce / blogs / perficturés configurés optimisées

Comment ajouter des badges de produit dans des flèches de commerce / blogs / perficturés configurés optimisées


Ce blog est écrit pour les développeurs, les marchandiseurs ou les équipes clients qui cherchent à afficher des indicateurs visuels (par exemple, «nouveau», «vente», «non retournable», «best-seller») sur les produits dans la vitrine. Dans le commerce électronique, badges sont de petits indices visuels qui communiquent des informations sur les produits importantes aux clients, tels que «nouvelle arrivée», «vente» ou «stock limité». Dans Commerce configuré par optimisation (Spire)Les badges de produit peuvent être un moyen puissant de mettre en évidence les promotions clés ou les statuts de produit, améliorant ainsi l’expérience utilisateur.

Ce billet de blog explique comment activer et personnaliser les badges dans les sites basés sur les flèches.

Que sont les badges de produit?

Les badges sont des éléments visuels affichés sur des images ou des titres de produit pour indiquer un statut spécial ou des promotions. Les cas d’utilisation courants comprennent:

  • Nouveau – produits récemment ajoutés
  • Vente – Articles à prix réduit
  • Non retournable – Articles non retournables (vêtements d’intérieur, téléchargements numériques, rasoirs ou lames, etc.)
  • Best Seller – SKUS TOP-PERFORMING
  • Stock limité – inventaire faible

Étape 1: Activer et configurer les badges dans la console d’administration

  • Connectez-vous au Console d’administration
  • Aller à Console d’administration> Marketing> Badges de produit

Photo1

Photo2

  • Remplissez les champs:
    • Nom: par exemple, «vente»
    • Activé sur: date de début de l’affichage du badge de produit «vente» sur le produit. La date actuelle par défaut.
    • Désactivé le: Date de fin de l’affichage de l’insigne de produit «Vente» sur le produit.
    • Ordre de tri: l’ordre de tri détermine l’ordre d’affichage des badges dans les cas où plusieurs badges sont affichés. Les éléments avec la même commande de tri seront affichés par ordre alphabétique par nom de badge.
    • Emplacements d’affichage:
      1. Superposition – ON / OFF: montre un badge comme une superposition sur les images du produit principal
      2. Widget de badge – ON / OFF: Affiche le badge partout où le widget de badge est affiché. Vous pouvez affecter manuellement les badges ou les automatiser en fonction des règles via une logique personnalisée.
      3. Style de badge:

        Type de badge: Texte ou image

        Texte

              • Texte d’affichage: Ajouter un texte d’affichage sur le produit, par exemple «vente». Traduire ce texte dans d’autres langues.
              • Texte Color Hex Code: Entrez le code hexadécimal sans #. par exemple 000000
              • Badge Color Code Hex: Entrez le code hexadécimal sans #. par exemple fffffff
              • Style de badge: sélectionnez «ronde» et «rectangle»
              • Photo3

        Image

              • Grand chemin d’image d’image: parcourez le chemin d’image et prévisualisez-le.
              • Image Alt Texte: Ajoutez un texte alternatif de l’image afin que le texte soit affiché si l’image n’est pas disponible.
              • Photo4
          • Positionnement des badges:
            1. Grand placement d’image: «Aucun» par défaut. Autre centre supérieur, haut à gauche, en haut à droite, en bas du centre, en bas à droite et en bas à gauche
            2. Grande image Taille du texte: Sélectionnez Grand, Mediu, M et Small

        Créez un nouveau badge en tant que «vente» et le style de badge est du texte.

        Photo5

Étape 2: Attribuez des badges aux produits, aux règles des produits et aux attributs de produits

Produits

Cliquez sur le bouton «Attribuer des produits»

Image6

  • Ouvrez la fenêtre contextuelle et recherchez des produits.

Photo7

  • Sélectionnez des produits. Cliquez sur les boutons «Attribuer» et «Done».

Photo8

  • Ce badge est affecté à des produits sélectionnés. Photo9

Règles du produit

Vous pouvez créer des règles de produit en fonction des «propriétés personnalisées du produit» et des «champs de produits».

Photo10

Attributs du produit

Vous pouvez attribuer plusieurs attributs de produit pour ce badge.

Photo11

Étape 3: Activer les badges de produit dans CMS

  1. Aller chez Content Admin
  2. Accédez à n’importe quelle page de liste de produits
  3. Cliquez sur l’icône Modifier

Photo12

4. Cliquez sur l’icône d’édition sur « ProductList / ProductListCardlist»Widget

    • Afficher les badges d’image et définir le nombre maximum de badges d’image
    • Afficher les badges de texte et définir le nombre maximum de badges de texte

Photo13

Étape 5: Afficher les badges de produit en frontenance Spire

Exemple de badges de produit de texte:

Page de liste de produits:

Image14

Page de détail du produit:

Image15

Conclusion

Les badges dans le commerce configuré Optimizely sont un moyen simple mais efficace d’élever le merchandising sur votre vitrine. En combinant la configuration de back-office avec des personnalisations simples de frontend, vous pouvez créer une expérience d’achat plus engageante et informative.






Source link