Modifier le style du badge

Utilisez l’onglet Design pour modifier l’apparence d’un badge. Les badges texte offrent des commandes de police, de couleur, d’arrière-plan, de bordure, d’opacité et de rotation. Les badges image offrent des commandes d’opacité et de rotation pour l’illustration sélectionnée.

Ouvrir un badge dans l’éditeur

1. Ouvrir Badges & Labels

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

2. Sélectionner un badge

   Trouvez le badge que vous voulez modifier, puis cliquez sur Edit badge/label dans sa ligne.

   Pour styliser plutôt un nouveau badge, cliquez sur Create badge, puis choisissez Text badge ou Image badge.

   

   Cliquez sur Edit badge/label pour le badge que vous voulez personnaliser.

3. Rester sur l’onglet Design

   L’éditeur s’ouvre sur Design. Les sections disponibles dépendent du type de badge sélectionné : texte ou image.

Personnaliser un badge texte

Choisir une police et une couleur de texte

Utilisez les commandes situées sous Badge text pour personnaliser le texte :

• Font picker : choisissez une police dans la liste intégrée.
• Use Custom Font Style : activez cette option pour saisir une famille de polices dans Font, puis choisissez un style ou une graisse disponible, comme Regular ou Bold.
• Text color : ouvrez le sélecteur de couleur et choisissez une couleur qui reste lisible sur l’arrière-plan du badge.

Choisissez une police intégrée ou activez Use Custom Font Style, puis définissez la couleur du texte.

La taille du texte et l’espacement des lettres se configurent dans Size. Consultez Modifier la taille du badge pour ces commandes.

Choisir un arrière-plan

Développez Style, puis sélectionnez un Fill type :

Fill type	À utiliser pour
Solid	Une seule couleur d’arrière-plan ou un préréglage de couleur.
Shape	Une forme issue d’un modèle avec une couleur unie ou en dégradé.
Image	Une texture, un motif ou une illustration utilisés comme arrière-plan du badge texte.

Développez Style et sélectionnez le type d’arrière-plan du badge texte.

Utiliser un arrière-plan uni

Sélectionnez Solid, puis choisissez une Background color. Vous pouvez aussi sélectionner l’un des préréglages sous Choose template.

Utiliser une forme ou un arrière-plan en dégradé

Sélectionnez Shape, puis configurez les éléments suivants :

• Choose from library : ouvrez la galerie de modèles et filtrez les designs par catégories comme Sales, Autotext, Stock, Free shipping, Pre-order, et plus encore.
• Start color et End color : utilisez la même couleur pour un rendu uni ou deux couleurs différentes pour un dégradé.
• Gradient direction : choisissez Left to right, Top to bottom, Diagonal ou Radial.
• Choose template : appliquez directement un préréglage de forme depuis l’éditeur.

Choisissez une forme, définissez ses couleurs et sélectionnez la direction du dégradé.

Utiliser une image comme arrière-plan

Sélectionnez Image, puis cliquez sur Select Image pour choisir un arrière-plan personnalisé. L’éditeur accepte les fichiers PNG, JPG ou SVG jusqu’à 5 Mo. Cliquez sur Remove pour effacer l’arrière-plan sélectionné.

Note

Cette image n’est utilisée que comme arrière-plan d’un badge texte. Pour afficher une illustration autonome sans texte modifiable, utilisez plutôt un badge image.

Sélectionnez une illustration à utiliser comme arrière-plan d’un badge texte.

Ajouter une bordure ou arrondir les coins

Développez Border & corners. Les deux options peuvent être activées indépendamment :

Option	Commandes disponibles
Add border	Définissez Border width de 0 à 8 px, choisissez une Border color et sélectionnez Solid, Dotted ou Dashed.
Round corners	Définissez Corner radius de 0 à 100 px.

Ajoutez une bordure, arrondissez les coins, ou utilisez les deux paramètres ensemble.

Styliser un badge image

Les badges image n’affichent pas les commandes de police, d’arrière-plan ni Border & corners du badge texte. Utilisez Content en haut de l’onglet Design pour changer l’illustration du badge, puis Advanced settings pour ajuster son opacité ou sa rotation.

Pour les dimensions et le placement de l’image, consultez Modifier la taille du badge et Modifier la position du badge.

Ajuster l’opacité ou la rotation

Ces effets sont disponibles pour les badges texte comme pour les badges image :

1. Développez Advanced settings.
2. Sous Effects, activez l’option dont vous avez besoin.
3. Ajustez la valeur en vérifiant l’aperçu en direct.

Effet	Plage
Adjust opacity	0 % à 100 %
Rotate badge	0° à 360°

Activez Adjust opacity ou Rotate badge, puis définissez la valeur de l’effet.

Note

La section Effects inclut aussi Use animation. Consultez Ajouter une animation à un badge pour le déroulé complet d’une animation.

Prévisualiser et enregistrer

Utilisez la barre d’outils d’aperçu pour vérifier le badge sur Collection page et Product page, puis basculez entre Desktop view et Mobile view. Lorsque le badge s’affiche correctement dans tous les aperçus nécessaires, cliquez sur Save.

Attention

Vérifiez le contraste du texte après avoir modifié les couleurs ou l’opacité. Un style lisible sur une image de produit peut être difficile à lire sur une autre.

Étapes suivantes

• Modifier la taille du badge : redimensionnez le badge et ajustez la taille du texte ou l’espacement des lettres.
• Modifier la position du badge : déplacez le badge et ajustez sa marge ou son remplissage.
• Ajouter une animation à un badge : appliquez un effet d’animation et configurez sa vitesse et son nombre de répétitions.
• Utiliser du CSS personnalisé : affinez le badge avec du CSS personnalisé.

Astuce

Besoin d’aide ?

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