Ajout d'une CSS personnalisée à votre thème
Une feuille de style en cascade (CSS) permet de modifier l’affichage des éléments dans votre thème et de contrôler l’apparence de plusieurs pages à la fois. Vous pouvez personnaliser votre thème au-delà des paramètres intégrés à un thème en utilisant la fonctionnalité CSS personnalisée. Vous pouvez ajouter du langage CSS personnalisé à l’ensemble de votre thème ou à une section spécifique d’un modèle de votre thème. Le langage CSS personnalisé n’est pas pris en charge à la page Paiement.
La personnalisation de votre CSS nécessite de connaître CSS et HTML. Avant de personnaliser votre thème, assurez-vous de bien comprendre le niveau d’assistance disponible.
Sur cette page
Considérations relatives à l’utilisation de CSS personnalisé
Avant d’ajouter une CSS personnalisée à votre thème, tenez compte des considérations suivantes :
-
Les sélecteurs CSS suivants ne sont pas pris en charge dans les CSS personnalisées :
- Les règles de
@import,@charsetet@namespacene peuvent pas être utilisées - Pour le CSS au niveau des sections, seules les règles
@media,@container,@layeret@supportssont autorisées - Pour les CSS de section, vous ne pouvez pas cibler l’ID ni les classes de l’élément d’enveloppement de section Shopify rendus par le thème avec la classe
shopify-section
- Les règles de
Si une règle CSS personnalisée est déclarée avec la balise qui enveloppe l’élément de section parent, celle-ci est considérée comme une balise décroissante et la règle de style est appliquée à cette section.Notez que, par défaut, la section mère est enveloppée dans une balise
<div>, mais celle-ci peut être définie sur l’une des valeurs autorisées dans le schéma de section par les développeurs de thèmes.Actuellement, seul le domaine https://cdn.shopify.com est autorisé lorsque vous utilisez des URL dans une CSS personnalisée.
Les polices personnalisées ne sont pas limitées.Toutefois, les polices personnalisées constituent une ressource distincte, qui est téléchargée par les navigateurs avant que le texte ne soit rendu, ce qui peut avoir une incidence sur la performance globale d’une boutique.Vous êtes responsable de vérifier que les polices personnalisées n'affectent pas négativement votre boutique en ligne.Découvrez comment utiliser des polices personnalisées dans votre thème.
Les règles CSS qui affectent l’intégralité du thème sont limitées à 1 500 caractères.
Les règles CSS qui affectent une section spécifique sont limitées à 500 caractères.
En fonction des sélecteurs ou des classes CSS que vous utilisez, la mise à jour de votre thème pourrait entraver le fonctionnement de votre CSS personnalisée.
Shopify ne prend pas en charge les personnalisations de thème avancées. Si vous rencontrez une erreur liée à ces limitations dans votre CSS personnalisée et que vous ne pouvez pas déterminer la cause de l’erreur, consultez la liste des autres ressources d’assistance disponibles.
Ajouter du code CSS personnalisé
Vous pouvez ajouter une CSS personnalisée à tout votre thème, qui affecte toutes les pages de votre boutique en ligne à l’exception de la page de paiement. Par exemple, vous pouvez modifier la façon dont les boutons s’affichent sur l’ensemble de votre boutique.
Étapes :
- Dans votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Cliquez sur Personnaliser.
- Cliquez sur Theme settings (Paramètres du thème).
- Cliquez sur CSS personnalisée.
- Ajoutez votre code.
- Cliquez sur Enregistrer.
Vous pouvez également ajouter un CSS personnalisé à une section spécifique de votre thème. Si vous ajoutez un CSS personnalisé à une section de votre thème, sa portée est limitée à cette section. Par exemple, vous pouvez appliquer une taille de police personnalisée ou une couleur d’arrière-plan à une seule section.
Étapes :
- Dans votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
- Cliquez sur Personnaliser.
- Cliquez sur la section à laquelle vous souhaitez ajouter une CSS.
- Au bas du panneau des propriétés de la section, cliquez sur CSS personnalisée.
- Ajoutez votre code.
- Cliquez sur Enregistrer.
Ressources supplémentaires pour CSS
La personnalisation de votre CSS nécessite de connaître CSS et HTML. Avant de personnaliser votre thème, assurez-vous de bien comprendre le niveau d’assistance disponible.
Si vous souhaitez en savoir plus sur la CSS, vous pouvez explorer certaines des ressources suivantes :