Re: Dawn Theme - Collection's List - Remove Titles / Clickable Images

Dawn Theme - Collection's List - Remove Titles / Clickable Images

vferriero
Visitor
1 0 0

Hi guys, 

I am working on our webstore under the Dawn Theme. I want to use the Collection's List on our store frontpage, but remove the writing below each image. I was able to do this by using code I found on another forum. 

Screenshot 2023-03-03 at 18.46.07 copy.jpg This successfully removes the writing at the bottom of each Image (see below): 

Screenshot 2023-03-03 at 18.46.29.png

However, the images can no longer be clicked to reach the appropriate Collection's Page. 

 

I believe this is because the links are tied to the text, so you lose the clickability when you remove them. 

 

I've tried a workaround, but to no avail. Other forum suggestions don't work to solve the issue. I did see one post that said that backend work had to be done in order to make the clickable, but it didn't offer further advice and I'm not sure what they meant by it. 

 

Any help would be greatly appreciated!

Replies 5 (5)

Columbus_Themes
Shopify Partner
121 9 16

Would be nice if you attach a link to your store for better understanding.

If you find my reply helpful, please hit Like and Mark as Solution.

Happy coding!

GenericStoreAdm
Tourist
10 0 3

I know this post is almost a year old, but in case you haven't found a solution yet or other people (like me) stumble upon this post without getting an answer; here is what I added at the end of my base.css file to make the pictures clickable and completely hide the title:

 

.collection-list__item .card__content {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    opacity: 0;
}
.collection-list__item .card__content .card__information {
    padding-left: 20px;
}

 

As for your question directly: the solution is using opacity: 0 instead of display: none. Why?

The link is behind the text, so if you use display: none you "remove" the text and consequently the link.
Opacity on the other hand just hides it.

Vlk1
Excursionist
23 1 0

Honestly you saved me! Thank you. 🙂

kateeliz26
Visitor
2 0 0

Hey, does this change every collection list or can you add the code so it changes just one collection list?  I have two on my homepage but only want to remove the words and link below for one.

kateeliz26
Visitor
2 0 0

I answered my own question by adding it to the section!  I haven't used Shopify for a few years.  Thanks for this code!