All things Shopify and commerce
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,
Solved! Go to the solution
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!
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>
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
How do I make the featured product title on home page click through to product page?
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!
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024