Vous souhaitez que vos produits Shopify se démarquent grâce à des étiquettes personnalisées attrayantes ? Ce guide est fait pour vous. Des badges comme « Soldes », « Nouveauté » ou « Meilleures ventes » peuvent rapidement attirer l'attention sur vos produits. Aucune application n'est requise. Surpris ? Dans cet article, vous apprendrez à créer des badges de produits Shopify sans application. Les métachamps et le code de thème simple de Shopify.
Ce guide étape par étape est efficace même si vous ne maîtrisez pas le codage. Vous apprendrez également à ajouter un badge dans Shopify et à contrôler le texte et la couleur directement depuis votre panneau d'administration. À la fin, vous obtiendrez des badges colorés et professionnels, épurés et rapides à charger. Prêt à transformer votre boutique Shopify ? Alors, commençons !
Les badges aident les clients à se concentrer sur les produits clés. Ils mettent en avant les nouveautés, les produits populaires ou les promotions.
Ils guident les acheteurs et stimulent les clics.
Exemples :
Si vous vendez des vêtements, ajoutez un badge « Nouveauté » sur les nouveaux articles. Les clients les remarqueront immédiatement.
L'ajout de badges personnalisés Shopify améliore l'apparence de votre boutique et vous permet de réaliser des économies. Vous n'aurez pas besoin d'applications ni de scripts supplémentaires. C'est l'une des meilleures façons d'ajouter des badges à vos produits Shopify tout en simplifiant les choses.
Vous apprendrez à :
Dans la section suivante, nous vous expliquerons étape par étape comment ajouter des badges personnalisés à l'aide d'un code simple. Ne vous inquiétez pas si vous ne maîtrisez pas ce procédé. Ces instructions sont faciles à suivre : il vous suffit de copier-coller pour obtenir le résultat souhaité.
Les métachamps stockent des détails supplémentaires sur les produits.
Vous en créerez trois : un pour le texte du badge, un pour la couleur d’arrière-plan et un pour la couleur du texte.
Mesures:
Modifiez maintenant n'importe quel produit et faites défiler jusqu'à Métachamps. Vous verrez trois cases prêtes à être remplies.
Exemple:
Si le produit est une robe d'été, remplissez
Sauvegarde-le.
Shopify affichera désormais un badge de vente rouge sur ce produit.
C'est ainsi que fonctionnent les badges de produits Shopify sans application.
Cette étape est simple : il suffit de coller un bloc de code.
{% si product.metafields.custom.badge_text != vide %}
<div class=”custom-badge”
style=”couleur-d'arrière-plan : {{ product.metafields.custom.badge_background_color }};
couleur : {{ product.metafields.custom.badge_text_color }};”>
{{ produit.metafields.custom.badge_text }}
</div>
{% fin si %}
Capture d'écran du code :
Sauvegarde-le.
Ce code vérifie si un produit possède un badge. Si oui, il l'affiche automatiquement.
Exemple:
Si vous ajoutez « Vente » à votre métachamp, ce code l'affiche. Il suffit de copier-coller. Facile, non ?
Cela fonctionne pour un badge de promotion Shopify, « Nouveauté » ou tout autre texte de votre choix. C'est l'une des façons les plus simples d'utiliser les badges de produits Shopify sans application.
Indiquez maintenant à Shopify où afficher le badge.
{% rendu 'badges-produits' %}
Capture d'écran du code :
Sauvegarder.
Puis ouvrez modèle de produit.liquid et collez la même ligne où vous souhaitez que le badge apparaisse sur les pages produits.
Exemple:
Collez-le au-dessus de l'image pour afficher « Nouveauté » directement sur l'image. Enregistrez et actualisez.
Conseil:
Dupliquez votre thème avant de le modifier. Ainsi, vous pourrez le restaurer facilement si nécessaire.
Cette configuration vous aide à ajouter rapidement des badges aux produits Shopify et fonctionne sur n'importe quel thème.
Vous allez maintenant définir l'apparence de votre badge.
Ouvrez votre fichier CSS (base.css ou thème.css).
Faites défiler vers le bas et ajoutez ce code.
.badge personnalisé {
position : absolue ;
haut : 10 px ;
gauche : 10px ;
remplissage : 5px 10px ;
font-weight: gras;
taille de police : 14 px ;
rayon de la bordure : 5 px ;
z-index : 10 ;
espace blanc : nowrap ;
}
Capture d'écran du code :
Sauvegarder.
Vos badges apparaissent désormais dans le coin supérieur gauche de chaque image de produit.
Exemple:
Un badge de promotion Shopify rouge avec du texte blanc est désormais clairement visible sur chaque produit. Vous pouvez ajuster sa position en modifiant les chiffres en haut ou à gauche.
Voilà comment créer des badges de produits Shopify sans application. Et sans même toucher à votre mise en page principale.
Il est maintenant temps d'appliquer votre badge.
Rafraîchissez votre boutique. Vous verrez un badge doré « Meilleure vente ».
Vous venez de créer une configuration Shopify de badges de produits personnalisés qui fonctionne parfaitement sans outils externes.
Vous pouvez également créer des badges avec des balises au lieu de métachamps.
Ajoutez une balise « vente » à votre produit. Collez ensuite ce code au même endroit.
{% si product.tags contient 'vente' %}
<div class="”custom-badge”">Vente</div>
{% fin si %}
Capture d'écran du code :
Maintenant, donnez-lui du style.
.badge personnalisé {
couleur d'arrière-plan : #FF0000 ;
couleur : #FFFFFF;
}
Capture d'écran du code :
Exemple:
Les produits avec l'étiquette « soldes » affichent désormais un badge rouge « Soldes ». Retirez l'étiquette et elle disparaît.
Cette méthode Shopify de configuration manuelle des badges est plus rapide, mais moins flexible. Contrairement au badge Shopify, vous ne pouvez pas modifier les couleurs par produit sans une application utilisant des métachamps.
Dans la section suivante, nous listons quelques solutions courantes pour minimiser les erreurs. Découvrons-les.
Si les badges ne semblent pas corrects, vérifiez-les.
Badge manquant
Assurez-vous que les noms des métachamps correspondent exactement (comme badge_text).
Position du badge
Modifiez les valeurs supérieures et gauches dans le CSS.
La couleur ne s'affiche pas
Utiliser un # avant le code couleur.
Après quelques petites corrections, vos badges de produits Shopify sans l'application devraient s'afficher correctement.
Vous pouvez aller plus loin avec les badges Shopify de RabaisRayAucune programmation requise. En seulement deux clics, votre badge personnalisé est prêt.
Exemples :
Il existe un guide détaillé sur la manière dont vous pouvez personnaliser davantage vos offres en utilisant ceci remise personnalisée application.
Vous savez maintenant comment créer des badges de produits Shopify sans application. Vous n'avez eu besoin ni de coder ni d'installer quoi que ce soit.
Toi
Votre boutique est désormais plus claire et plus rapide. Commencez petit. Ajoutez un badge et testez-le. Un petit badge peut faire toute la différence sur la façon dont les acheteurs voient vos produits. Nous espérons que cet article vous a été utile. Partagez-le avec d'autres marchands Shopify qui souhaitent améliorer leur boutique. Pour plus de conseils d'experts, consultez nos autres blogs e-commerce.
Vous pouvez ajouter un badge personnalisé dans Shopify en créant des métachamps pour le texte et les couleurs du badge, puis en collant un petit extrait de code Liquid dans votre thème.
Oui. Vous pouvez modifier la forme des badges avec CSS, par exemple en les rendant ronds ou rectangulaires.
Créez un métachamp avec un texte tel que « Vente » ou « Remise » et utilisez votre code de badge pour l’afficher sur les images des produits.
Vous pouvez télécharger des images de badges de confiance et les placer sous le bouton « Ajouter au panier » dans le fichier de modèle de produit de votre thème.
Ajoutez un métachamp avec le texte « Livraison gratuite » ou utilisez une balise telle que « livraison-gratuite » et affichez-le à l'aide de l'extrait de badge.
Vous pouvez le faire avec les badges de produits Shopify sans application. Configurez des métachamps, collez un extrait et stylisez-le avec du CSS.
Vous pouvez télécharger des icônes ou utiliser du code SVG dans les sections de votre thème, tout comme vous ajoutez un extrait de badge.
Oui. Les badges renforcent la confiance, attirent l'attention et accélèrent la vente des produits.
Commencez avec notre forfait gratuit ou débloquez des fonctionnalités premium avec un essai gratuit de 14 jours.
Garantie de remboursement de 30 jours !
Français 
English 
日本語 
Deutsch 
Español 
简体中文 
Italiano