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

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

upandurbanstore
Visitor
2 0 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!!

Replies 11 (11)

Simonsron
Shopify Partner
699 87 122

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
592 48 80

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.

 

 


Thank you for reading our post!


Check out who we are: EcomGraduates


Boost your sales with our new theme: Ecomify



upandurbanstore
Visitor
2 0 1

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

corynnsmith
Tourist
7 0 0

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

corynnsmith
Tourist
7 0 0

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?

JinStudio
Tourist
3 0 1

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!

corynnsmith
Tourist
7 0 0

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