Créer un bloc de points forts

Un bloc de points forts (highlight) est une grille d’éléments, chacun avec une image, un titre et une description, que vous placez sur vos pages produit pour mettre en avant des avantages et des arguments de vente. L’éditeur comporte deux onglets : Design (contenu et style) et Placement (où et pour qui il s’affiche).

1. Ouvrir l’onglet Highlights

   Dans votre admin Shopify, ouvrez l’application Sami Product Labels, cliquez sur Extra Features dans la barre latérale de l’application, puis passez à l’onglet Highlights.

   

   L’onglet Highlights liste tous les blocs de points forts que vous avez créés.

2. Cliquer sur Create highlights

   Cliquez sur Create highlights. L’éditeur plein écran s’ouvre sur l’onglet Design.

   Note

   Faites défiler jusqu’à Featured templates et cliquez sur View all templates pour partir d’un bloc prêt à l’emploi, comme Free Delivery, plutôt que de le créer de zéro.

   

   Créez un bloc de points forts de zéro, ou partez d’un modèle proposé.

3. Nommer le bloc

   Le champ du nom se trouve au-dessus de l’aperçu. Remplacez New Highlight par un nom de 50 caractères maximum. Ce nom est interne : il identifie le bloc dans votre liste et n’est pas affiché à votre clientèle.

4. Ajouter un titre et une description

   Dans Content & Badges, renseignez Title et Description : ce sont le titre et le texte d’introduction de l’ensemble du bloc, par exemple « Pourquoi nous choisir ». Ce sont deux éditeurs de texte enrichi avec gras, italique, souligné, emoji, alignement et une vue HTML (</>), et tous deux sont propres à chaque langue : l’intitulé indique donc la langue active, par exemple Title (en).

   Les deux sont facultatifs ; laissez-les vides pour n’afficher que les éléments.

   

   Le titre et la description du bloc sont des champs de texte enrichi, modifiés langue par langue.

5. Ajouter des éléments de points forts

   Sous Badges, cliquez sur Add highlight, puis choisissez :

   Option	Ce qu’elle fait
   Select badge image	Ouvre le sélecteur d’images pour ajouter un ou plusieurs éléments.
   Line break	Insère un saut pour que les éléments suivants commencent sur une nouvelle ligne.

   Dans le sélecteur, la Library contient plus de 1 800 images. Recherchez par nom ou affinez la liste avec les filtres Images, Free Labels, All colors et Latest (Clear les réinitialise). Cliquez sur les images souhaitées, puis sur Select Image. Vous pouvez aussi passer la source sur Design your Images pour utiliser les vôtres, ou cliquer sur Edit with AI pour modifier l’image sélectionnée.

   

   Filtrez ou recherchez dans la bibliothèque, puis choisissez les images de vos éléments de points forts.

6. Rédiger le titre et la description de chaque élément

   Chaque élément apparaît sous forme de ligne dans la liste Badges. Cliquez sur l’icône d’engrenage d’une ligne pour ouvrir son panneau, où vous pouvez définir :

   • Image : cliquez sur Change pour la remplacer par une autre.
   • Title : le titre court de cette caractéristique, langue par langue.
   • Description : 250 caractères maximum, langue par langue.

   Utilisez Delete dans le panneau pour supprimer l’élément, et faites glisser une ligne par sa poignée pour réordonner la grille.

   

   Chaque élément a sa propre image, son titre et sa description.

7. Définir le style de la grille et du bloc

   Ouvrez Design Main Section pour contrôler le bloc dans son ensemble :

   Réglage	Ce qu’il fait
   Alignment	À gauche, au centre ou à droite.
   Column	Le nombre d’éléments par ligne.
   Width	La largeur du bloc, en % ou en px.
   Background Heading Color	L’arrière-plan derrière le titre et la description.
   Background Color	L’arrière-plan de la zone des éléments.
   Margin / Padding	L’espacement à l’extérieur et à l’intérieur du bloc.
   Border & corners	Le style, la couleur et le rayon d’arrondi de la bordure.

   

   Design Main Section contrôle la grille et le conteneur du bloc.

8. Styliser les éléments de points forts

   Ouvrez Design Badge pour styliser les éléments eux-mêmes :

   Réglage	Ce qu’il fait
   Alignment	L’alignement du contenu de chaque élément.
   Style	Quatre styles d’image : monochrome, monochrome sur une carte, couleur d’origine, et couleur d’origine sur une carte.
   Background Color	L’arrière-plan de chaque élément.
   Size	La Width et la Height de l’image, en px ou en % (50 px par défaut).
   Positions	L’emplacement de l’image par rapport au texte, par exemple Image Position Top.
   Margin / Padding / Border & corners	L’espacement et la bordure de chaque élément.
   Title / Description	La police, la couleur, la taille et la hauteur de ligne du texte des éléments.

   

   Design Badge permet de styliser chaque élément de points forts.

9. Styliser le titre du bloc (facultatif)

   Ouvrez Design title & description. Design Title et Design Description ont chacun leur propre police, couleur, taille et hauteur de ligne pour le titre et le texte d’introduction du bloc.

10. Définir les tailles adaptatives et le CSS personnalisé (facultatif)

    • Responsive size : remplacez les dimensions pour tablette et mobile.
    • Advance Section : ajoutez du Custom CSS (Developer Zone). La liste CSS reference sous l’éditeur indique les sélecteurs que vous pouvez cibler, comme .samita_highlight_container ; cliquez sur l’un d’eux pour l’insérer.

    

    La liste CSS reference présente les sélecteurs disponibles pour la personnalisation du style.

11. Choisir où le bloc s’affiche

    Passez à l’onglet Placement :

    • Product page : activez-le pour afficher le bloc à l’emplacement intégré de l’application sur chaque page produit.
    • Shortcode : copiez l’extrait et collez-le dans votre thème pour placer le bloc à un endroit précis.
    • Conditions : les conditions Product, Customer, Page, Language et Country déterminent qui voit le bloc et où.

    Note

    Consultez Cibler l’affichage des points forts pour comprendre le fonctionnement des ensembles de conditions.

    

    L’onglet Placement réunit les conditions d’affichage, l’interrupteur de la page produit et le shortcode.

12. Prévisualiser et enregistrer

    Au-dessus de l’aperçu, vous pouvez changer de langue, choisir la page à prévisualiser, basculer entre bureau / mobile et masquer le produit d’exemple avec l’icône en forme d’œil. Réglez le bloc sur Active ou Draft, puis cliquez sur Save en haut à droite. Utilisez Discard pour abandonner les modifications non enregistrées.

Note

Le forfait FREE inclut 2 blocs de points forts, et ceux que vous supprimez comptent toujours dans cette limite. Passez au forfait GOLD ou DIAMOND pour des blocs illimités.

Étapes suivantes

• Placer un bloc de points forts avec un shortcode : positionnez le bloc à un emplacement personnalisé de votre thème.
• Cibler l’affichage des points forts : contrôlez quelles pages et quelle clientèle voient vos blocs.
• Présentation des points forts : ce que sont les blocs de points forts et quand les utiliser.
• Créer un badge de confiance : ajoutez des icônes de paiement et de sécurité à vos pages produit.

Astuce

Besoin d’aide ?

Si vous rencontrez des difficultés en suivant ces étapes, contactez-nous à l’adresse [email protected].