À retenir
- De nombreux thèmes ont une couleur d‘“Accent” ou de “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
aen CSS.- Vous pouvez styliser les effets au survol (hover) des liens séparément en utilisant
a:hoveren CSS.- Fudge peut modifier la couleur de vos liens à partir d’une simple description en langage naturel si vous préférez éviter d’écrire du CSS.
La couleur des liens fait partie de ces paramètres que certains thèmes affichent clairement, tandis que d’autres la cachent dans le code. Voici où chercher et comment la modifier dans tous les cas.
Pourquoi nous faire confiance
Nous avons créé et personnalisé des centaines de vitrines 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 - 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 (Theme Editor), ou si vous voulez que la couleur des liens soit différente de celle des boutons, le CSS est la 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 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 les règles CSS tout en bas du fichier :
/* Couleur de lien par défaut */
a {
color: #1a4b8c;
}
/* Couleur de lien au survol */
a:hover {
color: #0d2e5e;
}
/* Liens dans une zone spécifique uniquement */
.rte a {
color: #1a4b8c;
}Étape 5. Cliquez sur Enregistrer (Save).
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 plupart des thèmes sont soit toujours soulignés, soit jamais soulignés. Vous pouvez contrôler cela avec le CSS :
/* Supprimer le soulignement de tous les liens */
a {
text-decoration: none;
}
/* Ajouter un soulignement uniquement au survol */
a:hover {
text-decoration: underline;
}
/* Souligner uniquement les liens dans le contenu du texte */
.rte a {
text-decoration: underline;
}Modifier la couleur des liens de navigation
Les liens de navigation sont stylisés séparément des liens de contenu dans la plupart des thèmes.
Dans l’Éditeur de thème, vérifiez Paramètres du thème > Couleurs pour une option de couleur de Navigation ou d’En-tête (Header).
Si elle n’existe pas, ciblez les liens de navigation en CSS. Faites un clic droit sur un lien de navigation dans votre navigateur, choisissez Inspecter et notez les noms des classes CSS. Ensuite, ajoutez une règle comme :
.header__menu-item a {
color: #333333;
}Le nom exact de la classe varie selon le thème.
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 |
|---|---|
| Modifier toutes les couleurs de liens | Paramètres du thème > Couleurs > Accentuation/Lien, ou CSS a {} |
| Modifier la couleur du lien au survol | CSS a:hover {} |
| Modifier les liens dans le contenu de la page uniquement | CSS .rte a {} |
| Modifier la couleur des liens de navigation | Paramètres du thème > Couleurs > En-tête, ou CSS sur le sélecteur de navigation |
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
La couleur d'accentuation est une couleur de thème globale qui contrôle plusieurs éléments : les liens, l'arrière-plan des boutons principaux, la mise en évidence des icônes, les états de focus. La couleur de lien (lorsqu'elle est proposée séparément) ne contrôle que les balises <a>. Si votre thème propose les deux, la couleur du lien l'emporte sur l'accentuation pour les liens. Si seule l'accentuation est proposée, tous ces éléments partagent la même couleur.
Dans le contenu principal (descriptions de produits, articles de blog, texte de page) : oui. Les soulignements sont le signal universel indiquant "ceci est un lien" et aident à l'accessibilité. Dans la navigation : non — le contexte (survol, position) signale la possibilité de cliquer. Certaines marques modernes ne soulignent qu'au survol pour les liens de texte — ça marche, mais ça nuit légèrement à la lisibilité en diagonale.
Pas directement. Google ne classe pas les sites en fonction de la couleur des liens. Mais des couleurs de lien à faible contraste nuisent à l'accessibilité (WCAG), ce qui est un signal de classement indirect. Assurez-vous que les liens ont un contraste d'au moins 3:1 par rapport à l'arrière-plan et qu'ils se distinguent visuellement du texte environnant — et pas seulement par la couleur.
Dans les thèmes Shopify qui partagent une couleur d'"accentuation" entre les liens et les boutons, vous avez besoin du CSS pour les séparer : ciblez a:not(.btn):not(.button) pour les liens uniquement. Solution plus simple : décrivez ce que vous voulez à Fudge ("changer toutes les couleurs de liens du texte en bleu marine sans affecter les couleurs des boutons") et il écrit le bon CSS ciblé sans que vous ayez à chercher les sélecteurs. Certains thèmes offrent aussi des contrôles de couleur de bouton séparés — vérifiez d'abord dans Paramètres du thème → Couleurs.
Oui, via les schémas de couleurs des sections (thèmes modernes) ou le ciblage CSS. Chaque schéma de couleurs peut définir sa propre couleur de lien. Ou bien ciblez le CSS comme .section-blog a { color: ... } pour écraser la couleur des liens dans des sections spécifiques uniquement. Pratique pour les articles de blog par rapport aux pages produits où le contexte diffère.
À lire aussi : Ajouter un lien à un texte sur Shopify.
À lire aussi : Mettre à jour les couleurs de la marque sur Shopify.