How to make an entire product image clickable for Dawn theme?

Store Design

Topic summary

Goal: Make entire product images clickable (and ideally collections) in Shopify’s Dawn theme.

What works in Dawn:

  • Edit Sections > featured-product.liquid. Wrap the product image container <div class=“product__media-item” …> with an … so clicking the image goes to the product page. Back up the file before editing.
  • Earlier advice to edit product-template.liquid applies to other themes; in Dawn the correct file is featured-product.liquid.

Styling/behavior notes:

Broader applicability:

  • Similar wrapping works on other Online Store 2.0 themes (e.g., Origin) by targeting their equivalent media blocks.

Status:

  • Multiple confirmations that the Dawn fix works. Some users on different themes or seeking site‑wide/collections coverage still have issues; no final, universal solution was provided. Code snippets are central to the thread.
Summarized with AI on December 20. AI used: gpt-5.
1

Going crazy here, and there’s probably a solution out there but I haven’t been able to find it so far…

Is there a way to make an entire product photo clickable?? I’m on the Dawn theme.

There seem to be solutions for other themes, like here:

But not able to find that code in the Dawn theme…

Another post about finding it under featured-product.liquid for the Dawn theme, here…

But doesn’t mention what changes to make in that snippet.

Does anyone know how to make ALL product photos clickable (and Collections too, if possible)???

Thanks!!

1 Like
2

The easy way to do this is to put the image and title inside the a tag so that you can click on the image and title to jump to the product details page.

If you don’t know much about the code, you can contact me to help you out.

3

Hello there!

code. Here’s how you can do it:

  1. Go to the “Themes” section of your Shopify admin.
  2. Select the theme you’re using and click on the “Editor” option.
  3. In the “Sections” folder, locate and open the “product-template.liquid” file.
  4. Look for the code that displays the product image and wrap it in an HTML link tag, like this:

  {{ product.images | first | img_url: '1024x1024' }}

This code will make the entire product image clickable, taking the customer to the product’s details page when they click on it. You can adjust the image size in the img_url filter to suit your needs.

4

Hey @EcomGraduates , thanks for moving me in the right direction! But I’m not able to find “product-template.liquid” - it must be listed under something else for the Dawn theme.

Would you happen to know under what section/snippet this needs to be pasted in?

5

Hi there, I have found it so thought should let you know as well :slightly_smiling_face:

It is under featured-product.liquid in dawn theme.

where it says

wrap the whole div in to href as in

in short please see how I wrapped it into href below . Also before making any change please keep a copy of the whole featured-product.liquid. Normally I save it into notepad before making any change so I can revert to that in case the code does not work. Here is the solution.
{% render 'product-thumbnail', media: media, position: forloop.index, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: false, media_width: media_width, media_fit: section.settings.media_fit, constrain_to_viewport: section.settings.constrain_to_viewport %}

It should work as I just checked it on my site. Please mark it as a solution if it does so others can know it as well.

4 Likes
6

THANK YOU! been searching everywhere and your response was so helpful!!

7

Thank you very much, it works great

However I have 2 questions:

1 - Is it possible to get rid of the blue link underline under the product name ? it kinda makes it ugly.
2 - How can I apply this method to the other featured products, I have 2 on my landing page and only the first seems to work.

Thanks in advance

8

If you haven’t found the answer yet, I used the following:

9

can you help me with this? i have tried but im not sure what to do for the code. The code other people provided is not working for me

10

i have a different theme and i found where the product-image code was but for some reason this isn’t working for me? can you help me out?

11

so do i delete the top portion or am i just adding this onto a different section of the theme? i just tried both and am still unable to click on the picture for it to take me to the product

12

thank you! this also worked for me on Origin Theme. I had a few entries like this and wrapped them with the tags above, and now they all click and lead to the product page. thanks so much!

13

So I have been trying to get this to work but I cant seem to find a solution. All of my products images are not clickable, only the link below the image is. How do I make it so the image of the product is clickable and takes you to the product details page. I want this for all products.

www.nightvisionuniverse.com

Please help.