Modifier la position du badge

Utilisez la section Position pour placer un badge texte ou image sur l’image du produit, sous un élément de la page produit, ou à côté d’un élément personnalisé de votre thème.

Ouvrir la section Position

1. Ouvrir Badges & Labels

   Dans l’admin Shopify, ouvrez Sami Product Labels > Badges & Labels.

2. Créer ou sélectionner un badge

   Pour créer un badge, cliquez sur Create badge, puis choisissez Text badge ou Image badge.

   Pour modifier un badge existant, cliquez sur Edit badge/label dans la ligne de ce badge.

3. Développer Position

   Dans l’éditeur de badge, restez sur l’onglet Design, faites défiler jusqu’à Position et développez la section.

   

   Ouvrez l’onglet Design et développez Position.

Placer le badge à l’intérieur de l’image du produit

Sélectionnez Inside product image lorsque le badge doit recouvrir l’image du produit.

Choisir où le paramètre s’applique

Utilisez Badge placement pour choisir l’un de ces modes :

• Use the same position for collection page and product page : une même position s’applique aux deux types de pages.
• Set different position for collection page and product page : utilisez les onglets Listing pages et Product page pour configurer chaque position séparément.

Note

L’éditeur actuel nomme le premier onglet par page Listing pages, et non Collection page.

Appliquez une même position à l’intérieur de l’image partout, ou configurez Listing pages et Product page séparément.

Choisir une position prédéfinie

Sous Badge position, sélectionnez l’un des neuf points de la grille de positions.

Position	Emplacement sur l’image
Top left	Coin supérieur gauche
Top center	Centre du bord supérieur
Top right	Coin supérieur droit
Center left	Centre du bord gauche
Center	Centre de l’image
Center right	Centre du bord droit
Bottom left	Coin inférieur gauche
Bottom center	Centre du bord inférieur
Bottom right	Coin inférieur droit

Sélectionnez l’une des neuf positions prédéfinies à l’intérieur de l’image du produit.

Définir une position personnalisée en pourcentage

Activez Use Custom Position lorsque les neuf positions prédéfinies ne sont pas assez précises. L’éditeur remplace la grille par :

• Un ancrage vertical : Top ou Bottom.
• Un ancrage horizontal : Left ou Right.
• Un curseur de pourcentage pour le décalage par rapport à chaque ancrage sélectionné.

Utilisez les boutons de changement de position pour passer d’un ancrage à l’autre, puis ajustez les curseurs en vérifiant l’aperçu.

Choisissez les ancrages vertical et horizontal, puis définissez leurs décalages en pourcentage.

Placer le badge à l’extérieur de l’image du produit

Sélectionnez Outside product image lorsque le badge doit apparaître à côté des informations du produit au lieu de recouvrir l’image.

Ouvrez Predefined position et choisissez l’une de ces options :

Option	Emplacement sur la page produit
Below the product image	Directement sous l’image du produit
Below the product title	Directement sous le titre du produit
Below the product price	Directement sous le prix du produit
Below the product quantity	Directement sous le sélecteur de quantité
Below the add to cart button	Directement sous le bouton d’ajout au panier
Below the buy now button	Directement sous le bouton d’achat immédiat
Custom	À côté d’un élément identifié par un ID ou une classe dans votre thème

Sous Badge position, choisissez l’alignement à gauche, au centre ou à droite du badge.

Choisissez un élément de la page produit, puis alignez le badge à gauche, au centre ou à droite.

Placer le badge avec un sélecteur de thème

Choisissez Custom dans Predefined position pour cibler un élément de votre thème. Saisissez l’ID ou la classe correspondant dans chaque champ dont vous avez besoin :

Champ	Type de page
Position in product page	Pages produit
Position in home page	Page d’accueil
Position in collection page	Pages de collection
Position in other page	Autres types de pages

Par exemple, saisissez .product-form pour une classe ou #ProductInfo pour un ID. Ajoutez une valeur pour chaque type de page où le badge nécessite ce placement personnalisé.

Attention

Les ID et les classes des thèmes varient. Inspectez le thème de votre vitrine pour trouver un sélecteur stable, puis vérifiez le résultat sur chaque type de page où le badge doit apparaître.

Saisissez l’ID ou la classe du thème pour chaque type de page qui nécessite une position de badge personnalisée.

Ajuster la marge et le remplissage

Développez Margin pour modifier l’espacement extérieur en pixels. L’éditeur affiche les côtés pertinents pour la position sélectionnée.

Développez Padding pour modifier l’espace entre le contenu du badge et ses bords. Vous pouvez définir indépendamment les valeurs du haut, du bas, de gauche et de droite.

Ajustez finement le badge avec des valeurs de marge et de remplissage en pixels.

Prévisualiser et enregistrer

Utilisez les commandes d’aperçu pour vérifier Collection page et Product page, puis basculez entre Desktop view et Mobile view. Lorsque le badge apparaît à l’endroit voulu, cliquez sur Save.

Étapes suivantes

• Modifier la taille du badge : redimensionnez le badge selon les fenêtres d’affichage et les types de pages.
• Modifier le style du badge : personnalisez les polices, les couleurs, les bordures et les arrière-plans.
• Affichage par appareil et par page : contrôlez les appareils et les pages qui affichent le badge.

Astuce

Besoin d’aide ?

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