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

Solved

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

Nickko
Tourist
5 1 3

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,

 

 

 

 

 

Accepted Solution (1)
Nickko
Tourist
5 1 3

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

View solution in original post

Replies 5 (5)

Van_Nguyen_GSG
Shopify Partner
161 23 44

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>

 

Helping Shopify merchants build stores that convert.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- If you still need help, feel free to reach out to me at: van@glue.sg
Cheers!
Nickko
Tourist
5 1 3

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
Tourist
5 1 3

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

 

Nickko
Tourist
5 1 3

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

Nickko
Tourist
5 1 3

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