Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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.
This successfully removes the writing at the bottom of each Image (see below):
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!
Would be nice if you attach a link to your store for better understanding.
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.
Honestly you saved me! Thank you. 🙂
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.
I answered my own question by adding it to the section! I haven't used Shopify for a few years. Thanks for this code!
Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024The Hydrogen Visual Editor is now available to merchants in Shopify Editions | Summer '...
By JasonH Sep 2, 2024Note: Customizing your CSS requires some familiarity with CSS and HTML. Before you cust...
By JasonH Aug 12, 2024