Make Featured Product image link to product page

[Dristige]

Hi friends!

I would like some help to make my Featured Product image (and title if possible) link to the product page of the featured product. Right now when its image is clicked upon its zooms (on mobile) and shows large product images on desktop. Is it possible to change the code so clicking on the featured product image links directly to the product page instead of showing images or zooming in on the image. 

I am using Dawn theme by Shopify.

Looking forward to hear from the community. 

Thanks

[NileshTejani]

Hi Dristige, yes it possible to change code but for this you provide me store url and which theme are you using now 

[Dristige]

Im using Dawn theme and the url is www.dristige.dk

[Litos]

Hi @Dristige,

Instead of the zoom feature, you want when clicking on the image, it will go to the new product link?

You just need to add the link in the alt of the image, I will help you edit the code so that when you click the image it will go to the link. Refer: https://help.shopify.com/en/manual/products/product-media/add-alt-text

[Ahsan_ANC]

Hi @Dristige  you are already on the product page when you add a link to the same page it will just reload.

[Dristige]

The Featured Product is on the front page. So it is not already on the product page. 

[Dristige]

Interesting, how do I add the link on the alt of the image? 🙂

[Litos]

Hi @Dristige,

You can refer for add the link on the alt of the image: https://help.shopify.com/en/manual/products/product-media/add-alt-text

Then send me the code of product-thumbnail.liquid file, I will help you to edit it

[Ahsan_ANC · Accepted solution]

Hi @Dristige please go to the theme editor and in the sections folder find the file "featured-product.liquid" make a copy of that file code and then copy the new code from the below link and add it to that file

https://docs.google.com/document/d/1wLZrc3wMjR1RRr22XHD3Hc1ObDtvYFynrk3uR_1qovE/edit?usp=sharing

[Dristige]

Thank you so much! it works! 🙂

[RemedyFarmacist]

Thank you! This worked for me.

I do notice a new problem and it appears to be across the board (I even reverted back to default).

If I have a second variant it is displaying out of stock (not correct) and the wrong price ($19.99).

Example: https://shop.remedyhealth.live/products/Estro-dim (the Featured Product block at the top for DIM has 2 variants - the first one shows correct and the second one is incorrect). When you look at that product (https://shop.remedyhealth.live/products/DIM) the pricing and availability is correct.

[Sarl]

Genius!! Thank you so much

[JinStudio]

Thank goodness for you! This is exactly what I wanted! For anyone else showing up in 2024 or later, please note there may be a duplicate <schema> section that will give you an error. Delete the entire <schema> - </endschema> section that you don't want and retry to save, should be good to go.

Now if I could only figure out how to do a Featured Carousel... haha

[isabellemaria]

Thanks! It actually works. There seems to be another duplicated section. I just deleted what I thought was double and now it somehow works haha!

[ALEXSHARK]

THANK YOU! Can you adapt this code to "Craft" theme?

I tried but codes is different... Thank you!

[Ahsan_ANC]

please share the preview url

[oscprofessional]

Hello @Dristige 

This guide will be helpful to you; please refer to it -

https://community.shopify.com/c/shopify-design/make-featured-image-clickable-with-link-to-product-pa...

[Dristige]

Hi 

I did try that code. Unfortunately it does not work perfectly. When clicking on the image it quickly zooms and then afterwards it opens the product page.