Hello, I wonder if anybody can help me!
I am trying to remove the text underneath a collection list.
I have attached a photo to show what I am referring to. I have looked in other posts about this issue and have tried to paste the codes given but nothing has seemed to work.
I would also still like to be able to click on collection and view the collection.
Can anyone help me please?
thank you,
Lisa
Hi Lisa,
This is a common request! It sounds like the previous code snippets you tried might have been specific to different themes or pasted in the wrong file.
You can easily hide the text underneath your collection list using a small bit of CSS. This will hide the title visually while keeping the actual image fully clickable so your customers can still navigate to the collection pages.
Since you didn’t mention which theme you are using (like Dawn, Sense, Refresh, etc.), here is a universal way to do it using the built-in Custom CSS feature, which doesn’t require editing your main theme files:
Option 1: Using Online Store 2.0 Theme Customizer (Safest & Easiest)
Go to your Shopify admin dashboard and navigate to Online Store > Themes.
Click Customize next to your active theme.
Navigate to the page and section where your Collection List is located.
Click directly on the Collection list section in the left-hand sidebar menu.
Scroll down to the very bottom of the right-hand settings panel until you see Custom CSS.
Paste the following code into the box:
CSS
.collection-card__title,
.card__heading,
.collection-list-title {
display: none !important;
}
Click Save at the top right.
Let me know if this works out
There are similar threads, some has solutions – Turn collection image into a clickable button dawn theme - #10 by tim_tairli
The final code would be:
.collection-list__item .card__content {
opacity: 0;
position: absolute;
align-items: center;
height: 100%;
}
You can put it into “Custom CSS” setting under “Theme settings” in “Edit theme”.
Before/After:
@lisatrendy this can be done using css, can you please share your page link so I can provide you the exact css
It worked in taking away the text thank you but now I can’t click on the picture and view that collection. Is there another piece of code for this?
This one worked, thank you!
Hi Lisa,
I’d be happy to help with this.
I had a look at the screenshot you shared. It should be possible to remove the text underneath the collection while keeping the collection itself fully clickable.
Could you let me know which Shopify theme you’re using? The solution varies slightly depending on the theme, so once I know which one you’re using, I can provide the exact steps or code you need.
Hi @lisatrendy,
Go to online store > edit code
In assets folder open theme.css or global.css and at the bottum of this code paste this
.collection-list .card__heading {
display: none !important;
}
Save.
