Affichage par appareil et par page

L’onglet Display de l’éditeur de badge détermine où et quand un badge s’affiche, une fois que l’onglet Products a déterminé les produits concernés.

L’onglet est une liste de sections repliables :

Section	Ce qu’elle contrôle	Documentée dans
Customer conditions	Qui voit le badge (personnes connectées, tags, clients précis)	Cibler par client
Page conditions	Les types de pages où le badge apparaît	Cette page
Language conditions	La langue de la vitrine dans laquelle la personne navigue	Cibler par pays et par langue
Country conditions	Le pays de la personne qui visite la boutique	Cibler par pays et par langue
Other conditions	L’image du produit, l’appareil et les éléments du thème exclus	Cette page
Visibility Date & Countdown	Les dates de début et de fin, et les comptes à rebours	Planifier l’affichage
Priority conditions	Quel badge l’emporte quand plusieurs s’appliquent à un produit	Cette page

L’onglet Display. Les sections avec un chevron se déplient ; celles avec un interrupteur doivent d’abord être activées.

Note

Les sections avec un chevron (⌄) se déplient simplement. Les sections avec un interrupteur (Language, Country, Priority) doivent être activées pour que leurs champs apparaissent.

Ouvrir l’onglet Display

1. Ouvrir l’application

   Dans l’admin Shopify, accédez à Apps → Sami Product Labels.

2. Ouvrir Badges & Labels

   Dans le menu de gauche de l’application, cliquez sur Badges & Labels. La liste affiche chaque badge avec son identifiant, son nom, son aperçu, son type, sa priorité, sa position et son statut.

   

   La liste Badges & Labels. Cliquez sur l’icône en forme de crayon dans la colonne Actions pour modifier un badge.

3. Modifier le badge

   Cliquez sur l’icône en forme de crayon dans la colonne Actions du badge à configurer. L’éditeur s’ouvre avec trois onglets : Design, Products, Display.

4. Accéder à Display

   Cliquez sur l’onglet Display.

Note

Les boutons Save et Discard en haut à droite n’apparaissent qu’après une modification. Pour abandonner vos changements, cliquez sur Discard → Discard changes.

Page conditions

Par défaut, un badge s’affiche sur toutes les pages où le produit apparaît. Ajoutez une condition de page pour le limiter à certains types de pages.

Ajouter une condition de page

1. Déplier Page conditions

   Cliquez sur la ligne Page conditions pour la déplier. Un bouton + Add conditions apparaît.

   

   Une section Page conditions vide : aucune règle n’est définie, donc le badge s’affiche partout.

2. Cliquer sur + Add conditions

   Une ligne de condition apparaît avec trois champs : Page (fixe), un opérateur et un type de page. Par défaut : Page is equal to Index page.

   

   Chaque clic sur + Add conditions ajoute une ligne. Utilisez l’icône de corbeille en fin de ligne pour la supprimer.

3. Choisir l’opérateur

   • is equal to : affiche le badge uniquement sur le type de page sélectionné.
   • is not equal to : affiche le badge partout sauf sur le type de page sélectionné.

4. Choisir le type de page

   Option	Où le badge apparaît
   Index page	La page d’accueil de votre vitrine
   Collection page	Les pages de liste de collections ou de catégories
   Product page	Les pages produit individuelles
   Article Page	Les pages d’articles de blog
   Blog page	Les pages de liste du blog
   Cart page (including cart drawer)	La page panier et le panier latéral coulissant
   Search page	Les pages de résultats de recherche
   Specific pages	Uniquement l’URL exacte que vous saisissez (voir l’étape suivante)

   

   Les huit types de pages disponibles pour une condition de page.

5. Pour Specific pages, saisir l’URL

   Choisir Specific pages ajoute un quatrième champ. Saisissez l’URL complète de la page sur la vitrine, par exemple https://your-store.myshopify.com/pages/summer-sale. Le texte indicatif affiche l’URL de votre propre boutique à titre d’exemple.

   

   Specific pages ajoute un champ d’URL : collez l’URL complète de la page, pas seulement le chemin.

6. Enregistrer

   Cliquez sur Save en haut à droite.

Attention

Un badge doit aussi correspondre à l’onglet Products. Une condition de page restreint où un produit concerné affiche son badge : elle ne fait jamais apparaître le badge sur des produits auxquels il ne s’applique pas.

Other conditions

Dépliez Other conditions pour choisir quelle image du produit porte le badge, quels appareils le voient et quels éléments du thème ignorer.

Paramètre	Options	Comportement
Show on (product page)	All images / First image	Affiche le badge sur chaque image de la galerie, ou seulement sur la première image (principale) du produit.
Device targeting	All devices / Desktop / Mobile	Limite le badge aux visites sur ordinateur ou sur mobile, ou l’affiche sur tous les appareils.
Do not show label on	Liste de classes CSS : .CLASS1, .CLASS2,...	Le badge n’est affiché sur aucun élément correspondant à ces classes. Utile quand un carrousel, un aperçu rapide ou une section de vente incitative de votre thème ne se prête pas à l’affichage d’un badge.

Les réglages d’image, d’appareil et d’exclusion se trouvent tous dans Other conditions.

Note

Do not show label on attend des sélecteurs de classe CSS séparés par des virgules, chacun commençant par un point, par exemple .product-card__slider, .quick-view. Inspectez l’élément dans votre thème pour trouver le nom de la classe.

Priority conditions

Quand plusieurs badges correspondent au même produit, la priorité détermine celui qui s’affiche.

1. Activer Priority conditions

   Cliquez sur l’interrupteur de la ligne Priority conditions. Un champ Priority value apparaît.

2. Saisir une valeur de priorité

   Saisissez un nombre de 0 à 100. 0 correspond à la priorité la plus haute, 100 à la plus basse. L’application affiche la même astuce sous le champ.

   

   Plus le nombre est bas, plus la priorité est haute. Un badge est masqué si le produit a déjà un badge de priorité plus haute.

3. Enregistrer

   Cliquez sur Save. La valeur s’affiche alors dans la colonne Priority de la liste Badges & Labels, ce qui permet de comparer tous vos badges d’un coup d’œil.

Attention

Les badges dont la priorité est désactivée s’affichent comme None dans la liste et ne participent pas à la comparaison. Pour qu’un badge l’emporte de façon fiable sur un autre, définissez une valeur de priorité pour les deux.

Exemple de priorité

Badge	Valeur de priorité	Résultat sur un produit correspondant aux deux
Sale off	0	Affiché
Best seller	10	Masqué

Étapes suivantes

• Modifier la position du badge : ajustez l’emplacement du badge sur l’image du produit.
• Cibler des produits : choisissez les produits qui affichent votre badge.
• Planifier l’affichage : définissez des dates de début et de fin pour un badge.

Astuce

Besoin d’aide ?

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