Modifier le CSS de son thème Shopify en toute sécurité

Sommaire

Notre objectif à travers cet article est d'aider les non-développeurs à comprendre comment modifier le CSS de son thème Shopify en toute sécurité.

Qu'est-ce qu'une feuille de style CSS ?

Reprenons les bases en quelques mots ...

Alors que le HTML est là pour réaliser la structure d'un site web, les feuilles de style en cascade ou CSS sont utilisées pour définir le rendu visuel de celui-ci.

Exemple : un bouton est réalisé à partir de HTML mais le fait qu'il soit vert est dû au CSS.

HTML vs CSS

Maintenant qu'on a définit ce qu'était le CSS, nous allons voir comment le modifier ou en ajouter en toute sécurité dans son thème Shopify.

Faire une sauvegarde

Avant de toucher quoi que ce soit, il est important de faire une sauvegarde de la version actuelle de son thème. En effet on va préférer travailler sur la copie plutôt que sur la version publiée.

Pour créer une sauvegarde, on va dupliquer la version publiée de son thème en effectuant les actions suivantes : Online Store > Themes > Actions > Duplicate.

Dupliquer un thème

Note : vous pouvez également utiliser notre app GoBack pour facilement sauvegarder votre thème.

Info : Travaillez toujours sur la sauvegarde, même pour de petites modifications. Cela évite de faire bugger la version en ligne et vous permet de mieux suivre les changements du thème.

Editer le code de son thème Shopify

Le thème étant dupliqué correctement, nous allons pouvoir modifier sa copie.

Pour cela, cliquez sur celle-ci puis sur Edit code.

Edit code

Maintenant que vous êtes dans le code de votre thème, nous allons nous intéresser à 2 fichiers :

  • theme.liquid
  • custom.scss.liquid

theme + custom css

theme.liquid = le fichier principal qui est chargé avec chaque page.

custom.scss.liquid = fichier CSS personnalisé qui remplace le style de base de thème.

Vous n'avez pas de fichier custom CSS ?

Ajoutez un nouvel asset avec un fichier vide appelé custom.scss.liquid.

Puis intégrez-le dans theme.liquid, sous le fichier theme.scss.css, comme la capture d'écran ci-dessous :

custom.scss.liquid

Code à insérer : {{ 'custom.scss.css' | asset_url | stylesheet_tag }}

asset_url

Une fois ceci fait, vous pouvez commencer à ajouter des modifications CSS dans custom.scss.liquid.

Info 1 : L'ordre est important. En le plaçant sous le CSS de base de votre thème, votre CSS personnalisé viendra remplacer les règles du CSS de base.

Info 2 : En utilisant .scss au lieu de .css, votre code CSS sera automatiquement compressé sur le serveur, ce qui rendra votre fichier plus léger.

Info 3 : Dans certain thème, le CSS de base peut prendre le nom styles.scss.liquid ou default.scss.liquid au lieu de theme.scss.liquid.

Pourquoi ne pas simplement ajouter du CSS à la fin de theme.scss.liquid ? 

Vous pouvez le faire, mais si plus tard vous mettez à jour votre thème, toutes vos modifications personnalisées pourraient être effacées. Avoir son CSS personnalisés dans un fichier séparé est plus sûr et plus facile à modifier/organiser.

Commenter son code

Il est important d’ajouter des commentaires sur les blocs de codes pour permettre aux autres personnes, ou vous plus tard, de savoir ce que celui-ci fait.

Pour commenter c'est tout simple : on entoure notre commentaire par /* et */.

Exemple :

/* Couleur prix page produit */
.product_price {
color:black;
}

Le mot de la fin

Vous avez maintenant toutes les cartes en main pour modifier le CSS de votre thème Shopify en toute sécurité. Pensez également à faire des sauvegardes régulières ou utilisez une app qui s'en occupera à votre place comme GoBack.

Laissez un commentaire

Veuillez noter que les commentaires doivent être approvés avant d'être affichés