Turn collection image into a clickable button dawn theme

Store Design
, , , ,

Topic summary

A user customized collection list sections to display images with text overlays, but only the text was clickable—not the entire image. This created a poor user experience.

Root Cause:
The custom CSS used display: none; on the .card__content element, which hides it and prevents any interaction with visitors.

Solution:
Replace display: none; with opacity: 0; in the custom CSS. This keeps the element invisible but still interactive, making the entire image area clickable.

Implementation:
Add to the Collection List section’s Custom CSS:

.card__content {
    display: block !important;
    opacity: 0;
}

Or modify existing code by changing display: none; to opacity: 0;.

Outcome:
The solution was confirmed working by another user facing the same issue. The discussion is resolved with a straightforward CSS fix applicable to Dawn theme collection pages.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Hello, I have customized some of my sections with coding to look a certain way. Specifically my collection lists, so that they appear as an image, with the text inside the image. However if you want to go to a specific collection, I need to click on the text, and clicking on the image doesnt work which isnt very user friendly. How can I make the images clickable? I have examples of specific areas where I need this done:

JordiP_0-1730636139451.png
JordiP_0-1730636139451.png1916Ă—919 412 KB

( ^ I would like these collection images (not just the text) to be clickable on the home page)

JordiP_1-1730636199876.png
JordiP_1-1730636199876.png1904Ă—919 294 KB

( ^ Also would like to make the images clickable on the collection showcase page)

Store: https://artisimo.es/

Pass: pongia

Appreciate any help!

1 Like
2

yes possible but collaboration required @JordiP

3

Works for me with this code in base.css:

.collection-list__item .card__content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0%;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 40px;
}

4

Hi @JordiP I am trying to do the exact same thing as you were! May I ask, did you figure out how to do this? I hope that I just need to add some Custom CSS to the Collection List but I haven’t been able to find any examples of this yet. If you have some information on how to do this I would be extremely grateful if you could share this with me. Best regards - Steve

6

Please share the link to your store

7

@user1633 can you please share the page link where you want to do it?

8
9

Please add this code to Custom CSS of Collection list section

.card__content {
    display: block !important;  
    opacity: 0;
}

Best regards,
Dan from Ryviu: Product Reviews App

10

You have this code in the Sections “Custom CSS”:

.collection-list__item .card__content {
  display: none;
  position: absolute;
  align-items: center;
  height: 100%;
}

Which is almost there with one exception – when you use display:none; it not only hides the element, but prevents it from interacting with visitors.

Replace it with opacity:0; and you’re golden.

1 Like
11

@tim_1 and @Dan-From-Ryviu thank you both so so much for your speedy responses and selflessness, I went down the route of replacing display:none; with opacity:0; and it worked a treat. Can’t wait to get this site up and running and start trading! Super awesome, thanks again! :slight_smile:

1 Like
12

You are very welcome!