How to make product image clickable and linked to a link dawn theme

[lagentilestore]

I would like to know if there is a way to make a product image clickable and linked to a link. Without showing a button? How to let customers able to click on the image to see the product page?

Currently, the product title is only clickable. I need the website to respond if customers click on the image and show the product page.

[Akibhusen]

Hi,

Could you please share any screenshots of where you would like to implement this functionality?

[lagentilestore]

Hi!

I would like to implement this for any product.. So all products on all products pages, featured collections, you may also like, etc..

Kind regards,

[GemPages]

Hello @lagentilestore

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

I would like to give you a solution to support you:

1. I added 1 section: Multicolumn
2. Then hide the columns leaving only 1 column

3. Then set that column with only the image and the link below the image:

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

[lagentilestore]

Hi!

This is not what I mean.

The images from the products should be linked and be clickable, now we are only able to click on the product titels..

Kind regards,

Els

[Akibhusen]

HI @lagentilestore ,

Making the product image clickable requires some code changes in the theme. Do you have knowledge of coding?

[lagentilestore]

A little bit.. If you can explain where I should place the code I can try to do it by myself.

[Akibhusen]

Could you please share your store URL and theme name?

[lagentilestore]

Of course: https://la-gentile.myshopify.com/
The theme name is: DAWN

[LitExtension]

Hi @lagentilestore ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

.card__content .card__information {
    position: static !important;
}

Hope it helps!

[Akibhusen]

Hi @lagentilestore ,

Please follow the below step and made changes in the custom CSS.

1. From your Shopify admin, go to Online Store > Themes.

2. Click Actions > Edit code.

3. Search for the custom.css file.

4. search for “.card__content .card__information” class in CSS file.

5. comment on the relative position property as per the below.

.card__content .card__information {
  /* position: relative; */
  padding-top: 2.2rem;
}

[lagentilestore]

Do I have to remove “.card__content .card__information” and place the code you just send me on that line? Just double checking if I understood you well.

[Akibhusen]

@lagentilestore , just comment on the “position: relative” line as I showed in my code and it works fine.

let me know if you are not able to manage it from your end. I can help you

[LitExtension]

Hi @lagentilestore ,

You don’t need to change anything first, just add my code, and the image will be clicked.

Hope it helps!

[lagentilestore]

I don’t have theme.css..

[lagentilestore]

It worked! Thank you so much. Happy holidays!

[LitExtension]

Hi @lagentilestore ,

Sorry for the confusion, it is base.css file.

Hope it helps!

[lagentilestore]

Hi! It worked, only I have the same problem coming up as with the above code.
The 25% OFF that should be below the pictures and up above the pictures.
Any idea how we can avoid this?

[LitExtension]

Hi @lagentilestore ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.card__content .card__information .sale {
    position: static !important;
}

Hope it helps!

[lagentilestore]

It worked, thank you so much!