À retenir
- La couleur globale du texte se configure dans l’Éditeur de thème > Paramètres du thème > Couleurs.
- La plupart des thèmes ont une option de couleur “Texte” qui contrôle la couleur de base de la police sur tout le site.
- Des modifications de couleur par section sont possibles dans certains thèmes via les paramètres de section.
- Les couleurs personnalisées pour des éléments spécifiques nécessitent d’ajouter du CSS dans le dossier assets de votre thème.
- Fudge peut appliquer des changements de couleur ciblés à partir d’une simple description textuelle.
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 va au-delà de 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 IA avec une note de 4.8 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 - une couleur d’en-tête spécifique, un bloc de mise en évidence 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.
Étape 3. Ouvrez Assets > base.css (ou la feuille de style principale de votre thème).
Étape 4. Ajoutez une règle CSS à la fin du fichier. Par exemple :
/* Change le texte de tous les paragraphes en gris foncé */
p {
color: #333333;
}
/* Change les en-têtes H2 pour une couleur de marque */
h2 {
color: #1a4b8c;
}
/* Change 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 principal | 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 pages > Outil de couleur du 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 brouillon mais le thème en ligne reste inchangé, ou votre thème utilise des jeux de couleurs par section qui remplacent la couleur de texte globale. Dans les thèmes modernes (Dawn, Sense, Refresh), chaque section peut épingler son propre jeu de couleurs — modifiez le jeu de la section, ou mettez à jour tous les jeux utilisés.
La couleur de police contrôle le corps du texte et les titres. La couleur des liens contrôle 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 texte principal, c'est parce que le thème a été configuré délibérément ainsi.
Oui. Dans l'éditeur de texte enrichi des pages ou de la description produit, sélectionnez le texte et utilisez l'outil de couleur du texte de la barre d'outils — cela applique des styles en ligne uniquement à ce texte. Pour un contrôle par élément dans les sections du thème, décrivez ce que vous voulez à Fudge ("mettre le titre 'Nouvel arrivage' de la page d'accueil en rouge") et il enveloppera le texte dans une classe pour écrire le CSS. Manuellement : enveloppez le texte dans un <span class="..."> et ciblez-le en CSS.
La spécificité CSS. Les styles de thème utilisent souvent des sélecteurs plus spécifiques qu'une règle générique p { color: ... }. Essayez d'égaler ou de dépasser la spécificité du thème (par ex., .product-description p { color: ... }) ou utilisez !important avec parcimonie. Vérifiez les DevTools de votre navigateur — le panneau Styles montre quelle règle l'emporte et pourquoi.
Pas directement. Mais un faible contraste entre le texte et l'arrière-plan nuit aux scores d'accessibilité (WCAG), que Google utilise comme un signal de classement léger. Visez un contraste d'au moins 4.5:1 pour le texte principal. Utilisez un outil de vérification de contraste avant de valider des changements de couleur trop osés.
