Dawn Theme v 13.01.1 - Featured Product on Home Page [Link Image And Title To The Product Page]

[Nickko]

Hello

Is there a solution to link my featured product image and product title to the product page? I have followed a number of suggestions and continue to run into problems.

Last attempt I followed this guide: 

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

Yes it achieved the goal of being able to click on the featured product image and product title on my home page and it sends user to product page.

Only problem is now the 'Add to Cart' button on the Home page featured product section has stopped working. When you click the 'add to cart' button' it goes blank? (home page featured product section only. product page works fine)

Can anyone please assist?

Thx,

[Van_Nguyen_GSG]

Hi Nickko,

To link the image & title to the product URL, you can simply wrap the element with <a></a> tag.

<a role="link" href="{{ product.url }}">
  {{...}}        
</a>

[Nickko]

Thankyou so much! So appreciated :).

Just one question:

I've left out the  {{...}} not sure where I input this? Can you please assist?

So I wrapped the element in the following:

<a role="link" href="{{ product.url }}"> 

</a>

The image clicks through to my product page. Perfect!

The product title in the featured product on home page does not click through as you know.

Where do I place the  {{...}} 

Thx!

Nickko

[Nickko]

You can checkout : https://florescens.com.au/

[Nickko]

How do I make the featured product title on home page click through to product page?

[Nickko · Accepted solution]

Hello

I found the fix to linking the featured product title!

Added this code to 'title' in featured product.liquid section as well;

{%- when 'title' -%}
<a href="{{ product.url }}" class="product__title-href">
<h2 class="product__title {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
{%- if product.title != blank -%}
{{ product.title | escape }}
{%- else -%}
{{ 'onboarding.product_title' | t }}
{%- endif -%}
</h2>
</a>

I added a reference to product URL. I also added a specific class product__title-href because your probably are going to remove the hyperlink underline.

I added this CSS code at the end of file section-main-product.css

a.product__title-href {
text-decoration: none;
}

Perfect! End result is I have both featured product image and title (without the underline) linked to product page

Thankyou!