Hello!
I need help to remove the text infront my collections because i have the names of the collection in the collection picture.
Topic summary
A Shopify store owner wants to remove collection text labels that appear in front of collection images, since the collection names are already embedded within the images themselves.
Initial Problem & Solution:
- User shared store URL (yourownpcbuild.nl) and screenshots showing unwanted text overlays
- Multiple community members offered CSS solutions to hide the collection titles
- The working solution involved adding CSS code to the
component-card.cssfile to hide collection grid titles usingdisplay: none !important;
Follow-up Issues:
- User then needed to remove similar text from product collection pages
- Additional CSS code was provided to hide hero titles by targeting
h2.hero__titlein the theme.liquid file - This solution also worked successfully
Current Status:
- User now asks about adjusting the background image size, as the current image appears too zoomed in and obscures embedded text
- This latest question remains unanswered
1 Like
Hey @VK007
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
Hi @VK007
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.
Hi @VK007
Please share the link to your page so I can provide the code to do that, or try to add this code to Custom CSS of those sections.
h2 { opacity: 0; }
Hi! I don’t have the option to add a custom css.
This is the link to my store
https://www.yourownpcbuild.nl/
Hey @VK007
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like
Hi @VK007 , you can follow these steps:
Step 1: Open Online Store → Themes → Edit code.
Step 2: Find component-card.css file
Step 3: Paste this code at the bottom of the file
.collection_grid-text-wrapper h3.collection_grid-title {
display: none !important;
}
If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you 
This worked thankyou!!
1 Like
Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.
1 Like
Keep the previous code and add this new code above in the end of theme.liquid file
h2.hero__title {
display: none !important;
}
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like
