Shopify Dawn theme Product card clickable area

[AntheiaE]

I am setting up Dawn theme for our store. For the product card, right now, the whole card is clickable. I want to limit the clickable area to the product image and product heading. 

Kindly suggest the code changes i can do to achieve this.

Regards,

Nitansh 

[Halothemes]

Hi @AntheiaE , 

If you use dawn theme, you can try follow the instruction below:
1. Go to Online Store -> Theme -> Edit code.
2. Asset -> /base.css paste code below into end of the file.

 .card--card:after, .card--standard .card__inner:after, .card__heading a:after{
    display: none !important;
  }
  .card .card__inner .card__media{
    z-index: 1 !important;
  }
  .card__badge, .card__information {
    z-index: 2 !important;
  }

3. Snippets -> /card-collection.liquid and /card-product.liquid. Please add code at above <img> tag like image.

<a href="{{ card_product.url }}" class="full-unstyled-link"></a>

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[Zworthkey]

@AntheiaE 
<a href="{{ card_product.url }}" class="full-unstyled-link"></a>

add this type of link into your product card,
Thank you

[AntheiaE]

Hi @Halothemes,

Thanks a lot for your help.

Now the product title is clickable. 

I want the product image also to be clickable. Actually i am adding "Add to Card" CTA in the card. and to make it clickable, I want only product title and image to be clickable and the rest of the card area should not be.

[Halothemes]

Hi @AntheiaE , 

Please share your store URL and password of front view.

So that I will check and let you know the exact solution here.

Best regards