Points clés
- Certains blocs d’image de l’Éditeur de thème, comme les colonnes Multicolonne et les diapositives de diaporama, ont un champ Lien intégré. C’est 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 d’ancrage.
- Les images des cartes de produits renvoient automatiquement vers leur page de produit — aucune configuration n’est nécessaire.
- Fudge peut rendre n’importe quelle image cliquable avec une destination personnalisée, y compris celles dans des sections sans champ de lien natif.
Pour rendre une image cliquable dans Shopify, ouvrez l’Éditeur de thème, sélectionnez la section ou le bloc de l’image et remplissez son champ Lien. Pour les images dans le contenu d’une page, entourez l’image d’une balise <a> dans la vue HTML.
Pourquoi vous pouvez nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également créé Fudge, l’opérateur IA pour les boutiques Shopify, qui a une note de 4.9 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 les images de section qui ont un paramètre de lien.
Étape 1. Allez dans Boutique en ligne → Thèmes → Personnaliser.
Étape 2. Cliquez sur la section ou le bloc contenant votre image.
Étape 3. Dans le panneau des paramètres, cherchez un champ Lien ou URL. Certaines sections, comme Multicolonne et les diapositives de diaporama dans de nombreux thèmes, en incluent un. Dans la Bannière d’image et l’Image avec texte de Dawn, seul le bouton est lié.
Étape 4. Entrez 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 renvoie vers l’URL que vous avez définie.
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.
Pour les liens textuels, voir Ajouter un lien à du texte dans Shopify.
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 d’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 HTML” pour passer à la vue source.
Étape 3. Trouvez la balise de votre image — elle ressemble à <img src="..." alt="...">.
Étape 4. Entourez-la d’une balise de lien (<a>) :
<a href="/collections/summer-sale">
<img src="..." alt="Summer sale banner" />
</a>Étape 5. Revenez à la vue en 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 à 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 de modèle utilisent la syntaxe Liquid. Une image liée 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 et son schema pour ajouter le paramètre image_link : allez dans Boutique en ligne → Thèmes, cliquez sur le menu à trois points (…) à côté de votre thème, puis sur Modifier le code. Cela implique de toucher au code.
Pour styliser les liens eux-mêmes, voir Changer la couleur des liens dans Shopify.
Les images de produits renvoient-elles automatiquement au produit ?
Oui. Les images des cartes de produits dans les pages de collection, les grilles de produits en vedette et les sections de produits recommandés renvoient directement vers leurs pages de produits par défaut. Vous n’avez pas besoin d’ajouter un lien manuellement.
Si une image de produit est affichée 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 un composant de carte de produit.
Pour remplacer l’image hero elle-même, voir Changer l’image hero 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 de l’en-tête à 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 de l’en-tête :
Dans l’Éditeur de thème → cliquez sur la section En-tête → cherchez les paramètres du bloc logo. Il peut y avoir un champ Lien du logo. Si le thème lie le logo automatiquement, vous ne le verrez pas comme un champ configurable - il est codé en dur.
Pour une image de logo placée n’importe où ailleurs, entourez-la d’une balise d’ancrage pointant vers / dans un fichier de section ou de snippet (Liquid ne s’exécute pas dans la vue HTML de l’éditeur de page) :
<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, l’opérateur IA pour les boutiques Shopify :
“Fais en sorte que l’image de la bannière promotionnelle dans la section hero de la page d’accueil renvoie vers /collections/new-arrivals.”
Fudge modifie le code de la section pour ajouter le lien et crée un champ de paramètre pour 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 sur mesure ou une section qui n'a pas été conçue avec des images cliquables, le champ n'existe tout simplement pas. Vos options sont soit de modifier le Liquid et le schema de la section pour ajouter un paramètre de lien, soit d'utiliser Fudge pour l'ajouter pour vous.
Comment rendre une image multicolonne cliquable ?
Dans les thèmes modernes Online Store 2.0, le bloc colonne de la section Multicolonne inclut généralement un champ Lien pour chaque colonne. Cliquez sur un bloc colonne, cherchez "Lien" dans ses paramètres et entrez l'URL de destination. Si la section Multicolonne de votre thème n'a pas cette option, 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 n'inclut pas d'option "ouvrir dans un nouvel onglet" - il 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, ou utiliser un outil qui vous permet de définir la cible du lien comme un paramètre de section.
Comment lier une image dans un diaporama ou un carrousel ?
La plupart des sections de diaporama incluent un champ Lien sur chaque bloc de diapositive - cliquez sur la diapositive, cherchez "Lien" dans ses paramètres. Si ce n'est pas le cas pour le vôtre, vous devrez modifier le fichier Liquid de la section diaporama pour entourer chaque image de diapositive d'une balise d'ancrage en utilisant un paramètre d'URL par diapositive.
Quelle est la différence entre lier une image et ajouter un bouton ?
Une image liée rend l'image entière 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 du style. Pour les bannières promotionnelles, l'association d'une image liée ET d'un bouton stylisé est souvent la combinaison la plus efficace.
