Key takeaways
- Most Theme Editor image blocks have a built-in Link field — the quickest method for section images.
- In the Shopify page editor, insert your image then switch to HTML view to wrap it in an anchor tag.
- Product card images automatically link to their product page — no setup needed.
- Fudge can make any image clickable with a custom destination, including ones in sections without a native link field.
Making an image clickable is a common request - for promotional banners, brand logos, and content blocks that double as navigation. The method depends on where the image lives in your store.
Why you can trust us
We’ve built and customised hundreds of Shopify storefronts. We also built Fudge — an AI storefront editor with a 5.0 rating on the Shopify App Store.
Method 1 — use the Link field in the Theme Editor
This is the fastest method and works for most section images.
Step 1. Go to Online Store → Themes → Customize.
Step 2. Click the section or block containing your image.
Step 3. In the settings panel, look for a Link or URL field. Image blocks in sections like “Image with text”, “Image banner”, and “Featured collection” almost always include one.
Step 4. Enter the destination URL. Use a relative path for internal links (/products/my-product) or the full URL for external links.
Step 5. Save.
The image is now clickable and links to the URL you set.
Related: Fudge Store Editor.
Related: Add a Link to Text in Shopify.
If there’s no Link field in the block settings, your theme’s section doesn’t support it natively for that image. Use Method 2 or 3.
How do I insert a clickable link in an image?
If you’re adding images inside a Shopify page (Online Store → Pages), the default page editor doesn’t have an “image link” button. You need to use the HTML view:
Step 1. Insert your image via the image icon in the editor toolbar.
Step 2. Click the < > or “Show HTML” button to switch to source view.
Step 3. Find your image tag — it looks like <img src="..." alt="...">.
Step 4. Wrap it in an anchor tag:
<a href="/collections/summer-sale">
<img src="..." alt="Summer sale banner">
</a>Step 5. Switch back to the rich text view and save.
The image now functions as a clickable link. While you have the HTML view open, it’s also worth adding alt text to your image for SEO.
How to add a link to an image in a custom section
Images inside custom sections or template files use Liquid syntax. A linked image in Liquid looks like this:
<a href="{{ section.settings.image_link }}">
{{ section.settings.image | image_url: width: 1200 | image_tag }}
</a>This requires editing the section’s Liquid file (Online Store → Themes → Actions → Edit code) and its schema to add the image_link setting. This is code-level work.
Related: Change Link Color in Shopify.
Do product images automatically link to the product?
Yes. Product card images in collection pages, featured product grids, and related product sections link directly to their product pages by default. You don’t need to add a link manually.
If a product image is being displayed but is not clickable, it may be inside a custom section or a static image block rather than a product card component.
Related: Change the Hero Image in Shopify.
How to make a logo image link to the homepage
Most Shopify themes link the header logo to the homepage automatically. If yours doesn’t, or if you’re using a logo image outside the header:
In the Theme Editor → click the Header section → look for the logo block settings. There may be a Logo link field. If the theme links the logo automatically, you won’t see it as a configurable field - it’s hardcoded.
For a logo image placed anywhere else on the page, wrap it in an anchor tag pointing to /:
<a href="/">
<img src="{{ 'logo.png' | asset_url }}" alt="Brand logo">
</a>Using Fudge to add clickable images
If the image you want to link lives inside a section that doesn’t have a link field, describe it to Fudge:
“Make the promotional banner image in the homepage hero section link to /collections/new-arrivals.”
Fudge edits the section code to add the link and creates a settings field so you can update the destination yourself from the Theme Editor in future. The change is created as a draft for review before anything goes live.
FAQ
The Link field is set per-section in the theme code. If you're editing an older theme, a custom theme, or a section that wasn't designed with linkable images, the field simply doesn't exist. Your options are to either edit the section's Liquid + schema to add a link setting, or use Fudge to add it for you.
In modern Online Store 2.0 themes, the Multicolumn section's column block usually includes a Link field for each column. Click a column block, look for "Link" in its settings, and enter the destination URL. If your theme's Multicolumn section is missing this, you'll need a code change to the section.
The native Theme Editor link field doesn't include a "open in new tab" toggle - it always opens in the same window. For a new tab, you need to edit the section code and add target="_blank" rel="noopener" to the anchor tag, or use a tool that lets you set link target as a section setting.
Most slideshow sections include a Link field on each slide block - click the slide, look for "Link" in its settings. If yours doesn't, you'll need to edit the slideshow section's Liquid to wrap each slide image in an anchor tag using a per-slide URL setting.
A linked image makes the entire image clickable, no visual button required - clean and minimal, but less obviously interactive. A button adds an explicit call-to-action that signals "click me" with text and styling. For promotional banners, both linked image AND a styled button is often the strongest combination.
