How to Make Featured Product Image and Title Clickable (Craft Theme)

Store Design
,

Topic summary

A user seeks to make both the featured product image and title clickable in the Craft theme without underlining the title link.

Solutions Provided:

  • JavaScript approach: Add code to theme.liquid file before the </body> tag to make images clickable
  • CSS approach: Modify base.css file with options to:
    • Remove underline on hover
    • Disable click on title only
    • Combine both effects

Current Status:

The JavaScript solution initially worked for one product but not others. An updated code snippet was provided and successfully resolved the issue for the original poster.

Ongoing Issues:

  • One user reports the code causes mobile zoom crashes or page refreshes when zooming on product photos
  • Another user experiences browser back-button navigation problems: clicking back goes to an enlarged image view instead of the previous page, suggesting a redirect rather than a direct link

Both issues remain unresolved, with suggestions to create separate posts for troubleshooting.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hello,

How do you make both image and title of “Featured Product” clickable to its product page?

I would like it to be clickable WITHOUT underlining the Product Title as a link.

https://putonlovemarket.com

Screenshot 2024-03-22 at 4.06.49 PM.png
Screenshot 2024-03-22 at 4.06.49 PM.png2242×1654 359 KB

2

Hi @l1kim

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

3

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find Base.css file

Add this option if you just want to Only click on product total Than Put This Css

@media screen and (min-width: 767px){
       .collection .card__heading a:after{
		display:none;
	}
}

Otherwise This Css

.collection .underline-links-hover:hover a{
	text-decoration: none;	
}

And if you want to do both Than Put This Css

.collection .underline-links-hover:hover a{
	text-decoration: none;	
}
@media screen and (min-width: 767px){
	.collection .card__heading a:after{
		display:none;
	}
}

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Raj-Webdesigner

4

Hmm.. This worked only for the top product but not the product underneath. Would you please help me do the same for the 2nd product the one right under it?

https://putonlovemarket.com/pages/candle-workshop

5

Hi @l1kim ,

Try replacing the previous code with the below code. Also do not forget to like and mark the answer as accepted.
3 Likes
6

So amazing! It worked!

Thank you very much,

7

Hello,

I’ve used this code for the same purpose and it actually worked perfectly which I truly thank you for. But it causes some weird issue.
so when I zoom in (on mobile) on the product photo the page either refreshes or crashes!
Would you actually be able to check that and help me with it?

8

Hello, I’m not sure why it would crash on your end… since I’m not an expert at this. Maybe write a new post about it asking for help?

9

I used this for my site, carpetsmart.com and it seems to redirect to the product page on click but if you click the back arrow on the browser, it goes to the enlarged image instead of the home page. Thus, it seems to be a redirect. Is there an option that just forces a change to make the image click a direct link?