How to make product card clickable

Store Design
,

Topic summary

A user needed help making entire product cards clickable on their Shopify store, as only the bottom portion was currently interactive. The issue affected product cards on both the homepage and a “Coffee Boxes” page, both built using PageFly.

Problem Context:

  • Previous custom code for this functionality had stopped working
  • An image was shared showing the current clickable area limitation

Resolution:
A CSS solution was provided and successfully implemented:

  • Custom CSS code using h3:after with absolute positioning was added to the section
  • This creates an invisible overlay that extends the clickable area across the entire card
  • The solution was tested and confirmed working

Status: ✓ Resolved and marked as solution

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I’m trying to make the entirety of the product cards clickable. Currently, only the bottom is clickable.

The product cards are featured in the home page and in the “Coffee Boxes” page. I would like to make the entirety of product cards clickable in both locations.

SantosBaez_0-1749515011945.png
SantosBaez_0-1749515011945.png1158×815 227 KB

FYI: the home page and the “Coffee Boxes” page were designed using PageFly.

Website home page: www.borikafe.com

“Coffee Boxes” page: https://borikafe.com/pages/coffee-boxes

Any help is greatly appreciated!

2

Hi, @SantosBaez

I can add the feature for you. But it needs to add some custom code. If you need my help, please let me know.

3

I previously had a custom code to make the whole product card cliackable, but it stopped working. If you could help me with a new code, I would greatly appreciate it.

4

Hi @SantosBaez

You can try to add this code to Custom CSS of that section and check again

h3:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
1 Like
5

Can you please send me your collaborator code? I will check it for you.

6

Hi AnneLuo, the collaborator code is 4049.

7

Thank you @Dan-From-Ryviu ! This worked!

Marked as solution!

1 Like
8

You are very welcome!

1 Like