How to make product image clickable not just the title

Store Design

Topic summary

A store owner modified CSS to reposition product titles above images, which inadvertently made only the titles clickable instead of the entire product card.

Problem: After applying custom CSS, product images lost their clickable functionality, leaving only the title text as an interactive element.

Solution Provided: Multiple users shared the same CSS fix to restore clickability:

  • Locate the base.css file in the theme code editor
  • Update the .card__content styling with position: absolute and specific positioning values
  • Add hover state styling for .card-wrapper:hover .card__content .card__information with transparent background

Outcome: The original poster confirmed the solution worked successfully.

Note: Some code snippets in the thread appear reversed/mirrored, but the core CSS solution involves adjusting card content positioning and hover states.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I added some css recently to put my product titles on top of the image rather than below. Now i’ve noticed only the title of the product is clickable and not the image itself. Can someone please help me make the images of products and collection cards clickable to the specific product page.

Thank you!!

https://nuijewellery.com.au/collections/static-collection

Theme is dawn

2

Update this code in your base.css file from this

@media only screen and (min-width: 200px) {
.card__content {
position: absolute;
bottom: 10px;
margin-left: 10px;
left: 0; /* Adjust to position on the bottom left */
padding: 0px; /* Add padding for spacing */
}
.card-wrapper:hover .card__content .card__information {
background: transparent;
}

To this

@media only screen and (min-width: 200px) {
.card__content {
position: absolute;
bottom: 10px;
margin-left: 10px;
left: 0; /* Adjust to position on the bottom left */
padding: 0px; /* Add padding for spacing */
top: 0;
right: 0;
align-items: end;
}
.card-wrapper:hover .card__content .card__information {
background: transparent;
}
1 Like
3

Legend! Thanks so much it worked!

1 Like
4

HI @jewellerystore1
We have gone through your problem and found a solution.
Solution:
You can follow these steps to achieve your result
Go to online store → edit code → base.css file And past the below code top of the file

@media only screen and (min-width: 200px) {
 .card__content {
   position: absolute;
   bottom: 10px;
   margin-left: 10px;
   left: 0; 
   padding: 0px; 
   top: 0;
   right: 0;
   align-items: end;
 }
 .card-wrapper:hover .card__content .card__information {
   background: transparent;
 }
}