L’essentiel
- De nombreux thèmes proposent une couleur « Accentuation » ou « Lien » dans Éditeur de thème > Paramètres du thème > Couleurs.
- Si votre thème n’a pas de paramètre dédié pour la couleur des liens, ciblez le sélecteur
adans le CSS.- Vous pouvez styliser séparément les liens au survol en utilisant
a:hoveren CSS.- Fudge peut modifier la couleur de vos liens à partir d’une simple description textuelle si vous préférez éviter d’écrire en CSS.
La couleur des liens est l’un de ces paramètres que certains thèmes affichent directement, tandis que d’autres la cachent profondément dans le code. Voici où la chercher et comment la modifier dans un cas comme dans l’autre.
Pourquoi nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également développé Fudge - un éditeur de boutique assisté par IA qui bénéficie d’une note de 5,0 sur le Shopify App Store.
Méthode 1 - Vérifiez d’abord Paramètres du thème > Couleurs
De nombreux thèmes Shopify modernes intègrent un paramètre de couleur exclusivement dédié aux liens.
Étape 1. Allez dans Boutique en ligne > Thèmes > Personnaliser.
Étape 2. Cliquez sur Paramètres du thème dans la barre latérale gauche.
Étape 3. Ouvrez la section Couleurs.
Étape 4. Cherchez une pastille nommée Lien, Accentuation ou Accentuation principale. Si elle existe, cliquez dessus pour modifier la couleur.
Étape 5. Cliquez sur Enregistrer.
Ce que contrôle généralement la couleur d‘“accentuation”
Dans les thèmes qui utilisent une couleur d’accentuation (accent) plutôt qu’une couleur de lien spécifique, cette couleur affecte généralement :
- Le texte des hyperliens
- L’arrière-plan des boutons (boutons principaux)
- La mise en valeur des icônes
- Les éléments actifs du menu de navigation
Changer la couleur d’accentuation modifiera tout cela en même temps. Si vous souhaitez uniquement modifier la couleur des liens - et non celle des boutons - vous devrez utiliser le CSS.
Méthode 2 - Modifier la couleur des liens en CSS
Si votre thème n’a pas de couleur de lien dédiée dans l’Éditeur de thème, ou si vous voulez que vos liens aient une couleur différente de celle de vos boutons, le CSS est la meilleure solution.
Étape 1. Dupliquez 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 le dossier Assets > base.css (ou la feuille de style principale de votre thème - cherchez le plus gros fichier .css dans le dossier Assets).
Étape 4. Ajoutez ces règles CSS tout en bas du fichier :
/* Couleur par défaut des liens */
a { color: #1a4b8c; }
/* Couleur des liens au survol (hover) */
a:hover { color: #0d2e5e; }
/* Liens uniquement à l'intérieur d'une zone spécifique */
.rte a { color: #1a4b8c; }Étape 5. Cliquez sur Enregistrer.
La classe .rte
Dans de nombreux thèmes Shopify, le contenu de l’éditeur de Pages et des descriptions de produits est imbriqué dans une classe nommée .rte (rich text editor). L’utilisation de .rte a comme sélecteur permet de cibler uniquement les liens dans ces zones de contenu, sans impacter les liens de la navigation ou le texte des boutons.
Article lié : Mettre à jour les couleurs et les polices sur Shopify.
Styliser les liens soulignés
Par défaut, les liens dans la vaste majorité des thèmes sont soit toujours soulignés, soit jamais soulignés. Vous avez la possibilité de gérer ce comportement avec le CSS :
/* Supprime le soulignement de tous les liens */
a { text-decoration: none; }
/* Ajoute le soulignement uniquement au survol */
a:hover { text-decoration: underline; }
/* Souligne uniquement les liens présents dans le corps du texte */
.rte a { text-decoration: underline; }Modifier la couleur des liens de navigation
Les liens de navigation et ceux du corps de page ont des styles distincts dans la plupart des thèmes.
Dans l’Éditeur de thème, rendez-vous dans la section Paramètres du thème > Couleurs et cherchez une option appelée Navigation ou En-tête.
Si vous ne trouvez rien, ciblez les liens de navigation (nav) en CSS. Faites un clic droit sur un de ces liens dans votre navigateur, choisissez Inspecter, et relevez les noms des classes CSS. Ajoutez ensuite une règle comme celle-ci :
.header__menu-item a { color: #333333; }Le nom exact de la classe varie d’un thème à l’autre.
L’utilisation de Fudge pour modifier la couleur des liens
Si l’idée d’écrire en langage CSS ne vous enthousiasme pas, Fudge s’en occupe parfaitement pour vous. Vous n’avez qu’à décrire ce que vous souhaitez accomplir :
“Bascule la couleur de tous les hyperliens sur la valeur #1a4b8c. Au survol, obscurcis-les en #0d2e5e.”
“Fais que les liens dans les descriptions de produits soient bleus et soulignés.”
Fudge se chargera d’écrire le CSS et de l’appliquer en tant que brouillon. Il ne vous restera plus qu’à vérifier et le publier.
Article lié : Changer la couleur de la police sur Shopify.
Aide-mémoire
| Objectif | Méthode |
|---|---|
| Changer la couleur de tous les liens | Paramètres du thème > Couleurs > Accentuation/Lien, ou CSS a {} |
| Changer la couleur des liens au survol | CSS a:hover {} |
| Changer uniquement les liens dans le contenu des pages | CSS .rte a {} |
| Changer la couleur des liens de la barre de navigation | Paramètres du thème > Couleurs > En-tête, ou en CSS en ciblant un sélecteur de nav |
Comment modifier l’image qui s’affiche lorsqu’on partage un lien Shopify sur les réseaux sociaux ?
C’est un paramètre différent de la couleur des liens — c’est votre image Open Graph (OG). Pour changer l’image qui s’affiche quand l’URL de votre boutique est partagée sur Facebook, Twitter ou iMessage, allez dans Boutique en ligne → Préférences → Image de partage social et téléversez l’image de votre choix. Par défaut, les pages individuelles de produits et de collections utilisent leur propre première image. Pour personnaliser les images OG par page, modifiez la section SEO de chaque page. Cela n’a rien à voir avec la couleur des liens sur votre boutique.
FAQ
Quelle est la différence entre la couleur d’accentuation et la couleur des liens dans Shopify ?
La couleur d’accentuation est une couleur de thème plus large qui contrôle plusieurs éléments : les liens, l’arrière-plan des boutons principaux, la surbrillance des icônes et les états de focus. La couleur des liens (lorsqu’elle est proposée séparément) ne contrôle que les balises <a>. Si votre thème propose les deux, la couleur des liens prend le dessus sur la couleur d’accentuation pour les liens. Si seule la couleur d’accentuation est disponible, tous ces éléments partagent la même couleur.
Les liens doivent-ils être soulignés dans Shopify ?
Dans le corps du texte (descriptions de produits, articles de blog, texte des pages) : oui. Le soulignement est le signal universel indiquant “ceci est un lien” et aide à l’accessibilité. Dans la navigation : non — le contexte (état au survol/hover, position) indique qu’il est cliquable. Certaines marques modernes ne soulignent les liens que lors du survol dans le corps de texte — ça fonctionne, mais ça nuit très légèrement à la lecture en diagonale.
Est-ce que changer la couleur des liens va affecter mon SEO sur Shopify ?
Pas directement. Google ne vous classe pas en fonction de la couleur de vos liens. En revanche, des liens avec un faible contraste nuisent à l’accessibilité (WCAG), ce qui est un signal de classement indirect. Assurez-vous que vos liens ont un ratio de contraste d’au moins 3:1 par rapport à l’arrière-plan et qu’ils se distinguent visuellement du texte environnant — pas seulement par la couleur.
Comment garder mes boutons tels quels quand je change la couleur de mes liens ?
Dans les thèmes Shopify qui partagent une couleur “d’accentuation” entre les liens et les boutons, vous aurez besoin de CSS pour les séparer : ciblez a:not(.btn):not(.button) uniquement pour les liens. La méthode la plus simple : décrivez ce que vous voulez à Fudge (“changer toutes les couleurs des liens du texte en bleu marine sans affecter les boutons”) et l’outil écrira le bon CSS scopé sans que vous ayez à partir à la chasse aux sélecteurs. Certains thèmes proposent également des paramètres de couleur séparés pour les boutons — vérifiez d’abord Paramètres du thème → Couleurs.
Puis-je avoir différentes couleurs de liens dans différentes sections de ma boutique Shopify ?
Oui, via les schémas de couleurs des sections (sur les thèmes modernes) ou le scoping CSS. Chaque schéma de couleurs peut définir sa propre couleur de lien. Ou bien, limitez le CSS avec quelque chose comme .section-blog a { color: ... } pour remplacer la couleur des liens uniquement dans des sections spécifiques. Très pratique pour différencier les articles de blog des pages produits où le contexte est différent.
Article lié : Ajouter un lien sur du texte dans Shopify.
Article lié : Mettre à jour les couleurs de la marque dans Shopify.