How to make the image product on card product clickable?

Solved
NachoBCN12
Excursionist
34 1 4

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

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
5612 1031 1059

This is an accepted solution.

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

.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;
}

 

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

View solution in original post

Replies 3 (3)
Dan-From-Ryviu
Shopify Partner
5612 1031 1059

This is an accepted solution.

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

.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;
}

 

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

NachoBCN12
Excursionist
34 1 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!

David_SHT
Trailblazer
605 123 123

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%;
}

 

 

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)