Points clés
- La plupart des blocs d’images de l’éditeur de thème ont 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’entourer d’une balise de lien.
- Les images des fiches produits redirigent automatiquement vers leur page produit — aucune configuration n’est requise.
- Fudge peut rendre n’importe quelle image cliquable avec une destination personnalisée, y compris celles situées dans des sections sans champ de lien natif.
Rendre une image cliquable est une demande courante - pour les bannières promotionnelles, les logos de marque et les blocs de contenu qui servent aussi 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
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, ce champ n'existe tout simplement pas. Vos options sont soit de modifier le code Liquid et le schema de la section pour ajouter un paramètre de lien, soit d'utiliser Fudge pour l'ajouter à votre place.
Dans les thèmes modernes de la Boutique en ligne 2.0, le bloc de colonne de la section Multi-colonnes inclut généralement un champ Lien pour chaque colonne. Cliquez sur un bloc, cherchez "Lien" dans ses paramètres, et entrez l'URL de destination. Si ce champ est absent de la section Multi-colonnes de votre thème, vous devrez modifier le code de la section.
Le champ de lien natif de l'éditeur de thème n'inclut pas d'option "ouvrir dans un nouvel onglet" - l'image s'ouvre toujours dans la même fenêtre. Pour ouvrir dans un nouvel onglet, vous devez modifier le code de la section et ajouter target="_blank" rel="noopener" à la balise de lien, ou utiliser un outil qui permet de définir la cible du lien comme paramètre de section.
La plupart des sections de diaporama incluent un champ Lien sur chaque bloc de diapositive - cliquez sur la diapo, cherchez "Lien" dans ses paramètres. Si le vôtre n'en a pas, vous devrez modifier le code Liquid de la section pour entourer chaque image d'une balise de lien en utilisant un paramètre d'URL par diapositive.
Une image liée rend toute l'image cliquable, sans bouton visuel requis - c'est épuré et minimaliste, mais moins évidemment interactif. Un bouton ajoute un call-to-action explicite qui signale "cliquez-moi" avec du texte et un style. Pour les bannières promotionnelles, l'association d'une image liée ET d'un bouton stylisé est souvent la combinaison la plus performante.
