Making product images clickable in Collections - Dawn theme

Shopify Discussion
1

Hi community!

I would like to make the products in the collection pages clickable.

Currently i am only able to click on the Text link below the Product, which is not very intuitive.

Can someone please help pull this off? I am on Dawn version 9.0

Thanks much!

Femmi

2

Hi @Femmi

Could you drop your store link to check?

3

@Femmi
Hi Femmi
its a pretty easy task you need to wrap the images in product get url

{{ product.title }}

in the above code wrap your images code between the A tag
Thanks

Is it helpful? Like, or Accept solution.

4

Hi Dan, My store is www.femmiflare.com

Thanks much!

Femmi

5

Hi Ecomheroes, Which file does this goes in and where exactly? That would be pretty helpful!

Thanks much!

Femmi

6

@Femmi This can be Collection.liquid or Collection-template.liquid

7

I dont have either of those files. Is it by any other name for Dawn 9.0?

8

Hello Dan, Can you help?

Thanks!

Femmi

9

Hi @Femmi

Go to Online store > Themes > Edit code > open base.css file, add this code at the bottom, and save the file.

.card__content {
z-index: 9;
}
.card__information a..full-unstyled-link {
padding-top: 200% !important;
margin-top: -200% !important;
}
.product-card-wrapper {
overflow: hidden;
}
10

Hi Dan, Unfortunately adding the code has not done anything. Is there a way to add code to the collections template rather than base.css?

Thanks,

Femmi

11

My code has small issue, please update code

.card__content {
z-index: 9;
}
.card__information a.full-unstyled-link {
padding-top: 200% !important;
margin-top: -200% !important;
}
.product-card-wrapper {
overflow: hidden;
}
12

Thank you Dan!! Have a blessed day!

13

Hello,

Thanks for your solution this code works! But it has a black shadow on the mobile version when clicked, could you please help?

IMG_4407.jpg
IMG_4407.jpg828×908 56.1 KB