Re: Make Featured Product image link to product page

Solved

Make Featured Product image link to product page

Dristige
New Member
6 0 0

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

Accepted Solution (1)
Ahsan_ANC
Shopify Partner
1394 253 325

This is an 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

 

Screenshot 2022-10-19 223502.png

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search

View solution in original post

Replies 15 (15)

NileshTejani
Shopify Partner
203 12 43

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

- Did we solve your issue? Like & Mark As Solution to help the community

Should you need any direct help:
Get connected: Upwork | Help Center
Dristige
New Member
6 0 0

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

Litos
Globetrotter
688 169 147

Hi @Dristige,

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

Screenshot.png

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

 

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
Ahsan_ANC
Shopify Partner
1394 253 325

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

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
Dristige
New Member
6 0 0

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

Dristige
New Member
6 0 0

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

Litos
Globetrotter
688 169 147

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

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
Ahsan_ANC
Shopify Partner
1394 253 325

This is an 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

 

Screenshot 2022-10-19 223502.png

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
Dristige
New Member
6 0 0

Thank you so much! it works! 🙂

RemedyFarmacist
Visitor
1 0 0

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
Visitor
1 0 0

Genius!! Thank you so much

 
 
 
JinStudio
Tourist
3 0 1

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
Trailblazer
214 2 25

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!

oscprofessional
Shopify Partner
15984 2392 3099

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Dristige
New Member
6 0 0

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.