Make entire product card clickable, not just title

Technical Q&A
,
1

My Shopify product card currently only makes the product title clickable, but I want entire product card (image + title + content area) to be clickable, so that customers can click anywhere on the card to go to the product page.

Could someone please assist? My website is junojane.co. Thank you!

2

@kkayleighh please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

this might not give you the perfect solution as per your need, but it will make area clickable

.card.card--standard.card--media {    position: relative;}

.card .card__information{position: absolute; height: 100%; width: 100%;}

.card__information .card__heading {height: 100%;}
3

Hi!

This works, thank you for your help. However, it makes the card look like this. Is there a fix so the price and the title is still on the same line?

Screenshot 2025-09-28 at 9.52.17 PM
Screenshot 2025-09-28 at 9.52.17 PM1572×1048 34.5 KB

4

Try this code.
It can go into “Theme settings”=> “Custom CSS”, but since your theme code is already modified, it can also go to the bottom of the assets/base.css:

.card__inner + .card__content {
  position: absolute;
  inset: 0;
  padding: 0 10px;
}

.card__information {
  position: initial;
  width: 100%;
  flex-flow: row wrap;
  align-content: flex-start;
}

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
5

Hi @kkayleighh,

Please go to Customize > Theme settings > Custom CSS and add code:

.card--standard > .card__content .card__information {
    height: 100% !important;
    align-items: flex-start !important;
}

If I helped you, then a Like would be truly appreciated.

7

hello! thank you for replying, the desktop looks good but the mobile listing still looks a bit wonky. the title and price should be on the same price

is there any fix for this?

Screenshot 2025-09-30 at 8.58.46 AM
Screenshot 2025-09-30 at 8.58.46 AM570×534 159 KB

8

Hi @kkayleighh,

Please change code:

.card--standard > .card__content .card__information {
    height: 100% !important;
    align-items: flex-start !important;
}
@media screen and (max-width: 749px){
.card--standard > .card__content .card__information {
    justify-content: flex-start !important;
}
}
9

Please add this code to Custom CSS in your theme settings and check.

.card__information {
    align-items: flex-start;
    height: 100%;
    flex-direction: row;
}
10

Thank you for helping! This solution works :slight_smile:

11

Hi @kkayleighh,

It’s my pleasure :blush: