Make entire product image clickable after custom CSS

Store Design
, ,

Topic summary

Goal: Make the entire product image clickable in a Shopify Dawn theme after moving product titles over the images with custom CSS.

Context: Overlaying the title made only the title text clickable, not the whole image area.

Key attempts:

  • Initial CSS suggested expanding the title container (.card__heading) and its link (.full-unstyled-link) to fill the card. It didn’t work initially; a follow-up noted the code wasn’t visible and advised adding it at the end of base.css.
  • Working solution provided: Set .product-grid .card__heading as an absolute, full-size overlay (width/height 100%, top: 0) and center its content with flex; include a slight vertical offset (transform) to position the text. This made the entire image area lead to the product page.
  • An alternative variant used padding-top to adjust vertical positioning while also making the overlay full height/width.

Outcome: Resolved. OP and another participant confirmed the GemPages CSS approach works. Actionable note: place the CSS at the end of base.css to ensure it applies.

Summarized with AI on January 4. AI used: gpt-5.
1

Link: https://medcan-university.myshopify.com/

Theme: Dawn

Hello!

I used some custom CSS to display the product titles on top of the product images.

However, this has made it so that people can only access the product page by clicking on the title of the product. I would like it so that clicking anywhere on the product image, they will also be lead to the product page.

Thanks!

2

@medcanuni - add this css and check

.product-grid .card__heading {position: absolute;    width: 100%;    left: 0;    top: 0;    bottom: 0;}

.product-grid .card__heading .full-unstyled-link{height: 100%;
    display: flex;    align-items: center;    justify-content: center;}
1 Like
3

Unfortunately, this did not work.

4

@medcanuni - I do not see the coded added, please add all code to the end of base.css file

5

Hello @medcanuni ,

It’s GemPages support team and glad to support you today.

You could please try changing the code to like that:

.product-grid .card__heading {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 18px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-30px);
}

Best regards,
GemPages Support Team

6

This worked! Thanks so much for your help.

1 Like
7 
.product-grid .card__heading {
    position: absolute;
    padding-top: 40%;
    width: 100%;
    font-size: 18px;
    text-align: center;
    top: 0;
    height: 100%;
}
8

Hello @medcanuni ,

I am glad that my solution is helpful to you.

Best regards,
GemPages Support Team

9

It worked