How to make the image product on card product clickable?

Store Design
, ,
1

Hi I’m using dawn theme and I have already hide the text in product-card. So then users can’t click to go to products; how can I make the image clickable?

This is my web page:

https://bcnsurfschool.es/collections/clases-de-surf

Next to the hero banner You can see the 2 product-cards I want to make clickable.

The idea is to do it just like is done in the next section; but I made it using custom liquid

2

Hi @NachoBCN12

You can solve it by removing display: none; code you added and change code like this

Screenshot 2023-10-06 at 15.29.52.png
Screenshot 2023-10-06 at 15.29.52.png1750×924 405 KB

.card__content {
    /* display: none; */
    grid-template-rows: minmax(0,1fr) max-content minmax(0,1fr);
    padding: 1rem;
    width: 100%;
    flex-grow: 1;
    opacity: 0;
    margin: 0px;
    padding: 0px !important;
    height: 0px;
}
3

Hi @NachoBCN12

This is David at SalesHunterThemes.

In this case try to replace your custom code, with this code.

.card__content {
    grid-template-rows: minmax(0,1fr) max-content minmax(0,1fr);
    padding: 1rem;
    width: 100%;
    flex-grow: 1;
    position: absolute!important;
    opacity: 0;
    z-index: 999;
    height: 100%;
}
4

Thank you very much, it works!!

Can you also think of how to put the product title text within the image?

I was thinking of putting the text in the same image; the problem is that when changing the language, it won’t allow me to translate it…

Thanks again!