Table des matières
Introduction
Avez-vous déjà pensé à simplifier l'esthétique de votre boutique Shopify en supprimant l'étiquette de soldes sur les produits, mais vous sentiez-vous embrouillé par les aspects techniques ? Vous n'êtes pas seul. La présence d'une étiquette de soldes, bien qu'avantageuse pour mettre en valeur les offres, peut ne pas correspondre à la stratégie visuelle de chaque propriétaire de boutique. Ce guide vise à démystifier le processus, à vous équiper des connaissances nécessaires pour supprimer ces étiquettes et à garantir que la présentation de votre site corresponde à l'éthique de votre marque. Que vous cherchiez à maintenir une apparence haut de gamme ou simplement à désencombrer vos pages produits, ce billet de blog couvre tous les aspects. Vous partirez avec des connaissances pratiques qui non seulement amélioreront l'expérience utilisateur de votre boutique, mais répondront également à vos besoins uniques en matière de branding.
Plongeons dans les détails de comment vous pouvez accomplir cet exploit, personnalisé pour différents thèmes et sans avoir besoin d'une expertise en codage approfondie.
Comprendre les bases
Avant d'entrer dans les détails, établissons ce qu'est une étiquette de soldes dans le contexte de Shopify. Ces étiquettes sont des libellés générés automatiquement qui apparaissent sur les images des produits pour indiquer des articles soldés à des clients potentiels. Bien qu'efficaces pour les promotions, elles peuvent ne pas convenir à chaque stratégie marketing ou choix esthétique.
Le rôle des thèmes Shopify
Les thèmes Shopify jouent un rôle crucial dans l'affichage des étiquettes de soldes, car chaque thème a sa propre base de code et ses éléments de design uniques. Cela signifie que la méthode pour supprimer les étiquettes de soldes peut varier considérablement d'un thème à un autre. Des thèmes comme Boundless, PageFly, Dawn, et Debutify, entre autres, offrent leurs propres options de personnalisation et structures de codage uniques.
Guide étape par étape par thème
Pour Boundless et thèmes similaires
- Accédez à votre tableau de bord d'administration Shopify, allez sur 'Boutique En Ligne' > 'Thèmes'.
- Choisissez votre thème et cliquez sur 'Actions' > 'Éditer le code'.
- Dans le dossier 'Assets', localisez
theme.scss.liquidoutheme.cssselon la structure de votre thème. - Collez le snippet CSS suivant en bas de ce fichier :
.product-item .product-item__badge { display: none !important; }Ceci cache le badge de soldes sur tous les produits en ciblant sa classe CSS spécifique.
Utilisation de PageFly - Constructeur de pages avancé
Pour ceux qui utilisent PageFly ou des applications similaires de constructeur de pages pour une personnalisation supplémentaire :
- Depuis le tableau de bord de PageFly, sélectionnez la page contenant les produits étiquetés en promotion.
- Accédez à l'éditeur HTML/CSS de la page et insérez le même snippet CSS que celui utilisé ci-dessus, adapté à l'environnement PageFly.
Pour Dawn et autres thèmes responsifs
Le processus est similaire mais adapté aux considérations de design responsif, surtout pour les vues mobiles :
- Suivez les premières étapes pour accéder à l'éditeur de code de votre thème.
- Insérez un snippet CSS responsif comme ci-dessous à la fin de votre fichier
theme.cssoutheme.scss.liquid:
@media (max-width: 767px){ .product-item .product-item__badge { display: none !important; }}Ceci garantit que le badge de soldes est caché sur tous les appareils, assurant la cohérence dans l'apparence de votre boutique.
Quand les extraits de code ne fonctionnent pas
Dans certains cas, les interventions directes dans le code du thème peuvent ne pas donner de résultats en raison de mises à jour du thème, de personnalisations ou de contraintes spécifiques du thème. Voici ce que vous pouvez faire :
- Vérifiez le nom de la classe CSS : Assurez-vous que le nom de classe
.product-item__badgecorrespond à celui utilisé dans votre thème. Les noms de classe peuvent varier. - Contactez le support du thème : Pour les thèmes premium comme Debutify ou Studio, contacter le développeur du thème pour un support peut fournir une solution plus adaptée.
- Utilisez un Expert Shopify : Si vous n'êtes pas à l'aise pour modifier le code du thème ou si vos tentatives n'ont pas fonctionné, engager un Expert Shopify pourrait être un investissement précieux.
Conclusion
Supprimer les étiquettes de soldes dans Shopify demande une combinaison de réflexion stratégique et d'action technique. En comprenant les exigences spécifiques de votre thème et en appliquant les ajustements CSS appropriés, vous pouvez obtenir une présentation plus propre et plus alignée sur votre marque pour vos produits. N'oubliez pas, l'objectif n'est pas simplement de supprimer une étiquette, mais d'améliorer l'expérience d'achat pour vos clients potentiels.
Grâce aux étapes décrites ci-dessus, nous espérons avoir fourni un chemin clair pour y parvenir, quelle que soit votre expertise en codage ou le thème que votre boutique utilise.
FAQ
1. Est-ce que retirer les étiquettes de soldes affectera le SEO de ma boutique ?
Non, retirer les étiquettes de soldes est un changement esthétique et n'affecte pas le SEO de votre boutique.
2. Puis-je retirer les étiquettes de soldes de produits spécifiques uniquement ?
Oui, en personnalisant le code CSS et en ciblant des produits spécifiques en fonction de leurs classes ou IDs uniques, vous pouvez masquer sélectivement les étiquettes de soldes.
3. Est-il possible de rétablir l'étiquette de soldes après l'avoir retirée ?
Absolument. Retirer le snippet CSS responsable de cacher les étiquettes de soldes les rendra à nouveau visibles.
4. Est-ce que cacher l'étiquette de soldes affecte l'affichage du 'Prix de comparaison' ?
Non, le prix de comparaison sera toujours affiché car il est géré différemment dans l'interface d'administration de Shopify.
5. Est-ce que ces changements peuvent être prévisualisés avant d'être publiés ?
Oui, Shopify vous permet de prévisualiser les modifications en temps réel via l'éditeur de thème avant qu'elles ne soient publiées pour vos clients.
