À retenir
- La couleur globale du texte se règle dans l’Éditeur de thème > Paramètres de thème > Couleurs.
- La plupart des thèmes possèdent un nuancier “Texte” qui contrôle la couleur de base de la police sur tout le site.
- Certains thèmes permettent de remplacer les couleurs par section via les paramètres de section.
- Ajouter des couleurs personnalisées sur des éléments spécifiques nécessite du CSS dans le dossier assets de votre thème.
- Fudge peut appliquer des modifications de couleur ciblées à partir d’une simple description.
Changer la couleur de la police sur Shopify se fait principalement via les paramètres de couleur de l’Éditeur de thème. Pour tout ce qui dépasse la palette globale, vous aurez besoin de CSS. Voici comment faire les deux.
Pourquoi vous pouvez nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également créé Fudge - un éditeur de boutique par IA noté 5.0 sur le Shopify App Store.
Méthode 1 - Changer la couleur globale du texte dans l’Éditeur de thème
Cela modifie la couleur de base du texte sur l’ensemble de votre boutique.
Étape 1. Allez dans Boutique en ligne > Thèmes > Personnaliser.
Étape 2. Dans la barre latérale gauche, faites défiler vers le bas et cliquez sur Paramètres du thème.
Étape 3. Ouvrez la section Couleurs.
Étape 4. Trouvez la pastille de couleur Texte (parfois appelée “Texte du corps” ou “Premier plan”). Cliquez dessus pour ouvrir le sélecteur de couleurs.
Étape 5. Entrez un code hexadécimal, utilisez le sélecteur ou ajustez les curseurs pour définir la couleur souhaitée.
Étape 6. Cliquez sur Enregistrer.
Cela met à jour la couleur du texte par défaut partout où votre thème utilise la variable CSS --color-foreground ou similaire.
Article lié : Fudge Store Editor.
Voir aussi : Modifier la taille de police des titres dans Shopify.
Article lié : Modifier la couleur des liens dans Shopify.
Méthode 2 - Modifier la couleur du texte d’une section spécifique
De nombreux thèmes Shopify modernes vous permettent de définir un jeu de couleurs par section - fond clair avec texte sombre, fond sombre avec texte clair, etc.
Étape 1. Ouvrez l’Éditeur de thème et naviguez jusqu’à la section que vous souhaitez ajuster.
Étape 2. Cliquez sur la section dans la barre latérale gauche pour ouvrir ses paramètres.
Étape 3. Cherchez le menu déroulant Jeu de couleurs (Color scheme). Sélectionnez un jeu avec le contraste de texte dont vous avez besoin.
Étape 4. Enregistrez.
Tous les thèmes n’ont pas de jeux de couleurs par section. Si vous ne voyez pas cette option, cela veut dire que votre thème applique une seule couleur de texte globale.
Méthode 3 - Modifier la couleur de la police avec du CSS
Pour un contrôle précis - la couleur d’un titre spécifique, un bloc d’alerte coloré, la couleur du texte sur un seul élément - vous avez besoin de CSS.
Étape 1. Dupliquez d’abord votre thème. Allez dans Boutique en ligne > Thèmes > Actions > Dupliquer.
Étape 2. Sur votre thème actif, allez dans Actions > Modifier le code (ou le menu des trois points > Modifier le code).
Étape 3. Ouvrez Assets > base.css (ou la feuille de style principale de votre thème).
Étape 4. Ajoutez une règle CSS en bas du fichier. Par exemple :
/* Changer tout le texte des paragraphes en gris foncé */
p { color: #333333; }
/* Changer les titres H2 pour une couleur de la marque */
h2 { color: #1a4b8c; }
/* Changer le texte à l'intérieur d'une section spécifique */
.section-announcement-bar { color: #ffffff; }Étape 5. Cliquez sur Enregistrer.
Comment trouver le bon sélecteur CSS
Faites un clic droit sur l’élément dans votre navigateur, choisissez Inspecter, et regardez les noms de classe de l’élément dans le panneau HTML. Utilisez ces classes comme sélecteurs CSS.
Article lié : Mettre à jour les couleurs et les polices dans Shopify.
Modifier la couleur de la police dans l’éditeur de Pages Shopify
Si vous modifiez une page autonome (Boutique en ligne > Pages), l’éditeur de texte enrichi inclut un outil de couleur de texte dans la barre d’outils. Sélectionnez le texte que vous souhaitez colorer, cliquez sur l’icône de couleur et choisissez votre couleur.
Cela applique un style en ligne à ce texte spécifique. Cela n’affectera aucun autre texte sur votre site.
Utiliser Fudge pour modifier la couleur de la police
Si les paramètres de couleur de l’Éditeur de thème ne vont pas assez loin, Fudge peut effectuer des modifications de couleurs ciblées sans que vous n’ayez à écrire de CSS. Décrivez ce que vous voulez :
“Change la couleur des titres sur les pages produits pour le bleu de notre marque, #1a4b8c.”
“Mets le texte de la barre d’annonces en blanc.”
Fudge écrit le CSS, l’applique à votre thème en tant que brouillon, et vous le vérifiez avant de publier.
Référence rapide
| Objectif | Méthode |
|---|---|
| Changer la couleur de tout le texte du corps | Paramètres du thème > Couleurs > Texte |
| Changer la couleur par section | Paramètres de la section > Jeu de couleurs |
| Changer la couleur d’un élément spécifique | CSS dans assets/base.css |
| Colorer un texte spécifique dans une page | Éditeur de page > Outil de couleur de texte |
Comment changer la police (typographie) dans Shopify ?
Changer la famille de polices — la typographie elle-même, pas sa couleur — se fait dans Paramètres du thème → Typographie, et non dans Couleurs. Vous y trouverez des sélecteurs séparés pour la police des titres et la police du corps. Pour un guide complet, consultez comment mettre à jour les polices dans Shopify.
Comment ajouter une nouvelle couleur à mon thème Shopify ?
Allez dans Paramètres du thème → Couleurs (ou Jeux de couleurs dans les thèmes récents comme Dawn). Cliquez sur n’importe quel échantillon de couleur pour ouvrir le sélecteur et saisir votre code hexadécimal. Pour les couleurs qui ne sont pas disponibles dans l’Éditeur de thème — comme les couleurs d’icônes ou les états de survol — vous devrez les ajouter via CSS. Consultez notre guide sur la mise à jour des couleurs de marque sur Shopify pour la procédure complète.
FAQ
Deux causes courantes : vous avez modifié un thème en brouillon mais le thème publié (en ligne) est resté le même, ou votre thème utilise des schémas de couleurs (color schemes) par section qui remplacent la couleur globale du texte. Dans les thèmes récents (Dawn, Sense, Refresh), chaque section peut épingler son propre schéma — modifiez le schéma de la section, ou mettez à jour chaque schéma en cours d'utilisation.
La couleur de la police contrôle le corps du texte et les titres. La couleur des liens gère les balises d'ancrage (<a>) et se règle séparément — généralement dans Paramètres du thème → Couleurs sous "Lien" ou "Accent". Changer l'un n'affecte pas l'autre ; si vos liens héritent de la couleur du corps du texte, c'est parce que le thème l'a délibérément configuré de cette manière.
Oui. Dans l'éditeur de texte riche de vos pages ou descriptions de produit, sélectionnez le texte et utilisez le sélecteur de couleur de la barre d'outils — cela appliquera des styles en ligne (inline styles) uniquement à ce texte. Pour un contrôle par élément à l'intérieur des sections de votre thème, décrivez ce que vous voulez à Fudge ("mettre en rouge le titre 'Nouvel arrivage' sur la page d'accueil") et il enveloppera le texte dans une classe et écrira le CSS pour vous. Manuellement : enveloppez le texte avec un <span class="..."> et ciblez-le en CSS.
C'est une question de spécificité CSS. Les styles des thèmes utilisent souvent des sélecteurs plus spécifiques qu'une règle générique p { color: ... }. Vous devez égaler ou dépasser la spécificité du thème (ex. : .product-description p { color: ... }) ou utiliser !important de manière exceptionnelle. Consultez les DevTools de votre navigateur — le panneau Styles montre quelle règle l'emporte et pourquoi.
Pas directement. Toutefois, un mauvais contraste entre le texte et l'arrière-plan fait baisser vos scores d'accessibilité (WCAG), que Google utilise de façon indirecte comme signal de classement. Visez un ratio de contraste d'au moins 4.5:1 pour le corps du texte. Utilisez un vérificateur de contraste avant de valider des changements de couleur trop audacieux.
