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

upandurbanstore
Visitor
2 0 0

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!!

Replies 7 (7)
Simonsron
Shopify Partner
699 87 121

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.

banned
EcomGraduates
Shopify Partner
588 48 73

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:

 

<a href="{{ product.url }}">
  {{ product.images | first | img_url: '1024x1024' }}
</a>

 

 

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.

 

 

banned
upandurbanstore
Visitor
2 0 0

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?

sombersea
Tourist
5 0 3

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

 

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

 

where it says 

 

<div class="product__media-item" data-media-id="{{ section.id }}-{{ media.id }}">

 

wrap the whole div in to href as in <a href="{{ product.url }}">

 

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.

 

<a href="{{ product.url }}">
<div class="product__media-item" data-media-id="{{ section.id }}-{{ media.id }}">
{% 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
%}
</div></a>

 

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.

mpclo
Visitor
1 0 0

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

GT3RS
Visitor
1 0 0

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

mcarbo
Shopify Partner
2 0 0

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

<a href="{{ product.url }}" style="text-decoration:none">