Points clés à retenir
- La plupart des blocs d’images de l’éditeur de thème possèdent un champ Lien intégré — la méthode la plus rapide pour les images de section.
- Dans l’éditeur de page Shopify, insérez votre image puis passez en vue HTML pour l’envelopper dans une balise d’ancrage.
- Les images des fiches produits renvoient automatiquement à leur page produit — aucune configuration n’est nécessaire.
- Fudge peut rendre n’importe quelle image cliquable avec une destination personnalisée, y compris celles situées dans des sections dépourvues de champ de lien natif.
Rendre une image cliquable est une demande fréquente — pour les bannières promotionnelles, les logos de marque et les blocs de contenu servant également de navigation. La méthode dépend de l’endroit où se trouve l’image dans votre boutique.
Pourquoi vous pouvez nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques en ligne Shopify. Nous avons également créé Fudge — un éditeur de boutique en ligne par IA avec une note de 5.0 sur le Shopify App Store.
Méthode 1 — utiliser le champ Lien dans l’éditeur de thème
C’est la méthode la plus rapide et elle fonctionne pour la plupart des images de section.
Étape 1. Accédez à Boutique en ligne → Thèmes → Personnaliser.
Étape 2. Cliquez sur la section ou le bloc contenant votre image.
Étape 3. Dans le panneau de configuration, recherchez un champ Lien ou URL. Les blocs d’images dans des sections telles que « Image avec texte », « Bannière d’image » et « Collection en vedette » en comportent presque toujours un.
Étape 4. Saisissez l’URL de destination. Utilisez un chemin relatif pour les liens internes (/products/my-product) ou l’URL complète pour les liens externes.
Étape 5. Enregistrez.
L’image est maintenant cliquable et redirige vers l’URL que vous avez définie.
Article connexe : Fudge Store Editor.
Article connexe : Ajouter un lien à du texte dans Shopify.
S’il n’y a pas de champ Lien dans les paramètres du bloc, la section de votre thème ne le prend pas en charge nativement pour cette image. Utilisez la méthode 2 ou 3.
Comment insérer un lien cliquable dans une image ?
Si vous ajoutez des images à l’intérieur d’une page Shopify (Boutique en ligne → Pages), l’éditeur de page par défaut n’a pas de bouton « lien sur image ». Vous devez utiliser la vue HTML :
Étape 1. Insérez votre image via l’icône d’image dans la barre d’outils de l’éditeur.
Étape 2. Cliquez sur le bouton < > ou « Afficher le code HTML » pour passer en vue source.
Étape 3. Trouvez votre balise d’image — elle ressemble à <img src="..." alt="...">.
Étape 4. Enveloppez-la dans une balise d’ancrage :
<a href="/collections/summer-sale">
<img src="..." alt="Summer sale banner">
</a>Étape 5. Revenez à la vue de texte enrichi et enregistrez.
L’image fonctionne désormais comme un lien cliquable. Pendant que la vue HTML est ouverte, il est également utile d’ajouter un texte alternatif (alt text) à votre image pour le SEO.
Comment ajouter un lien à une image dans une section personnalisée
Les images à l’intérieur de sections personnalisées ou de fichiers modèles utilisent la syntaxe Liquid. Une image cliquable en Liquid ressemble à ceci :
<a href="{{ section.settings.image_link }}">
{{ section.settings.image | image_url: width: 1200 | image_tag }}
</a>Cela nécessite de modifier le fichier Liquid de la section (Boutique en ligne → Thèmes → Actions → Modifier le code) et son schéma pour y ajouter le paramètre image_link. Il s’agit d’un travail au niveau du code.
Article connexe : Changer la couleur des liens dans Shopify.
Les images de produits renvoient-elles automatiquement au produit ?
Oui. Les images de fiches produits sur les pages de collection, les grilles de produits en vedette et les sections de produits liés renvoient directement à leurs pages produits par défaut. Vous n’avez pas besoin d’ajouter un lien manuellement.
Si une image de produit s’affiche mais n’est pas cliquable, elle se trouve peut-être dans une section personnalisée ou un bloc d’image statique plutôt que dans le composant d’une fiche produit.
Article connexe : Changer la Hero Image dans Shopify.
Comment faire en sorte qu’un logo renvoie vers la page d’accueil
La plupart des thèmes Shopify lient automatiquement le logo du header à la page d’accueil. Si ce n’est pas le cas pour le vôtre, ou si vous utilisez une image de logo en dehors du header :
Dans l’éditeur de thème → cliquez sur la section Header → recherchez les paramètres du bloc de logo. Il s’y trouve peut-être un champ Lien du logo. Si le thème lie le logo automatiquement, ce champ ne s’affichera pas comme configurable — la liaison est codée en dur.
Pour une image de logo placée ailleurs sur la page, enveloppez-la dans une balise d’ancrage pointant vers / :
<a href="/">
<img src="{{ 'logo.png' | asset_url }}" alt="Brand logo">
</a>Utiliser Fudge pour ajouter des images cliquables
Si l’image que vous souhaitez lier se trouve dans une section qui n’a pas de champ de lien, décrivez-la à Fudge :
« Fais en sorte que l’image de la bannière promotionnelle dans la section hero de la page d’accueil pointe vers /collections/new-arrivals. »
Fudge modifie le code de la section pour ajouter le lien et crée un champ de paramètres afin que vous puissiez mettre à jour la destination vous-même depuis l’Éditeur de thème à l’avenir. La modification est créée sous forme de brouillon pour être vérifiée avant sa mise en ligne.
FAQ
Pourquoi mon image n’a-t-elle pas de champ Lien dans l’Éditeur de thème ?
Le champ Lien est défini par section dans le code du thème. Si vous modifiez un ancien thème, un thème personnalisé, ou une section qui n’a pas été conçue avec des images cliquables, le champ n’existe tout simplement pas. Vos options sont de modifier le code Liquid + le schéma de la section pour ajouter un paramètre de lien, ou d’utiliser Fudge pour l’ajouter à votre place.
Comment rendre cliquable une image dans une section multicolonne ?
Dans les thèmes modernes Online Store 2.0, le bloc de colonne de la section Multicolonne inclut généralement un champ Lien pour chaque colonne. Cliquez sur un bloc de colonne, cherchez « Lien » dans ses paramètres, et entrez l’URL de destination. Si ce champ est absent de la section Multicolonne de votre thème, vous devrez modifier le code de la section.
Puis-je lier une image pour qu’elle s’ouvre dans un nouvel onglet ?
Le champ de lien natif de l’Éditeur de thème ne propose pas d’option « ouvrir dans un nouvel onglet » – le lien s’ouvre toujours dans la même fenêtre. Pour un nouvel onglet, vous devez modifier le code de la section et ajouter target="_blank" rel="noopener" à la balise d’ancrage (<a>), ou utiliser un outil qui vous permet de définir la cible du lien comme paramètre de section.
Comment lier une image dans un diaporama ou un carrousel ?
La plupart des sections de diaporama (slideshow) incluent un champ Lien sur chaque bloc de diapositive – cliquez sur la diapositive, cherchez « Lien » dans ses paramètres. Si le vôtre n’en a pas, vous devrez modifier le Liquid de la section diaporama pour envelopper chaque image de diapositive dans une balise d’ancrage en utilisant un paramètre d’URL pour chaque diapositive.
Quelle est la différence entre lier une image et ajouter un bouton ?
Lier une image rend la totalité de l’image cliquable, sans nécessiter de bouton visuel – c’est épuré et minimaliste, mais l’interactivité est moins évidente. Un bouton ajoute un appel à l’action explicite avec du texte et du style qui indique « cliquez-moi ». Pour les bannières promotionnelles, avoir à la fois une image liée ET un bouton stylisé est souvent la combinaison la plus efficace.
