Dawn - how to make home page featured product section, image and title clickable to product page

[moosh44]

Hello,

On my homepage I have a featured product section. The bottom of this section has a ‘View full details’ call to action and this is the only way the user can navigate to the product page to view the full description.

How can I make the title and image of the featured product section clcikable to the user is navigated to the actual product page?

Here is my site: https://bliskbeauty.myshopify.com/

Thanks in advance

[BSS-Commerce]

Hi @moosh44

1. Go to Online Store → Themes → Edit code:

2. Find the file featured-product.liquid, find the class product_title, and delete this code:

 <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>

And replace it with this code:

<div class="product__title" {{ block.shopify_attributes }}>
   <a href="{{ product.url }}" class="product__title">
       <h2 class="h1">
            {{ product.title | escape }}
       </h2>
   </a>
</div>

3. Go to the file section-featured-product.css and add this code at the end of the file:

.product__title>a{
  display: block !important;
  text-decoration: none;
}
.product__title>a:hover{
  text-decoration: underline;
}

Now the image’s title is clickable

Hope this helps you.