L'un des atouts majeurs de la plateforme Shopify est la grande variété de thèmes disponibles (gratuits comme payants). Il arrive toutefois que vous ayez besoin d'ajuster légèrement la mise en page ou de modifier les couleurs. Pour certaines de ces modifications (surtout les plus avancées), vous devrez modifier le fichier CSS du thème. Vous pouvez également utiliser le CSS personnalisé pour modifier le design des applications tierces installées sur votre boutique. Quelle est la meilleure façon de procéder ?
Option 1 : Ajouter du CSS personnalisé via l'éditeur de thème (recommandé)
En février 2023, Shopify a introduit une nouvelle façon de gérer le CSS personnalisé. C'est désormais une fonctionnalité native de chaque thème conçu par Shopify (comme Dawn) et l'option que nous recommandons pour gérer le CSS de votre boutique.
Les principaux avantages sont une gestion simplifiée du CSS, un aperçu en direct des modifications, la prise en charge des mises à jour de thème, ainsi qu'un validateur et des suggestions intégrés.
Pour ajouter du CSS personnalisé via l'éditeur de thème, veuillez suivre ces étapes :
- Accédez à l'admin de votre boutique > Canaux de vente > Boutique en ligne > Personnaliser
- Accédez aux paramètres du thème (icône pinceau dans le menu de gauche) > CSS PERSONNALISÉ
- Ajoutez le CSS souhaité, vérifiez l'aperçu en direct et cliquez sur Enregistrer si tout est correct
Le principal inconvénient est la limite de caractères : 500 caractères par section et 1 500 caractères pour l'ensemble du thème.
Option 2 : Modifier le design du thème (couleurs, polices, CSS, etc.)
Parfois, il n'est pas nécessaire de modifier le CSS, il suffit d'utiliser le personnalisateur de thème intégré. Il offre diverses options selon le thème utilisé, mais vous pourrez généralement modifier uniquement les éléments standards comme les couleurs, les polices et parfois les mises en page.
Certains thèmes possèdent également une section intitulée « CSS personnalisé » où vous pouvez ajouter votre code. C'est pratiquement identique à la modification d'un fichier CSS de thème (voir ci-dessous) : une fois le thème mis à jour, vos modifications seront perdues, à moins que le thème n'utilise un système de mise à jour avancé, ce qui est rare.
Option 3 : Ajouter/modifier le CSS personnalisé dans votre thème
La méthode courante consiste à modifier le fichier CSS existant situé dans le code du thème. Il s'appelle généralement theme.scss.liquid ou base.css dans les nouveaux thèmes Shopify 2.0 (ex: Dawn). Vous pouvez le trouver en allant dans l'admin de votre boutique > Boutique en ligne > Thèmes > Actions > Modifier le code > dossier Assets.
Une fois ouvert, vous pouvez modifier ou ajouter le CSS de votre choix. L'inconvénient est qu'en cas de changement ou de mise à jour du thème, votre CSS sera perdu. Il est conseillé de regrouper toutes vos personnalisations dans une section nommée « CSS personnalisé » ou similaire, afin de pouvoir les copier-coller facilement vers un nouveau thème si nécessaire.
Option 4 : Créer un fichier CSS personnalisé
Cette méthode est très similaire à l'option 2, mais au lieu de modifier un fichier CSS existant, vous en créez un nouveau. L'avantage principal est qu'en cas de mise à jour ou de changement de thème, vous pouvez facilement reconnecter votre fichier CSS.
Pour créer votre propre fichier CSS, accédez à l'administration de votre boutique > Boutique en ligne > Thèmes > Actions > Modifier le code > dossier Assets, puis cliquez sur Ajouter un nouvel actif. Dans la fenêtre contextuelle, sélectionnez Créer un fichier vierge et nommez-le comme vous le souhaitez (par exemple, custom.css).
Une fois votre nouveau fichier CSS créé, vous pouvez y ajouter vos styles. L'étape cruciale consiste à « appeler » ce fichier depuis votre thème pour qu'il soit pris en compte. Pour ce faire, allez dans le dossier Layout et ouvrez le fichier theme.liquid. Ajoutez le code Liquid suivant dans la section <head>, en remplaçant "custom.css" par le nom de votre fichier.
Lorsque vous mettez à jour ou changez de thème, vous devrez copier à nouveau ce code dans theme.liquid. Cependant, votre fichier CSS personnalisé restera toujours dans votre dossier Assets.
Option 5 : Ajouter/modifier le CSS personnalisé via une application tierce
Cette dernière méthode nécessite l'installation d'une application tierce, mais offre un avantage majeur : tout le CSS personnalisé saisi dans l'application est indépendant de votre thème actuel. Vous pouvez donc changer ou mettre à jour vos thèmes sans perdre vos styles, ou cibler le CSS pour chaque thème installé, comme illustré ci-dessous.
Il existe quelques applications permettant de le faire, dont certaines sont gratuites. L'inconvénient est que chaque application peut impacter les performances de votre boutique, surtout si le CSS est chargé via un fichier distinct. Évaluez donc soigneusement la méthode la plus adaptée à vos besoins.
Si vous avez besoin d'aide pour personnaliser le CSS de votre boutique ou modifier votre thème, n'hésitez pas à nous contacter ; notre équipe d'experts sera ravie de vous accompagner.
