Shopify Dawn theme Product card clickable area

Retired Boards Appdev Store Design
1

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

1 Like
2

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;
  }
  1. Snippets → /card-collection.liquid and /card-product.liquid. Please add code at above tag like image.

Screenshot_6.png
Screenshot_6.png1717×813 122 KB

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

2 Likes
3

@AntheiaE

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

2 Likes
4

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.

1 Like
5

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