Key takeaways
- Some Theme Editor image blocks, such as Multicolumn columns and slideshow slides, have a built-in Link field. It is 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.
To make an image clickable in Shopify, open the Theme Editor, select the image’s section or block and fill in its Link field. For images in a page’s content, wrap the image in an <a> tag in the HTML view.
Why you can trust us
We’ve built and customised hundreds of Shopify storefronts. We also built Fudge, the AI operator for Shopify stores, with a 4.9 rating on the Shopify App Store.
Method 1 — use the Link field in the Theme Editor
This is the fastest method and works for section images that have a link setting.
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. Some sections, such as Multicolumn and slideshow slides in many themes, include one. In Dawn’s Image banner and Image with text, only the button is linked.
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.
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.
For text links, see Add a Link to Text in Shopify.
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 and its schema to add the image_link setting: go to Online Store → Themes, click the three-dot menu (…) next to your theme, then Edit code. This is code-level work.
To style the links themselves, see 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.
To swap the hero image itself, see 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, wrap it in an anchor tag pointing to / in a section or snippet file (Liquid does not run in the page editor’s HTML view):
<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, the AI operator for Shopify stores:
“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
Why doesn't my image have a Link field in the Theme Editor?
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.
How do I make a multicolumn image clickable?
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.
Can I link an image to open in a new tab?
The native Theme Editor link field doesn't include an "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.
How do I link an image inside a slideshow or carousel?
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.
What's the difference between linking an image and adding a button?
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.
