Make featured product photo and title clickable (STUDIO)

[Kubsonit]

Just like the title. Im building my first shop, experimenting with shopify and noticed that featured product photo and title are not links to send visitor to product page (theres only this small link "View full details" at the bottom)

Is it possible to change code to make those clickable?

Im using STUDIO Theme and couldnt find solution for this one

I've also previously made a change to remove zoom by adding this code at the very bottom of Asset->/section-main-product.css

.product__media-toggle {display: none !important;}
.product__modal-opener .product__media-icon {display: none !important;}

Putting this just in case, it would be incompatible with solution

[NomtechSolution]

1. Locate the appropriate template file: In the theme code editor, navigate to the section or template file responsible for rendering the featured product section. Look for a file related to the homepage or featured products.

2. Find the code for the featured product section: Look for the code that generates the HTML for the featured product photo and title. This code might include HTML tags such as <img> for the image and <h2> or <h3> for the title.

3. Add the product link: Wrap the image and title HTML code with an anchor tag <a> and set the href attribute to the product URL. You can use Shopify's Liquid template language to generate the product URL dynamically.

   For example, you can modify the code as follows:

<a href="{{ featured_product.url }}">
  <img src="{{ featured_product.image | img_url }}" alt="{{ featured_product.title }}">
  <h2>{{ featured_product.title }}</h2>
</a>

[Kubsonit]

Thanks for answering I managed to make title clickable no problem but, when I made photo clickable by replacing this code:

<div class="grid__item product__media-wrapper{% if section.settings.media_position == 'right' %} medium-hide large-up-hide{% endif %}">
​

with this one:

<div class="grid__item product__media-wrapper{% if section.settings.media_position == 'right' %} medium-hide large-up-hide{% endif %}" style="position:relative;">
<a style="position:absolute;top:0; left:0; right: 0; bottom: 0; z-index:10;" href="{{- product.url -}}">&nbsp;</a>
​

it worked, but now I have a dash on the left side of the photo, any ideas how to remove it?