Shopify themes, liquid, logos, and UX
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!!
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.
Hello there!
code. Here's how you can do it:
<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.
If this fixed your issue, likes and accepting as a solution are highly appreciated
| Build an online presence with our custom-built Shopify Theme: EcomifyTheme
| Check out our reviews: Trustpilot Reviews
| We are Shopify Partners: EcomGraduates Shopify Partner
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?
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.
THANK YOU! been searching everywhere and your response was so helpful!!
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
If you haven't found the answer yet, I used the following:
<a href="{{ product.url }}" style="text-decoration:none">
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
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?
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!
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
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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025