Link Featured Product to Product

Store Design
, , ,
1

Hi there,

I would like to link the title and image of my product “Peeling Handschuh” on my home page www.taneraskin.com to the page https://taneraskin.com/products/peeling-handschuh .

In this section: So that when you click on the title or image, it leads you to the product.

isabellemaria_0-1720184023534.png
isabellemaria_0-1720184023534.png400×231 25.3 KB

What code do I have to add and where?

Thank you for your help.

Best regards,

Isabelle

2

@isabellemaria - you will need to edit the featured product section code to add link to title and image, if you are not familiar with the coding, then you will need a developer

3

I already had it modified in my last version Dawn 14.0.0 but now I updated to Dawn 15.0.0 and need to edit it again. I don’t want to hire a developer since it’s such a small modification. Do you know a solution?

4

Hi @isabellemaria

Please open Online Store > Themes > Edit code, open featured-product.liquid file, and find this line of code code.

##

Add this code above it.

and add this code below after

So the code will look like this

Screenshot_2.jpg
Screenshot_2.jpg1276×550 69.5 KB

2 Likes
5

My current code looks like this:

{%- when ‘title’ -%}
<a{% if product == blank %} role=“link” aria-disabled=“true”{% else %} href=“{{ product.url }}”{% endif %} class=“link product__view-details”>

{%- if product.title != blank -%} {{ product.title | escape }} {%- else -%} {{ 'onboarding.product_title' | t }} {%- endif -%}

It does work for desktop version that when you click on the image or title, it leads you to the product, but not for mobile version… How can I get this for mobile version too?

6

Sorry I made a mistake, my code now looks like you propsed and the title is linked to the product, thanks! I really need the image of the featured product section to be linked to the product too! Do you know how?

www.taneraskin.com

7

Okay what I did now is the following:

…

{% comment %}
CHANGE Featured Product link image to product; replace this code by the one below
{%- if section.settings.product != blank -%}
{% render ‘product-media-gallery’, product: product, variant_images: variant_images, limit: 1 %}
{%- else -%}

{{ 'product-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{% endcomment %}

<a{% if product == blank %} role=“link” aria-disabled=“true”{% else %} href=“{{ product.url }}”{% endif %} class=“link product__view-details”>

It’s a piece of code from here:

https://community.shopify.com/c/shopify-design/make-featured-product-image-link-to-product-page/m-p/1781822

https://docs.google.com/document/d/1wLZrc3wMjR1RRr22XHD3Hc1ObDtvYFynrk3uR_1qovE/edit?pli=1

1 Like