Badges absents des cartes produit ? Réglez le sélecteur des cartes

1. Vérifier d'abord l'app embed

Dans Boutique en ligne, Thèmes, Personnaliser, ouvrez Intégrations d'applications et vérifiez que Badges sur les images produit est activé et que Pages collection et recherche est coché, sous Cartes produit. La plupart des badges absents viennent de cette étape, pas du sélecteur.

2. Trouver l'élément qui contient l'image de la carte

Ouvrez une page collection de votre boutique dans Chrome, Edge ou Firefox sur ordinateur, puis :

• Faites un clic droit sur l'image d'une carte produit et choisissez Inspecter.
• Dans le panneau qui s'ouvre, la balise img est sélectionnée. Remontez d'une ou deux lignes jusqu'à l'élément qui entoure l'image (souvent un div ou un figure).
• Survolez-le : le navigateur le surligne sur la page. Il doit couvrir exactement l'image, pas le titre ni le prix.
• Notez sa classe, par exemple class="card__media". Le sélecteur est cette classe précédée d'un point : .card__media

3. Coller le sélecteur dans l'éditeur de thème

De retour dans Personnaliser, Intégrations d'applications, Badges sur les images produit, allez dans la partie Avancé et collez le sélecteur dans Sélecteur des cartes produit. Enregistrez, puis rechargez la page collection : les badges se placent dans les coins de chaque image.

L'élément peut contenir le lien du produit ou se trouver à côté dans la carte : les deux fonctionnent.

Choisir un bon sélecteur

Quelques règles évitent les surprises :

• Prenez une classe commune à toutes les cartes, pas un id (#…), propre à une seule carte.
• Évitez les classes qui semblent générées, comme .x7f3a2 : elles changent à la mise à jour du thème.
• Si l'élément a plusieurs classes, une seule suffit. Gardez la plus parlante, comme .product-card__image.
• Sur Dawn et les thèmes qui en dérivent, le sélecteur est .card__media.