CSS personnalisé

Pour un style qui va au-delà de l’éditeur visuel, Sami Product Labels inclut un éditeur CSS intégré. Vous pouvez aussi contrôler la superposition des badges avec le z-index, ajouter des infobulles au survol et définir un texte alternatif pour les badges image.

Comment ajouter du CSS personnalisé

1. Ouvrir l’éditeur de badge

   Depuis Sami Product Labels, accédez à Badges & Labels. Sélectionnez Create badge, ou l’icône Edit badge/label dans la colonne Actions d’un badge existant.

2. Accéder à l’onglet Design

   Sélectionnez Design dans l’éditeur de badge. Cet onglet est sélectionné par défaut à l’ouverture de l’éditeur.

3. Faire défiler jusqu’à Advanced Settings

   Développez Advanced settings près du bas de l’onglet Design.

4. Activer « Custom css »

   Sous Advanced, activez Custom css.

5. Insérer un sélecteur et ajouter votre CSS

   L’éditeur CSS apparaît avec trois options sous CSS reference :

   • .samita_productLabel-content stylise l’ensemble du badge.
   • .samita_productLabel-content-text stylise les badges texte.
   • .samita_productLabel-content img stylise les badges image.

   Sélectionnez l’option dont vous avez besoin. L’application insère dans l’éditeur un sélecteur limité à l’ID du badge actuel, comme .__content--94129. Conservez cette partie propre au badge dans le sélecteur, puis ajoutez uniquement les déclarations dont vous avez besoin entre les accolades.

   /* Use the badge ID inserted by the app in place of YOUR_BADGE_ID. */
   .samita_productLabel-content.__content--YOUR_BADGE_ID {
     box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
   }
   
   .samita_productLabel-content.__content--YOUR_BADGE_ID:hover {
     transform: scale(1.1);
     transition: transform 0.2s ease;
   }

   

   Sélectionnez une classe sous CSS reference pour insérer dans l’éditeur Custom CSS un sélecteur limité au badge.

6. Prévisualiser et enregistrer

   Vérifiez l’aperçu en direct pendant que vous modifiez. Lorsque le résultat vous convient, sélectionnez Save, puis vérifiez le badge sur la page de collection ou la page produit concernée de votre vitrine.

Attention

Le CSS personnalisé est enregistré avec ce badge, mais ses sélecteurs déterminent toujours quels éléments de la vitrine il peut affecter. Conservez le sélecteur limité au badge généré par l’application. Un sélecteur large comme .samita_productLabel-content seul peut aussi correspondre à d’autres badges.

Contrôle du z-index

Corrigez un badge masqué derrière une superposition d’image de produit, un en-tête fixe ou un autre badge.

1. Dans Advanced settings, activez Z-index.
2. Saisissez une valeur de 1 à 100. Les valeurs plus élevées placent le badge devant les éléments dont le z-index est plus faible.

Définissez une valeur de z-index pour contrôler la superposition des badges.

Note

Le z-index dépend aussi du contexte d’empilement créé par votre thème. Si augmenter la valeur du badge ne le fait pas passer devant, un conteneur parent du thème peut nécessiter son propre ajustement CSS.

Infobulle au survol

Ajoutez une infobulle qui apparaît lorsque les clients survolent votre badge : utile pour expliquer ce que signifie « New Arrival » ou « Limited Edition » sans encombrer l’image du produit.

1. Dans Advanced settings, activez Show tooltip on hover.
2. Saisissez le texte de l’infobulle à afficher au survol.

Ajoutez un texte d’infobulle qui s’affiche lorsque les clients survolent le badge.

Ne placez pas d’information essentielle uniquement dans l’infobulle. Les personnes qui utilisent un écran tactile ou naviguent au clavier peuvent ne pas déclencher le survol.

Texte alternatif SEO pour les badges image

Définissez un texte alternatif pour que les lecteurs d’écran puissent décrire la signification d’un badge image. Un texte alternatif descriptif peut aussi favoriser le référencement des images.

1. Dans Advanced settings, activez Seo alt text.
2. Saisissez une description concise du message transmis par le badge, comme « 20% off sale badge » ou « Free shipping label ». Évitez le bourrage de mots-clés et des formules comme « image de ».

Définissez un texte alternatif pour l’accessibilité et le SEO.

Étapes suivantes

• Modifier le style du badge : personnalisez votre badge avec les commandes de l’éditeur visuel.
• Modifier la position du badge : placez votre badge au bon endroit sur la page.

Astuce

Besoin d’aide ?

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