Comment ajouter un fichier CSS personnalisé à votre boutique Shopify

Tomas Janu

|

June 14, 2024

Comment ajouter un fichier CSS personnalisé à votre boutique Shopify

Apprenez à ajouter ou à modifier le CSS personnalisé de votre boutique Shopify. Vous pouvez modifier le fichier theme.scss.liquid ou base.css ou utiliser une application tierce.

Comment ajouter un fichier CSS personnalisé à votre boutique Shopify

L'un des principaux atouts de la plateforme Shopify est la grande variété de thèmes de boutique (gratuits et payants). Mais il peut arriver que vous ayez besoin d'ajuster légèrement la mise en page ou de changer les couleurs. Pour certains de ces changements (en particulier les plus avancés), 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 un CSS personnalisé via l'éditeur de thème (recommandé)

En février 2023, Shopify a introduit une nouvelle façon de gérer les feuilles de style CSS personnalisées. C'est maintenant une partie native de chaque thème construit par Shopify (c'est-à-dire Dawn) et notre option recommandée pour gérer le CSS sur votre boutique.

Les principaux avantages sont la gestion simple des CSS, la prévisualisation en direct des modifications, la prise en charge des mises à jour de thèmes, ainsi qu'un validateur et des suggestions intégrés.

Adding custom CSS via Shopify theme editor
Ajout de feuilles de style CSS personnalisées via l'éditeur de thème de Shopify

Pour ajouter des feuilles de style CSS personnalisées via l'éditeur de thème, veuillez suivre les étapes suivantes :

  1. Accédez à l'administration de votre boutique > Canaux de vente > Boutique en ligne > Personnaliser
  2. Allez dans les paramètres du thème (icône en forme de pinceau dans le menu de gauche) > CUSTOM CSS
  3. Ajoutez le CSS personnalisé selon vos besoins, vérifiez l'aperçu en direct et cliquez sur Enregistrer si tout est bon

Option 2 - Modifier le design du thème (couleurs, polices, CSS, etc.)

Parfois, il n'est pas nécessaire d'éditer le CSS, il suffit d'utiliser le personnalisateur de thème intégré. Il offre diverses options en fonction du thème que vous utilisez, mais la plupart du temps, vous n'aurez qu'à modifier des éléments standard tels que les couleurs, les types de polices, et parfois les mises en page.

Editing store styles via theme customization
Modifier les styles de la boutique via la personnalisation du thème

Certains thèmes disposent également d'une section appelée "Custom CSS" (CSS personnalisé) dans laquelle vous pouvez ajouter votre CSS. C'est pratiquement similaire à l'édition d'un fichier CSS de thème (voir ci-dessous) car une fois que vous mettez à jour le thème, il sera également perdu. A moins que le thème n'utilise un outil de mise à jour avancé, ce qui n'est pas le cas de beaucoup d'entre eux.

Option 3 - Ajouter/éditer le CSS personnalisé dans votre thème

La façon la plus courante d'éditer le CSS est de le faire à l'intérieur du fichier CSS existant situé dans le code du thème. Il est généralement appelé theme.scss.liquid ou base.css dans les nouveaux thèmes Shopify 2.0 (c'est-à-dire Dawn). Vous pouvez le trouver en allant dans l'administration de votre boutique > Boutique en ligne > Thèmes > Actions > Modifier le code > Dossier Assets.

Adding custom CSS via theme.scss.liquid file
Ajouter un CSS personnalisé via le fichier theme.scss.liquid

Une fois que vous l'avez ouvert, vous pouvez modifier ou ajouter n'importe quelle feuille de style CSS. L'inconvénient est que si vous changez ou mettez à jour le thème, votre CSS sera perdu. C'est une bonne pratique de mettre toutes vos personnalisations dans une section appelée "Custom CSS" ou similaire et de les copier-coller dans le nouveau thème au cas où vous en auriez besoin.

Option 4 - Créer le fichier CSS personnalisé

Cette option est très similaire à l'option 2, mais au lieu de modifier le fichier CSS existant, vous en créerez un nouveau. L'avantage principal est qu'une fois le thème mis à jour ou modifié, vous pouvez facilement connecter votre fichier CSS.

Pour créer votre propre fichier CSS, allez dans l'administration de la boutique > Boutique en ligne > Thèmes > Actions > Modifier le code > Dossier Assets, et cliquez sur Add a new asset. Dans la fenêtre contextuelle, sélectionnez Créer un fichier vierge et donnez-lui le nom que vous souhaitez (par exemple, custom.css).

Adding the custom CSS file to theme.liquid
Ajout du fichier CSS personnalisé au fichier theme.liquid

Une fois le nouveau fichier CSS créé, vous pouvez ajouter votre CSS personnalisé. L'important est de l'appeler depuis votre thème, afin qu'il soit réellement utilisé. Pour ce faire, allez dans le dossier Layout et ouvrez un fichier appelé theme.liquid. Ajoutez le code liquide suivant à la section <head> où "custom.css" est le nom de votre fichier CSS personnalisé.

Lorsque vous mettez à jour ou modifiez votre thème, vous devez copier à nouveau ce code dans theme.liquid. Mais le fichier CSS personnalisé restera toujours dans votre dossier assets.

Option 5 - Ajouter/modifier le CSS personnalisé via une application tierce

La dernière méthode nécessite l'installation d'une application tier ce, mais elle présente un grand avantage. Toutes les feuilles de style CSS personnalisées saisies dans l'application sont indépendantes de votre thème actuel. Vous pouvez donc changer ou mettre à jour les thèmes comme vous le souhaitez, mais le CSS restera inchangé. Vous pouvez également cibler le CSS pour chaque thème installé, comme le montre l'exemple ci-dessous.

Adding custom CSS via Custom CSS & JS app
Ajouter des feuilles de style CSS personnalisées via l'application Custom CSS & JS

Il existe quelques applications qui font cela et certaines d'entre elles sont même gratuites. L'inconvénient est que chaque application a un impact sur les performances de la boutique. Surtout si le CSS est chargé via un fichier différent. Réfléchissez donc attentivement à la meilleure façon de procéder pour votre boutique.

Start your Shopify store for free and pay only $1 for the first monthStart your Shopify store for free and pay only $1 for the first month

Tomas Janu

Tom adore écrire sur les ventes incitatives, l'optimisation des conversions et les tendances du commerce électronique. Il est l'un de nos cofondateurs, et vous pouvez parfois lui parler en contactant notre équipe d'assistance. Suivez-le sur LinkedIn pour obtenir d'autres conseils et actualités liés à Shopify.
Essayer gratuitementCandy Rack preview

Les derniers articles

Tous les articles

Boostez votre activité Shopify avec nos applications

Toutes nos applications sont conçues pour vous aider à développer votre activité Shopify. Découvrez-les et profitez de la période d'essai gratuite.

Booster sur Shopify